/* =====================================================================
   Tokens — a única fonte de cor, espaço e tipo do portal.
   ---------------------------------------------------------------------
   Regra do Ápice: ZERO cor hardcoded fora deste arquivo. Se um valor de cor
   aparecer numa view ou em portal.css, ele nasceu no lugar errado.

   ⚠️ POR QUE OS NOMES ESTÃO EM INGLÊS, contra o resto do projeto.
   03/09/2026: as telas foram refeitas com o vocabulário de classes do Ápice
   (`browse-table`, `std-toolbar`, `kpi-hero`, `dialog-md`...), e os gabaritos
   de lá referenciam `var(--text-secondary)`, `var(--border)`, `var(--blue)`,
   `var(--radius)`. Traduzir os tokens quebraria a correspondência: a mesma
   marcação passaria a apontar para tokens que não existem, e a falha seria
   silenciosa — cor herdada, não erro. Nomes de token são o contrato; o resto
   do código segue em português.

   Ronaldo, 03/09/2026: *"Ué voce nao seguiu nada de padrões do portal??"* —
   estava certo. Primeira versão inventou vocabulário próprio.

   ⚠️ OS VALORES SÃO DA RCA, não do Ápice. Nada foi copiado do Portal do Grupo
   Soifer: a paleta é derivada do azul da marca da RCA. Decisão dele em
   03/09/2026: *"Reproduzir a estrutura sem copiar arquivo"*.

   Tipografia: Playfair Display em título, Inter no corpo, como o checklist
   pede — servidas de /public/fonts, ver /css/fontes.css. Um <link> para o
   Google Fonts seria bloqueado pelo CSP `font-src 'self'` SEM ERRO VISÍVEL.
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* ── Superfícies e texto ──────────────────────────────────────────
     Neutros com leve viés frio, para conversarem com o azul da marca sem
     virarem cinza de escritório. */
  --bg:               #f7f8fa;
  --surface:          #ffffff;
  --surface-2:        #eef1f5;
  --surface-3:        #e4e9f0;
  --border:           #dde2e9;
  --border-strong:    #c3ccd8;

  --text:             #1b2027;
  --text-secondary:   #5c6673;
  --text-muted:       #8a94a1;
  --text-inverse:     #ffffff;   /* sobre --blue e sobre o painel grafite */

  /* ── Marca ────────────────────────────────────────────────────────
     `--blue` é o nome que os gabaritos usam para o acento; aqui ele é o azul
     da RCA. */
  --blue:             #1f5f8b;
  --blue-strong:      #16455f;
  --blue-soft:        #e3edf4;

  /* Painel grafite do KPI hero — o hero é escuro nos dois temas, de
     propósito: é o que cria a hierarquia do board assimétrico. */
  --graphite:         #1e242c;
  --graphite-2:       #2a323c;

  /* ── Semânticas ───────────────────────────────────────────────────
     Separadas da marca de propósito: cor de estado não é sotaque visual, é
     informação. */
  --green:            #1f7a4d;
  --green-bg:         #e4f3ec;
  --amber:            #9a6700;
  --amber-bg:         #fdf3d9;
  --red:              #a32c2c;
  --red-bg:           #fbe6e6;

  /* ── Visualização de dados ────────────────────────────────────────
     Séries distinguíveis entre si; o "chrome" do gráfico (grade, eixo,
     rótulo) usa os neutros, nunca as cores de série. */
  --viz-1:            #1f5f8b;
  --viz-2:            #2f9e8f;
  --viz-3:            #b4763a;
  --viz-4:            #6b5b95;
  --viz-grid:         #e6eaf0;
  --viz-axis:         #c3ccd8;
  --viz-label:        #8a94a1;

  /* ── Forma ────────────────────────────────────────────────────────── */
  /* Véu de modal e de carregamento. Fica AQUI e não no componente porque a
     regra é zero cor fora deste arquivo — `rgba()` no arquivo de tokens é
     exatamente onde ele pode viver. */
  --scrim:            rgba(10, 14, 20, .50);
  --scrim-soft:       rgba(10, 14, 20, .28);

  /* ⚠️ Papel do QR: branco FIXO nos dois temas, e é de propósito. No tema
     escuro, módulos escuros sobre superfície escura simplesmente não são lidos
     pela câmera — o QR pararia de funcionar sem nenhum sinal de erro. */
  --qr-paper:         #ffffff;

  --radius:           6px;
  --radius-lg:        14px;
  --shadow:           0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --shadow-lg:        0 8px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .08);

  /* ── Espaço ───────────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ── Tipo ─────────────────────────────────────────────────────────
     A pilha de fallback é completa de propósito: se o woff2 não chegar, o
     texto ainda tem de sair legível — não sem fonte. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;

  /* A interface do Ápice é densa: 11–13px na grade e na toolbar, e o corpo de
     leitura maior. Um tamanho só achataria a hierarquia. */
  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   18px;
  --fs-xl:   24px;

  --topbar-h:  46px;
  --sidebar-w: 232px;
}

/* ⚠️ Redefinir SOMENTE os tokens, nunca estilizar componente aqui dentro.
   Um componente cujo estilo só existe neste bloco não se aplica no tema claro
   e a falha passa despercebida. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #12151a;
    --surface:        #191d24;
    --surface-2:      #222831;
    --surface-3:      #2b323c;
    --border:         #2e353f;
    --border-strong:  #414a56;

    --text:           #e6eaf0;
    --text-secondary: #a3adba;
    --text-muted:     #78828f;

    --blue:           #5ba3d0;
    --blue-strong:    #8cc3e6;
    --blue-soft:      #1a2b38;

    --graphite:       #10141a;
    --graphite-2:     #1b212a;

    --green:          #5cc08b;
    --green-bg:       #14291f;
    --amber:          #e0b155;
    --amber-bg:       #2b2415;
    --red:            #e08585;
    --red-bg:         #2d1a1a;

    --viz-1:          #5ba3d0;
    --viz-2:          #4fc3b1;
    --viz-3:          #d09a5e;
    --viz-4:          #9b8bc4;
    --viz-grid:       #262d36;
    --viz-axis:       #3b444f;
    --viz-label:      #78828f;

    --scrim:          rgba(0, 0, 0, .66);
    --scrim-soft:     rgba(0, 0, 0, .42);

    --shadow:         0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg:      0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  }
}

/* Escolha explícita do usuário vence o sistema, nos dois sentidos. */
:root[data-theme="dark"] {
  --bg:             #12151a;
  --surface:        #191d24;
  --surface-2:      #222831;
  --surface-3:      #2b323c;
  --border:         #2e353f;
  --border-strong:  #414a56;

  --text:           #e6eaf0;
  --text-secondary: #a3adba;
  --text-muted:     #78828f;

  --blue:           #5ba3d0;
  --blue-strong:    #8cc3e6;
  --blue-soft:      #1a2b38;

  --graphite:       #10141a;
  --graphite-2:     #1b212a;

  --green:          #5cc08b;
  --green-bg:       #14291f;
  --amber:          #e0b155;
  --amber-bg:       #2b2415;
  --red:            #e08585;
  --red-bg:         #2d1a1a;

  --viz-1:          #5ba3d0;
  --viz-2:          #4fc3b1;
  --viz-3:          #d09a5e;
  --viz-4:          #9b8bc4;
  --viz-grid:       #262d36;
  --viz-axis:       #3b444f;
  --viz-label:      #78828f;

  --scrim:          rgba(0, 0, 0, .66);
  --scrim-soft:     rgba(0, 0, 0, .42);

  --shadow:         0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
}