/* ============================================================================
   Cerbero Console — SISTEMA DE TOKENS (Fase 1)
   ----------------------------------------------------------------------------
   A fundação visual do console: cor, tipografia, espaçamento, forma, movimento
   e foco. Substituiu os tokens do Material Design 3 herdados do Typhon.
   Nenhuma tela deve declarar cor, tamanho de fonte, espaçamento, raio ou
   duração fora daqui. Se uma tela precisa de algo que não existe, o token entra
   NESTE arquivo — nunca CSS local (regra de ouro).

   Público: engenheiro de segurança operando infraestrutura crítica. As decisões
   seguem daí: legibilidade acima de densidade decorativa, consequência visível
   antes da ação, e nenhuma informação transmitida SÓ por cor.

   Contrastes medidos (WCAG 2.1, calculados, não estimados) — ver /_ui.
   ========================================================================= */

:root {
  color-scheme: dark light;

  /* ---- T1 · TIPOGRAFIA -------------------------------------------------- */
  /* Uma família de sistema (zero download, zero salto de layout) e uma mono
     reservada a valor técnico real: path, hash, env var. Nunca para prosa. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter var",
               Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Escala fechada: 8 tamanhos, piso 11px. Cada par é tamanho/entrelinha. */
  --t-large-title:   28px; --t-large-title-lh:   34px; /* título de tela */
  --t-title-1:       22px; --t-title-1-lh:       28px; /* seção maior */
  --t-title-2:       17px; --t-title-2-lh:       22px; /* título de card */
  --t-headline:      15px; --t-headline-lh:      20px; /* rótulo forte */
  --t-body:          15px; --t-body-lh:          22px; /* texto corrido */
  --t-callout:       14px; --t-callout-lh:       19px; /* valor em tabela */
  --t-subhead:       13px; --t-subhead-lh:       18px; /* metadado */
  --t-footnote:      12px; --t-footnote-lh:      16px; /* ajuda */
  --t-caption:       11px; --t-caption-lh:       14px; /* PISO — só acessório */

  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;

  /* Tracking negativo só acima de 20px, onde a fonte "abre" sozinha. */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;

  /* ---- T2 · ESPAÇAMENTO (grade de 4pt) --------------------------------- */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

  /* ---- T4 · FORMA ------------------------------------------------------ */
  --r-xs:   6px;  /* badge, chip, controle pequeno */
  --r-sm:  10px;  /* input, botão */
  --r-md:  14px;  /* card */
  --r-lg:  20px;  /* sheet, modal */
  --r-full: 999px;

  /* Alvo de toque mínimo (WCAG 2.5.5 / HIG). Botões podem ser visualmente
     menores, mas a área efetiva nunca. */
  --touch-min: 44px;
  --control-sm: 28px;
  --control-md: 34px;
  --control-lg: 44px;

  /* ---- T5 · MOVIMENTO -------------------------------------------------- */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 320ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---- Camadas ---------------------------------------------------------- */
  --z-header: 100;
  --z-rail:   90;
  --z-action-bar: 110;
  --z-overlay: 200;
  --z-toast:  300;
}

/* ============================================================================
   COR — dark é o padrão. A profundidade vem de LUMINÂNCIA + hairline de 1px,
   não de sombra: sombra em tela escura suja a superfície sem informar nada.
   Sombra fica reservada ao que realmente flutua (modal, toast, menu).
   ========================================================================= */
