/* =====================================================================
   StreamTech · theme.css
   FONTE ÚNICA DE VERDADE do design system.

   Regra de ouro: nenhuma cor, raio, sombra, espaçamento ou duração deve
   ser escrita direto em styles.css. Tudo vem daqui via var(--token).
   Para mudar a identidade visual do produto inteiro, altere só este arquivo.

   Ordem de carregamento obrigatória em TODAS as páginas:
     <link rel="stylesheet" href="/theme.css">
     <link rel="stylesheet" href="/styles.css">
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ESCALA PRIMITIVA
   Valores crus. Nenhum componente deve referenciar estes tokens
   diretamente — use os tokens semânticos da seção 2.
   --------------------------------------------------------------------- */
:root {
  /* Neutros: do fundo mais profundo ao texto mais claro. */
  --st-neutral-1000: #050609;
  --st-neutral-950:  #090a0d;
  --st-neutral-900:  #0e1014;
  --st-neutral-850:  #111318;
  --st-neutral-800:  #171a20;
  --st-neutral-750:  #1c1f26;
  --st-neutral-700:  #20232a;
  --st-neutral-650:  #22252c;
  --st-neutral-600:  #282b32;
  --st-neutral-550:  #2f333b;
  --st-neutral-500:  #3d414a;
  --st-neutral-450:  #4a4e58;
  --st-neutral-400:  #5d626d;
  --st-neutral-350:  #767c8c;
  --st-neutral-300:  #969aa4;
  --st-neutral-250:  #b8bbc3;
  --st-neutral-200:  #d7d9de;
  --st-neutral-150:  #e8e9eb;
  --st-neutral-100:  #f3f4f6;
  --st-neutral-50:   #f7f7f8;
  --st-white:        #ffffff;

  /* Estados semânticos. Usados com parcimônia sobre a base neutra. */
  --st-red-500:    #ff4d67;
  --st-red-400:    #ff8095;
  --st-red-900:    #2a1219;
  --st-red-800:    #3f1a24;
  --st-red-border: #71303b;

  --st-green-500:  #3ddc97;
  --st-green-400:  #7ff0c0;
  --st-green-900:  #0f2419;

  --st-amber-500:  #ffc95c;
  --st-amber-900:  #2a2110;

  --st-blue-500:   #6ea8ff;
  --st-blue-900:   #131e33;
}

/* ---------------------------------------------------------------------
   2. TOKENS SEMÂNTICOS
   O que os componentes realmente consomem.
   --------------------------------------------------------------------- */
:root {
  /* --- Superfícies: hierarquia de elevação em 5 degraus --- */
  --surface-canvas:  var(--st-neutral-950);  /* fundo da página            */
  --surface-sunken:  var(--st-neutral-900);  /* áreas rebaixadas, barras   */
  --surface-base:    var(--st-neutral-850);  /* painéis, cards             */
  --surface-raised:  var(--st-neutral-800);  /* controles sobre painéis    */
  --surface-overlay: var(--st-neutral-700);  /* hover, popovers, tooltips  */
  --surface-inset:   var(--st-neutral-1000); /* poços: canvas, logs, vídeo */

  /* --- Linhas --- */
  --line-subtle:  var(--st-neutral-600);
  --line-default: var(--st-neutral-550);
  --line-strong:  var(--st-neutral-500);
  --line-hover:   var(--st-neutral-400);

  /* --- Texto --- */
  --text-primary:   var(--st-neutral-50);
  --text-secondary: var(--st-neutral-200);
  --text-muted:     var(--st-neutral-300);
  --text-faint:     var(--st-neutral-350);
  --text-inverse:   var(--st-neutral-900);

  /* --- Acento (ação primária) --- */
  --accent-solid:       var(--st-neutral-100);
  --accent-solid-hover: var(--st-white);
  --accent-on-solid:    var(--st-neutral-900);
  --accent-ring:        rgba(243, 244, 246, .28);
  --accent-glow:        rgba(255, 255, 255, .12);

  /* --- Estados --- */
  --danger-fg:      var(--st-red-400);
  --danger-bg:      var(--st-red-900);
  --danger-bg-hover:var(--st-red-800);
  --danger-line:    var(--st-red-border);
  --danger-solid:   var(--st-red-500);

  --success-fg:     var(--st-green-500);
  --success-bg:     var(--st-green-900);

  --warning-fg:     var(--st-amber-500);
  --warning-bg:     var(--st-amber-900);

  --info-fg:        var(--st-blue-500);
  --info-bg:        var(--st-blue-900);

  --live-fg:        var(--st-red-500);
  --live-glow:      rgba(255, 77, 103, .22);

  /* --- Tipografia --- */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-md:  13px;
  --text-base:14px;
  --text-lg:  16px;
  --text-xl:  19px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  --weight-regular: 450;
  --weight-medium:  550;
  --weight-semibold:650;
  --weight-bold:    750;
  --weight-heavy:   820;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal:1.55;

  --tracking-tight: -.02em;
  --tracking-wide:  .06em;

  /* --- Espaçamento: escala de 4px --- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10:40px;

  /* --- Raios --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-pill: 999px;

  /* --- Sombras --- */
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm:      0 2px 6px rgba(0, 0, 0, .26);
  --shadow-md:      0 8px 20px rgba(0, 0, 0, .3);
  --shadow-lg:      0 18px 42px rgba(0, 0, 0, .38);
  --shadow-xl:      0 28px 70px rgba(0, 0, 0, .5);
  --shadow-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, .045);
  --shadow-focus:   0 0 0 3px var(--accent-ring);

  /* --- Alturas de controle: garante alinhamento entre botões e inputs --- */
  --control-h-sm: 30px;
  --control-h-md: 36px;
  --control-h-lg: 42px;

  /* --- Movimento --- */
  --ease-out:   cubic-bezier(.32, .72, .32, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);
  --dur-fast:   .12s;
  --dur-base:   .18s;
  --dur-slow:   .3s;

  /* --- Camadas --- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-dialog:  1000;
  --z-toast:   9999;
}

/* ---------------------------------------------------------------------
   3. PONTES DE COMPATIBILIDADE
   O CSS legado usa 4 famílias paralelas de variáveis (--bg/--panel,
   --landing-*, --dash-*, --studio-*) para descrever a MESMA paleta.
   Aqui elas viram apelidos dos tokens acima. Nenhuma regra existente
   quebra, e a cor passa a ter um único ponto de edição.
   --------------------------------------------------------------------- */
