/* tokens.css — a identidade do by-fel.com aplicada ao Observatório.
   Fonte da verdade: ~/Sites/byfel-site/src/styles/tokens.css (o site no ar).
   O que muda aqui em relação ao site: o site é uma peça de portfólio, monocromática
   e sem estado; este é um painel de dados. Então a camada 1 é copiada literalmente e
   a camada 2 traduz esse vocabulário para significado de painel.

   Decisão de 2026-08-30 (Felipe): monocromia ESTRITA. Não existe cor de acento —
   hierarquia é feita por luz (branco pleno → cinza → cinza fraco) e por peso.
   A única cor da tela é a dos concorrentes, que é DADO, não decoração. */

/* ---------------------------------------------------------------------------
   Fontes — as mesmas do site, servidas do próprio painel
   --------------------------------------------------------------------------- */
@font-face{font-family:'Maxeville Regular';src:url('/fonts/maxeville-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Maxeville Construct';src:url('/fonts/maxeville-construct.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
/* corte de TEXTO: aberturas maiores, desenhado para tamanho pequeno e leitura longa —
   é o corte certo para a densidade deste painel */
@font-face{font-family:'Maxeville Tekst';src:url('/fonts/maxeville-tekst.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/fonts/general-sans-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------------------
   CAMADA 1 — primitivas do site, verbatim
   --------------------------------------------------------------------------- */
:root{
  --c-black:#000;
  --c-brown:#2b1b0d;
  --c-near-black:#121212;
  --c-grey-1a:#1a1a1a;
  --c-grey-23:#232323;
  --c-grey-82:#828282;
  --c-grey-dbd:#dbdbdb;
  --c-off-white:#eee;
  --c-white-f5:#f5f5f5;
  --c-white:#fff;
  --c-glass:#f5f5f533;

  --font-display:'Maxeville Construct','Maxeville Regular',sans-serif;
  --font-body:'Maxeville Regular','General Sans',sans-serif;
  --font-alt:'General Sans',sans-serif;
  --font-text:'Maxeville Tekst','Maxeville Regular','General Sans',sans-serif;

  --m-dur-1:200ms;   /* micro: hover, press */
  --m-dur-2:420ms;   /* estrutural: painel, nav */
  --m-dur-3:800ms;   /* entrada */
  --m-ease:cubic-bezier(.44,0,.56,1);
  --m-ease-exit:cubic-bezier(.32,-.01,.15,.98);
  --m-ease-spring:cubic-bezier(.34,1.26,.64,1);
}

/* ---------------------------------------------------------------------------
   CAMADA 2 — o vocabulário do painel, escrito com as primitivas acima
   --------------------------------------------------------------------------- */
:root{
  /* superfícies: o site empilha preto → #121212 → #1a1a1a → #232323 */
  --bg:var(--c-black);
  --surface:var(--c-near-black);
  --surface-2:var(--c-grey-1a);
  --raised:var(--c-grey-23);

  /* ESCADA DE SUPERFÍCIE — nomeada por FUNÇÃO, não por valor (Felipe aprovou a face
     escura em 11/09/2026 olhando a bancada). Profundidade vem de TOM, não de linha:
     o card é superfície, não contorno. O stroke sobrevive só no vidro.
     Contraste medido entre degraus vizinhos, que é o que o olho de fato lê:
       baixo → base  1,12   ·  base → alto  1,08   ·  alto → topo  1,11
     Abaixo de ~1,06 dois tons colam — por isso a escada anda de DOIS degraus quando
     precisa de separação real, e de um quando é só profundidade. */
  --sf-baixo:var(--c-black);      /* rebaixado: vazio, rodapé, nota, faixa par */
  --sf-base:var(--c-near-black);  /* o card */
  --sf-alto:var(--c-grey-1a);     /* hover, faixa ímpar */
  --sf-topo:var(--c-grey-23);     /* selecionado, cabeçalho de bloco */
  --stroke-vidro:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 46%,rgba(255,255,255,.09));

  /* tinta: três degraus de luz, que é o que substitui a cor */
  --ink:var(--c-white);
  --muted:var(--c-grey-dbd);
  --faint:var(--c-grey-82);

  /* linhas: o site usa branco translúcido, não cinza sólido */
  --line:rgba(255,255,255,.20);
  --line-soft:rgba(255,255,255,.10);

  /* "acento" agora é ausência de cor: branco pleno + contorno.
     --accent existe para não quebrar os componentes, mas aponta para o branco. */
  --accent:var(--c-white);
  --accent-soft:rgba(255,255,255,.10);
  --accent-ink:var(--c-black);

  /* sinais funcionais (frescor de captura, WCAG). Dessaturados para não competir
     com a cor dos concorrentes — são pontinhos de 7px, não elementos de marca. */
  --ok:#7d8f7d;
  --warn:#a2957a;
  --bad:#a37f7f;
  --idle:var(--c-grey-82);

  /* o site é reto. Este é o traço de identidade mais forte dele. */
  --radius-card:0px;
  --radius-chip:0px;

  --shadow:none;
  --glass-blur:blur(14px);

  --serif:var(--font-display);
  --sans:var(--font-body);
  --mono:ui-monospace,'SF Mono',Menlo,monospace;

  --rail:230px; --drawer:440px;

  /* estratos por INTENSIDADE, não por cor */
  /* cor por estrato: a convenção dos decks do Felipe (vermelho / verde / roxo), em versão
     contida para o fundo escuro — acompanha players, códigos e pílulas como acento fino */
  /* um só conjunto para as duas faces: medido, passa ≥3,6:1 sobre #fff e ≥3,9:1 sobre #000 */
  /* DOMINANTE SAIU DO VERDE em 11/09/2026: o #1f9a4d ficava a 2° de matiz do verde de
     STATUS (confirmado), e o mesmo quadrado de 8px passaria a significar duas coisas num
     painel que mede cor de marca. O teal #0e8ca8 está a 51° do verde e a ≥70° de todos os
     outros vizinhos — é a maior separação mínima sem cair no azul, que esta categoria
     inteira usa como assunto. Medido: 3,94:1 sobre #fff · 5,34:1 sobre #000. */
  --strata-residual:#d2382f;
  --strata-dominante:#0e8ca8;
  --strata-emergente:#7e3ff2;
  --strata-indefinido:rgba(255,255,255,.35);

  /* STATUS DE GATE (Felipe, 11/09/2026): amarelo aguardando confirmação, verde confirmado.
     Saturados de propósito — "aguardando" precisa gritar. São grafismo não-textual, então
     a régua é WCAG 1.4.11 (≥3:1). O amarelo não alcança 3:1 sobre branco em nenhuma versão
     que ainda pareça amarela, por isso a face clara tem o seu próprio par. */
  --st-espera:#d8b23a;   /* 10,35:1 sobre #000 */
  --st-ok:#34a853;       /*  6,87:1 sobre #000 · 3,06:1 sobre #fff */

  --signal-up:var(--ok); --signal-down:var(--bad); --signal-flat:var(--faint);
  --stale-ok:var(--ok); --stale-warn:var(--warn); --stale-bad:var(--bad);
  --chart-axis:var(--line); --chart-grid:var(--line-soft); --chart-label:var(--faint);

  /* papéis de tipo — o Tekst assume o corpo denso do painel */
  /* REGRA DA CASA (Felipe, 03/09/2026): Maxeville TEKST é a tipografia principal de
     TUDO abaixo de 18px — corpo, nome, valor, rótulo, legenda, tabela, tooltip.
     Construct e Regular só existem a partir de 18px (display e título).
     Duas exceções declaradas: número em General Sans (tabular-nums, que o Tekst não tem)
     e <code>, em mono. */
  --font-ui:var(--font-text);
  --font-data:var(--font-text);
  --font-num:var(--font-alt);

  /* escala em degraus (Fase 0): piso 11px em tela; slide = tela × 4/3 */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-18:18px; --fs-24:24px;
  --fs-32:32px; --fs-48:48px; --fs-66:66.6px; --fs-79:79px; --fs-158:158px;
  --fs-micro:11px; --fs-sm:11px; --fs-base:12px; --fs-md:14px;
  --lh-body:1.4; --lh-tight:1.2; --lh-1:1;
  /* tinta fraca sobre superfície elevada (#1a1a1a/#232323): #828282 falha em contraste */
  --faint-raised:rgba(219,219,219,.62);

  --space:10px;          /* --gap do site — o Figma cresce em degraus disto */
  --space-6:6px;
  --space-8:8px;
  --space-10:10px;
  --space-12:12px;
  --space-16:16px;
  --space-18:18px;
  --compare-col:240px;
  --compare-verbal:300px;
}

/* ---------------------------------------------------------------------------
   Tema claro — o site não tem um. Este é derivado: inverte os degraus mantendo
   a mesma lógica (off-white do site como fundo, near-black como tinta).
   Existe para sala clara e projeção, não como identidade alternativa.
   --------------------------------------------------------------------------- */
:root[data-theme="light"]{
  /* ESCADA PRÓPRIA DA FACE CLARA. Perto do branco os valores se comprimem: #f5f5f5 e
     #eee estão a 7 pontos e parecem a mesma coisa, enquanto #000 e #121212 estão a 18
     e você enxerga. Reusar a lógica do escuro dava 1,06 — o limiar onde o card SOME.
     Aqui o fundo escurece e o card sobe, abrindo o vão:
       baixo → base  1,28   ·  base → alto  1,07   ·  fundo → base  1,14
     Se um dia o Felipe preferir fio na face clara, é só devolver --bg para #eee e
     reativar as bordas: a escada some, o resto do sistema não muda. */
  --bg:#e8e8e8;
  --surface:#f7f7f7;
  --surface-2:#ffffff;
  --raised:var(--c-white);
  --sf-baixo:#dcdcdc;
  --sf-base:#f7f7f7;
  --sf-alto:#ffffff;
  --sf-topo:#ffffff;
  --stroke-vidro:linear-gradient(160deg,rgba(0,0,0,.14),rgba(0,0,0,.02) 46%,rgba(0,0,0,.07));
  --ink:var(--c-black);
  --muted:#3a3a3a;
  --faint:#6b6b6b;
  --line:rgba(0,0,0,.22);
  --line-soft:rgba(0,0,0,.10);
  --accent:var(--c-black);
  --accent-soft:rgba(0,0,0,.07);
  --accent-ink:var(--c-white);
  --ok:#4a5c4a; --warn:#6e6045; --bad:#7a5252;
  --st-espera:#ad8712;   /* 3,05:1 sobre #fff — o saturado da face escura reprova em 2,03 */
  --st-ok:#2b9348;       /* 3,91:1 sobre #fff */
  --idle:#9a9a9a;
  --strata-indefinido:rgba(0,0,0,.38);
  --faint-raised:#6b6b6b;
}

/* ============================================================================
   LEI DO VIDRO — medida em 11/09/2026, e corrige a regra antiga do index.html
   ============================================================================
   `backdrop-filter` cria containing block para descendentes `position:fixed` — mas SÓ
   para DESCENDENTES. Como #tip, #toast, #drawer e #scrim já são filhos DIRETOS do body,
   a proibição real tem exatamente DOIS nós.

   1. `html` e `body` NUNCA recebem: backdrop-filter · filter · transform · perspective ·
      rotate · scale · translate · contain:layout|paint|strict|content ·
      content-visibility:auto · will-change com qualquer um desses.
   2. A camada flutuante continua filha DIRETA do body.
   3. Qualquer outro elemento é livre. O painel já usa vidro em 6 lugares (topbar,
      pílula, pagehead, ⌘K) há meses, sem quebrar nada.

   E uma regra de animação que não é óbvia: NÃO animar `opacity` em nada que carregue
   vidro. `opacity < 1` torna o elemento um *backdrop root*, e durante toda a transição
   o vidro fica CEGO — o painel entra opaco e "liga" no último frame. Anime `transform`
   e a tinta do fundo.

   Auditar antes de qualquer refactor:
     grep -nE '(^|[,>+~ ])(html|body)\b[^{]*\{[^}]*(backdrop-filter|[^-]filter:|transform:|perspective:|contain:|content-visibility|will-change)' dashboard/app/*.css

   Fonte: drafts.csswg.org/filter-effects-2 · MDN Containing block.
   ============================================================================ */