:root, :root[data-theme="dark"] {
  --bg:       #0B0D10;  /* canvas */
  --surface:  #14171C;  /* card, rail, header */
  --overlay:  #1B1F26;  /* menu, modal, linha destacada */
  --sunken:   #08090C;  /* campo de entrada, poço */

  --hairline:        rgba(255,255,255,0.09);
  --hairline-strong: rgba(255,255,255,0.16);

  --text:    #F2F4F7;   /* 16.30:1 sobre surface */
  --text-2:  #A9B1BD;   /*  8.31:1 */
  --text-3:  #828B98;   /*  5.21:1 — mínimo AA em TODAS as camadas */

  --accent:        #4C9AFF;  /* 6.31:1 */
  --accent-hover:  #6BADFF;
  --accent-press:  #3B87E8;
  --accent-quiet:  rgba(76,154,255,0.14);
  --on-accent:     #05070A;  /* texto sobre o acento — 12.4:1 */

  --success:       #3FD07F;  --success-quiet: rgba(63,208,127,0.14);
  --warning:       #F0B429;  --warning-quiet: rgba(240,180,41,0.14);
  --danger:        #FF6B6B;  --danger-quiet:  rgba(255,107,107,0.14);
  --info:          #63B3ED;  --info-quiet:    rgba(99,179,237,0.14);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.22);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.44);
  --scrim:    rgba(3,4,6,0.62);

  /* Não é uma cor que alguém vê: é o canal ALFA de uma máscara, onde opaco
     significa "mostre" e transparente significa "esconda". Existe como token só
     para que nenhum literal precise aparecer no components.css. */
  --mask-solid: #000;
}

/* Tema claro — não existia (0 ocorrências de prefers-color-scheme antes). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:      #FBFBFD;
    --surface: #FFFFFF;
    --overlay: #F2F3F7;
    --sunken:  #FFFFFF;

    --hairline:        rgba(0,0,0,0.10);
    --hairline-strong: rgba(0,0,0,0.18);

    --text:   #15181D;  /* 17.79:1 sobre surface */
    --text-2: #4A515C;  /*  8.01:1 */
    --text-3: #646B76;  /*  5.38:1 */

    --accent:       #0B62D6;  /* 5.63:1 */
    --accent-hover: #0A56BC;
    --accent-press: #094CA6;
    --accent-quiet: rgba(11,98,214,0.10);
    --on-accent:    #FFFFFF;  /* no tema claro o acento escurece → texto branco */

    /* O verde do tema claro é mais escuro que o "verde de sucesso" habitual por
       um motivo medido: a pílula pinta o texto com --success sobre o PRÓPRIO
       --success-quiet, e um rgba de 10% compositado sobre a superfície branca
       clareia o fundo. Com #0F7B45 o par renderizado dava 4.36:1 (axe-core no
       DOM, não no papel) — reprovando AA por pouco, invisível para qualquer
       teste que compare hex isolados. #0C6A3B leva o mesmo par a 5.59:1. */
    --success: #0C6A3B;  --success-quiet: rgba(12,106,59,0.10);
    --warning: #8A5B00;  --warning-quiet: rgba(138,91,0,0.10);
    --danger:  #C0322B;  --danger-quiet:  rgba(192,50,43,0.10);
    --info:    #175CD3;  --info-quiet:    rgba(23,92,211,0.10);

    --shadow-1: 0 1px 2px rgba(16,24,40,0.06), 0 4px 12px rgba(16,24,40,0.08);
    --shadow-2: 0 8px 32px rgba(16,24,40,0.16);
    --scrim:    rgba(16,24,40,0.35);
  }
}
/* O toggle explícito do menu de conta precisa vencer o prefers-color-scheme
   nos dois sentidos — por isso os dois seletores [data-theme]. */