:root {
  /* família global legada */
  --bg:      var(--surface-canvas);
  --panel:   var(--surface-base);
  --panel-2: var(--surface-raised);
  --border:  var(--line-subtle);
  --text:    var(--text-primary);
  --muted:   var(--text-muted);
  --accent:  var(--accent-solid);
  --red:     var(--danger-solid);
  --green:   var(--success-fg);
  --yellow:  var(--warning-fg);

  /* família landing */
  --landing-bg:        var(--surface-canvas);
  --landing-surface:   var(--surface-base);
  --landing-surface-2: var(--surface-raised);
  --landing-line:      var(--line-subtle);
  --landing-text:      var(--text-primary);
  --landing-muted:     var(--text-muted);
  --landing-accent:    var(--accent-solid);
  --landing-red:       var(--danger-solid);

  /* família dashboard */
  --dash-bg:        var(--surface-canvas);
  --dash-surface:   var(--surface-base);
  --dash-surface-2: var(--surface-raised);
  --dash-line:      var(--line-subtle);
  --dash-text:      var(--text-primary);
  --dash-muted:     var(--text-muted);

  /* família estúdio */
  --studio-surface:        var(--surface-base);
  --studio-surface-raised: var(--surface-raised);
  --studio-surface-soft:   var(--surface-overlay);
  --studio-line:           var(--line-subtle);
  --studio-line-strong:    var(--line-strong);
  --studio-text:           var(--text-primary);
  --studio-muted:          var(--text-muted);

  /* textura de fundo compartilhada pelas três páginas */
  --ambient-grid: linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
  --ambient-grid-size: 56px 56px;
  --ambient-glow: radial-gradient(circle at 16% 2%, rgba(255, 255, 255, .05), transparent 28%),
                  radial-gradient(circle at 84% 32%, rgba(110, 116, 132, .07), transparent 26%);
}

/* ---------------------------------------------------------------------
   4. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-solid); color: var(--accent-on-solid); }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--text-secondary); }
a:hover { color: var(--text-primary); }

hr { width: 100%; border: 0; border-top: 1px solid var(--line-subtle); margin: var(--space-2) 0; }

/* Foco visível e consistente em todo o produto — acessibilidade. */
:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

/* Barras de rolagem unificadas. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--line-hover); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   5. CAMADA DE COMPONENTES
   Uma definição por componente. Toda página herda o mesmo acabamento.
   --------------------------------------------------------------------- */

/* --- 5.1 Botões ------------------------------------------------------
   Hierarquia: primary > default > ghost > danger.
   Todos partilham altura, raio, transição e tratamento de foco, de modo
   que qualquer combinação numa mesma barra fica alinhada.
   ------------------------------------------------------------------- */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h-md);
  padding: 0 var(--space-5);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

button:hover:not(:disabled) {
  background: var(--surface-overlay);
  border-color: var(--line-hover);
  color: var(--text-primary);
}

button:active:not(:disabled) { transform: translateY(1px); }

button:disabled,
button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* Ícones dentro de botões nunca desalinham o texto. */
button > svg,
button .control-icon svg,
button .tab-icon svg {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
}

/* Primária: única ação sólida por contexto. */
button.primary,
.primary,
button.live-button,
.dash-action.primary-action {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-on-solid);
  font-weight: var(--weight-bold);
  box-shadow: 0 6px 16px var(--accent-glow);
}
button.primary:hover:not(:disabled),
.primary:hover:not(:disabled),
button.live-button:hover:not(:disabled) {
  background: var(--accent-solid-hover);
  border-color: var(--accent-solid-hover);
  color: var(--accent-on-solid);
}

/* Fantasma: ação terciária, sem peso visual. */
button.ghost,
.chat-icon-btn,
.icon-close,
.btn-refresh-icon {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
button.ghost:hover:not(:disabled),
.chat-icon-btn:hover:not(:disabled),
.icon-close:hover:not(:disabled),
.btn-refresh-icon:hover:not(:disabled) {
  background: var(--surface-overlay);
  border-color: var(--line-default);
  color: var(--text-primary);
}

/* Destrutiva. */
button.danger,
.btn-stop-compact,
.btn-logout-small {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger-fg);
}
button.danger:hover:not(:disabled),
.btn-stop-compact:hover:not(:disabled),
.btn-logout-small:hover:not(:disabled) {
  background: var(--danger-bg-hover);
  border-color: var(--danger-solid);
  color: var(--text-primary);
}

/* Destrutiva discreta. */
button.ghost-danger,
.ghost-danger {
  background: transparent;
  border-color: transparent;
  color: var(--danger-fg);
}
button.ghost-danger:hover:not(:disabled),
.ghost-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger-line);
}

/* Tamanhos. */
.btn-sm,
button.btn-sm {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}
.btn-lg,
button.btn-lg,
.auth-submit,
.join-submit {
  min-height: var(--control-h-lg);
  padding: 0 var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

/* Botão só de ícone: quadrado perfeito, nunca achatado. */
.icon-close,
.chat-icon-btn,
.btn-refresh-icon,
button.icon-only {
  width: var(--control-h-md);
  min-width: var(--control-h-md);
  padding: 0;
  border-radius: var(--radius-md);
}
.btn-sm.icon-only,
.chat-icon-btn {
  width: var(--control-h-sm);
  min-width: var(--control-h-sm);
  min-height: var(--control-h-sm);
}

.wide, button.wide { width: 100%; }

/* --- 5.2 Campos ------------------------------------------------------
   Mesma altura dos botões: barras mistas ficam alinhadas por construção.
   ------------------------------------------------------------------- */
input, select, textarea {
  width: 100%;
  min-height: var(--control-h-md);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: var(--text-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--line-hover); }

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-solid);
  box-shadow: var(--shadow-focus);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }

textarea { min-height: 78px; resize: vertical; line-height: var(--leading-snug); }

input[type="checkbox"], input[type="radio"] {
  width: 16px; min-width: 16px; height: 16px; min-height: 16px;
  margin: 0; padding: 0;
  accent-color: var(--accent-solid);
  cursor: pointer;
}
input[type="color"] {
  width: 34px; min-width: 34px; height: var(--control-h-sm); min-height: var(--control-h-sm);
  padding: 2px; cursor: pointer;
}
input[type="range"] {
  min-height: 24px; padding: 0;
  accent-color: var(--accent-solid);
  cursor: ew-resize; touch-action: pan-x;
  background: transparent; border: 0;
}
input[type="file"] { padding: var(--space-2); cursor: pointer; }

label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* --- 5.3 Superfícies -------------------------------------------------- */
.st-card,
.health-card,
.device-preview-card,
.production-tools,
.theme-panel,
.banner-library {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
}

/* --- 5.4 Abas --------------------------------------------------------- */
.tab {
  flex: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  border-bottom: 2px solid transparent;
}
.tab:hover:not(:disabled) { background: rgba(255, 255, 255, .04); color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent-solid); background: rgba(255, 255, 255, .05); }

/* --- 5.5 Diálogos ----------------------------------------------------- */
dialog {
  border: 1px solid var(--line-default);
  border-radius: var(--radius-xl);
  background: var(--surface-base);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
  padding: var(--space-7);
}
dialog::backdrop { background: rgba(0, 0, 0, .66); backdrop-filter: blur(3px); }

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* Ação destrutiva ancorada à esquerda, confirmação sempre por último à direita. */
.dialog-actions > .ghost-danger:first-child { margin-right: auto; }

/* --- 5.6 Grupos de ação ----------------------------------------------
   Qualquer barra de botões: espaçamento e alinhamento vertical uniformes.
   ------------------------------------------------------------------- */
.inline-actions,
.media-controls,
.share-controls,
.toolbar-actions,
.layout-buttons,
.chat-actions,
.asset-actions,
.banner-item-actions,
.device-test-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- 5.7 Utilitários --------------------------------------------------- */
.hidden { display: none !important; }
[hidden] { display: none !important; }

.muted { color: var(--text-muted); line-height: var(--leading-normal); }
.small { font-size: var(--text-md); }
.tiny  { font-size: var(--text-xs); }
.error { min-height: 18px; margin: 0; color: var(--danger-fg); font-size: var(--text-md); }

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.count-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  background: var(--surface-overlay);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.toast {
  position: fixed;
  right: var(--space-8);
  bottom: var(--space-8);
  z-index: var(--z-toast);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--line-hover);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  color: var(--text-primary);
  font-size: var(--text-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast.show { opacity: 1; transform: none; }