:root[data-theme="light"] {
  --bg: #FBFBFD; --surface: #FFFFFF; --overlay: #F2F3F7; --sunken: #FFFFFF;
  --hairline: rgba(0,0,0,0.10); --hairline-strong: rgba(0,0,0,0.18);
  --text: #15181D; --text-2: #4A515C; --text-3: #646B76;
  --accent: #0B62D6; --accent-hover: #0A56BC; --accent-press: #094CA6;
  --accent-quiet: rgba(11,98,214,0.10); --on-accent: #FFFFFF;
  --success: #0C6A3B; --success-quiet: rgba(12,106,59,0.10);
  --warning: #8A5B00; --warning-quiet: rgba(138,91,0,0.10);
  --danger: #C0322B; --danger-quiet: rgba(192,50,43,0.10);
  --info: #175CD3; --info-quiet: rgba(23,92,211,0.10);
  --shadow-1: 0 1px 2px rgba(16,24,40,0.06), 0 4px 12px rgba(16,24,40,0.08);
  --shadow-2: 0 8px 32px rgba(16,24,40,0.16);
  --scrim: rgba(16,24,40,0.35);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Números tabulares onde a coluna precisa alinhar: KPI, contador, tabela. */
.tabular, .kpi-value, td, th, time { font-variant-numeric: tabular-nums; }

code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ---- T6 · FOCO ------------------------------------------------------------
   Um único anel para TODO elemento focável (antes: 0 ocorrências de
   :focus-visible em 68 KB de CSS — navegar por teclado era invisível).

   `:is()` e NÃO `:where()`, de propósito — a lição custou caro. `:where()` tem
   especificidade ZERO; o style.css que existia até a Fase 8 declarava
   `outline: none` em `.md3-input` e afins (0,1,0) e carregava DEPOIS. Empate de
   especificidade se resolve por ordem no arquivo, então aquele arquivo vencia e
   o anel de foco simplesmente NÃO aparecia em campo nenhum: o token existia e
   não valia nada. `:is()` assume a especificidade do argumento mais específico
   (`[tabindex]` = 0,1,0) e, com `:focus-visible`, chega a (0,2,0) — sobrevive a
   qualquer regra de classe que venha depois, sem precisar de `!important`. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Remove o anel só para clique de mouse, preservando-o para teclado. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Feedback de pressão: sem isto a interface parece morta (antes: 0 :active). */
:where(button, [role="button"], a.btn):active { transform: scale(0.985); }

/* ---- T5 · movimento reduzido --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* `hidden` é CORREÇÃO, não estilo — e por isso leva !important.
   O atributo `hidden` só vale pela folha do NAVEGADOR (`[hidden]{display:none}`),
   que perde de qualquer regra de autor: `.field{display:flex}` bastava para
   anular um `elemento.hidden = true` do JS. O efeito real, medido em 06/08/2026,
   era o campo "Para confirmar, digite ___" aparecer VAZIO no diálogo de reinício
   (11 telas, uma ocorrência cada) — pedindo à pessoa que digitasse uma palavra
   que ninguém tinha pedido. Sem `!important` a correção dependeria da ordem das
   regras, e a próxima classe com `display` reabriria o mesmo buraco em silêncio.
   `until-found` fica de fora: ali o navegador precisa poder revelar o conteúdo. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* ---- Utilitários de acessibilidade -------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: var(--sp-3);
  transform: translateY(-200%);
  z-index: 999; padding: var(--sp-2) var(--sp-4);
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  background: var(--overlay); color: var(--text);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Superfícies e translucidez (T4) ------------------------------------ */
.translucent {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
/* Sem suporte a backdrop-filter, cai em superfície opaca (nunca transparente
   sem blur, que deixaria texto sobre texto). */
@supports not (backdrop-filter: blur(1px)) {
  .translucent { background: var(--surface); }
}

/* Hairline como separador — substitui zebra por fundo e borda de caixa. */

/* ---- Classes de tipografia (as ÚNICAS permitidas) ---------------------- */
.type-large-title { font-size: var(--t-large-title); line-height: var(--t-large-title-lh); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.type-title-1     { font-size: var(--t-title-1);     line-height: var(--t-title-1-lh);     font-weight: var(--w-semibold); letter-spacing: var(--tracking-snug); }
.type-title-2     { font-size: var(--t-title-2);     line-height: var(--t-title-2-lh);     font-weight: var(--w-semibold); }
.type-headline    { font-size: var(--t-headline);    line-height: var(--t-headline-lh);    font-weight: var(--w-semibold); }
.type-body        { font-size: var(--t-body);        line-height: var(--t-body-lh); }
.type-callout     { font-size: var(--t-callout);     line-height: var(--t-callout-lh); }
.type-subhead     { font-size: var(--t-subhead);     line-height: var(--t-subhead-lh); }
.type-footnote    { font-size: var(--t-footnote);    line-height: var(--t-footnote-lh); }
.type-caption     { font-size: var(--t-caption);     line-height: var(--t-caption-lh); }

.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }