/* ============================================================================
   TOKENS — Direção 01 · Institucional denso
   Origem: design/01-institucional-denso.html (direção escolhida em 03/08/2026)
   Espelho em dado: ./tokens.json  ·  Como usar: ./README.md

   TESE: terminal de operação. Hierarquia por tipografia e peso, não por cor e
   caixa. Régua de 1px no lugar de sombra. Cromia contida — o cinza domina e a
   cor só aparece onde carrega significado. Numeral tabular em coluna.

   PALETA VALIDADA — não altere nenhum valor de cor sem revalidar:
     claro: #2a78d6, #eb6834 @ #fbfaf7 — ALL CHECKS PASS
     escuro: #3987e5, #d95926 @ #1a1a19 — ALL CHECKS PASS
   Contraste e daltonismo foram conferidos com estes valores. Trocar um dígito
   invalida a conferência inteira. Achou ruim? Anote no README, não corrija aqui.

   Este arquivo é a única fonte de valor do frontend. Literal de cor, de tamanho
   de fonte ou de espaço fora daqui é desvio da linguagem — é o que o gate pega.
   ============================================================================ */

:root {
  color-scheme: light;

  /* --- famílias ------------------------------------------------------------
     Três, e cada uma tem trabalho próprio. Ver README §Tipografia.            */
  --font-ui:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ==========================================================================
     COR — quatro papéis. Só SÉRIE, RAMPA e STATUS podem carregar dado.
     SUPERFÍCIE, TINTA e RÉGUA são cromia: nunca significam categoria.
     ========================================================================== */

  /* --- superfície (cromia) --- */
  --plane:        #efeee9;   /* plano da página, atrás de tudo */
  --surface:      #fbfaf7;   /* superfície de painel / gráfico / tabela */
  --surface-alt:  #f5f4ef;   /* zebra, cabeçalho de tabela, faixa selecionada */
  --surface-sunk: #e9e7e0;   /* trilho vazio: barra de janela, medidor sem base */

  /* --- tinta (cromia — hierarquia, jamais categoria) --- */
  --ink:          #141311;   /* número e texto que decide */
  --ink-2:        #55534d;   /* apoio, rodapé de indicador, prosa secundária */
  --ink-3:        #7c7a72;   /* eixo, rótulo terciário, tempo decorrido */

  /* --- régua (cromia — a estrutura da tela é 1px, não sombra) --- */
  --rule:         #d9d7cf;   /* régua estrutural: borda de painel, divisória */
  --rule-strong:  #b7b4a9;   /* régua forte: controle, topo de tabela, tracejado */
  --grid:         #e3e1d9;   /* grade recessiva do gráfico e linha de tabela */
  --axis:         #c6c3b9;   /* linha de base do eixo */

  /* --- série (DADO — categórico, identidade fixa) --- */
  --s-renovado:   #2a78d6;   /* renovado. Só isto. */
  --s-pendente:   #eb6834;   /* pendente. Só isto. */
  /* NÃO é série: ciclo sem janela aberta. Cinza de propósito — fura o piso de
     croma do validador, e é isso que o tira do jogo das séries. */
  --s-aberto:     #94918a;
  --s-ramp-100:   #cde2fb;   /* trilho do medidor = passo claro do mesmo azul */

  /* --- rampa ordinal (DADO — idade da pendência, ordem é o significado) ---
     claro: o1 claro → o5 escuro (recente → antiga).                          */
  --o1: #86b6ef;
  --o2: #5598e7;
  --o3: #2a78d6;
  --o4: #1c5cab;
  --o5: #104281;

  /* --- status (DADO, reservado — sempre com ícone + rótulo, nunca sozinho) ---
     --st-*    = marca/preenchimento/filete.  --st-*-tx = a MESMA situação como
     TEXTO (variante com contraste seguro). Não troque um pelo outro.         */
  --st-good:      #0ca30c;
  --st-good-tx:   #00660a;
  --st-warn:      #fab219;
  --st-serious:   #ec835a;
  --st-crit:      #d03b3b;
  --st-crit-tx:   #b3312f;

  /* --- sistema --- */
  --focus:        #2a78d6;   /* foco de teclado. Mesmo azul, outro significado. */

  /* ==========================================================================
     TIPOGRAFIA — escala levantada da direção 01. Doze degraus, todos em uso.
     Não há degrau livre: se um tamanho não está aqui, ele não existe.
     ========================================================================== */
  --fs-micro:       9.5px;   /* tick de eixo, rótulo de eixo, th de tabela */
  --fs-eyebrow:     10px;    /* sobrancelha, label caixa-alta, botão pequeno */
  --fs-meta:        10.5px;  /* subtítulo de painel, nota, legenda, rodapé */
  --fs-sm:          11px;    /* controle, chip, mono, barra horizontal */
  --fs-body:        11.5px;  /* corpo de tabela, aviso */
  --fs-base:        12px;    /* base do documento (body) */
  --fs-prose:       12.5px;  /* prosa serifada (parágrafo de abertura) */
  --fs-title:       13.5px;  /* h2 de painel (serifada) */
  --fs-wordmark:    15px;    /* marca (serifada) */
  --fs-kpi:         20px;    /* valor de indicador */
  --fs-hero-sm:     36px;    /* valor herói ≤520px */
  --fs-hero:        44px;    /* valor herói */

  --fw-regular:     400;
  --fw-semibold:    600;     /* o peso de trabalho: título, número, label */
  --fw-bold:        700;     /* etiqueta caixa-alta e destaque de aviso */

  --lh-hero:        1;
  --lh-kpi:         1.15;
  --lh-base:        1.35;    /* corpo */
  --lh-control:     1.5;     /* botão, select, chip — não deixa o alvo colapsar */

  --tr-hero:        -.03em;  /* 44px pede aperto */
  --tr-num:         -.015em; /* 20px */
  --tr-mono:        -.01em;
  --tr-serif:       .01em;
  --tr-caps-xs:     .06em;   /* cabeça de tooltip */
  --tr-caps-sm:     .04em;   /* botão pequeno */
  --tr-caps:        .07em;   /* PADRÃO das caixas-altas */
  --tr-caps-wide:   .09em;   /* sobrancelha */
  --tr-caps-wider:  .1em;    /* etiqueta de aviso */
  --tr-caps-widest: .13em;   /* selo da direção */

  /* ==========================================================================
     ESPAÇO — régua de 1px consolidada da direção 01. Passo fino de propósito:
     densidade é o argumento da tela. Nada de 24/32/48 aqui.
     ========================================================================== */
  --space-0:  0;
  --space-1:  1px;
  --space-2:  2px;   /* respiro interno de controle */
  --space-3:  3px;
  --space-4:  4px;
  --space-5:  5px;
  --space-6:  6px;
  --space-7:  7px;
  --space-8:  8px;
  --space-9:  9px;
  --space-10: 10px;  /* PADRÃO: goteira do grid, margem entre blocos, padding de painel */
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;  /* recuo horizontal do cabeçalho */
  --space-20: 20px;  /* folga final do rodapé */

  /* ==========================================================================
     RAIO — cinco valores, todos pequenos. Canto arredondado grande é "cara de
     IA" e está proibido nesta direção.
     ========================================================================== */
  --radius-0: 0;     /* tabela, painel, filete — o padrão é canto vivo */
  --radius-1: 1px;   /* amostra de legenda, ponto de chip, trilho */
  --radius-2: 2px;   /* controle: botão, select, aba de ciclo, topo de medidor */
  --radius-3: 3px;   /* topo de barra do gráfico diário */
  --radius-4: 4px;   /* topo de barra do gráfico mensal, ponta de barra horizontal */

  /* ==========================================================================
     BORDA E TRAÇO — a profundidade desta tela é 1px. Não há escala de elevação.
     ========================================================================== */
  --bw-hair:   1px;  /* TUDO. Painel, tabela, controle, divisória. */
  --bw-rail:   3px;  /* filete lateral do aviso — o único acento largo de cor */
  --bw-focus:  2px;  /* contorno de foco */
  --bw-sel:    2px;  /* marca inset da linha selecionada */
  --stroke-hair: 1;    /* grade, base, linha de referência (SVG) */
  --stroke-icon: 1.6;  /* ícone de traço (SVG) */
  --outline-offset: 1px;

  /* ==========================================================================
     SOMBRA — só duas, e nenhuma é elevação. Sombra pesada em card é "cara de
     IA". A hierarquia vem da régua e do peso tipográfico.
     ========================================================================== */
  --shadow-tip:     0 1px 0 rgba(0, 0, 0, .06);  /* 1px duro sob o tooltip, sem blur */
  --shadow-row-sel: inset 2px 0 0 var(--ink);    /* marca inset, não elevação */

  /* ==========================================================================
     MÉTRICA DE COMPONENTE — geometria que se repete e que o F3 precisa acertar
     igual, senão o medidor de uma tela não bate com o da outra.
     ========================================================================== */
  --layout-max:       1720px; /* largura útil do main e do rodapé */
  --layout-ratio-main: 1.62;  /* coluna principal do grid ≥1180px */
  --layout-ratio-side: 1;     /* coluna lateral */
  --bp-split:         1180px; /* onde a tela vira duas colunas */

  --meter-w:      64px;  /* medidor de taxa na tabela */
  --meter-h:      7px;
  --wbar-h:       5px;   /* barra de andamento da janela */
  --wbar-w:       120px; /* no indicador */
  --wbar-w-tbl:   58px;  /* na tabela */
  --swatch:       9px;   /* amostra de legenda */
  --swatch-line:  12px;  /* amostra de legenda em forma de linha */
  --chip-dot:     8px;   /* ponto de chip de situação */
  --cyc-dot:      7px;   /* ponto na aba de ciclo */
  --hb-fill-h:    10px;  /* altura da barra horizontal */
  --hb-track-h:   20px;  /* altura da faixa que a contém */
  --select-chevron-inset: 22px; /* recuo à direita do select: espaço do chevron.
                                   Medida ótica, não é degrau da régua. */

  /* ==========================================================================
     TEXTURA — canal redundante de acessibilidade e marcação de "provisório".
     Ângulo é semântico: 45° = renovado/parcial · 135° = pendente. O passo da
     hachura é afinado ao tamanho do elemento e por isso não vira token.
     ========================================================================== */
  --tex-ang-a: 45deg;
  --tex-ang-b: 135deg;
}

/* ----------------------------------------------------------------------------
   MODO ESCURO
   Dois blocos com a MESMA lista, de propósito:
   1) a media query, com a guarda :not([data-theme="light"]) — segue o sistema;
   2) o atributo [data-theme="dark"] — o botão sol/lua, que vence os dois.
   Especificidade: :where() não pontua, então :root[data-theme="dark"] (0,1,1)
   manda em :root:where(…) (0,0,1) e em :root (0,0,1). O botão continua no
   comando nos DOIS sentidos: forçar escuro e forçar claro.
   Se você editar uma cor aqui, edite nos dois blocos — o gate compara.
   ---------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --plane:        #0d0d0c;
    --surface:      #1a1a19;
    --surface-alt:  #212120;
    --surface-sunk: #262624;

    --ink:          #f2f1ec;
    --ink-2:        #b5b2a8;
    --ink-3:        #8b887f;

    --rule:         #333330;
    --rule-strong:  #4a4844;
    --grid:         #2c2c2a;
    --axis:         #3d3d3a;

    --s-renovado:   #3987e5;
    --s-pendente:   #d95926;
    --s-aberto:     #6f6c65;
    --s-ramp-100:   #184f95;

    /* rampa invertida em luminância: a pendência ANTIGA (o5) continua sendo a
       mais saliente contra o fundo. A ordem semântica não muda. */
    --o1: #184f95;
    --o2: #256abf;
    --o3: #3987e5;
    --o4: #6da7ec;
    --o5: #9ec5f4;

    --st-good:      #0ca30c;
    --st-good-tx:   #3cb54a;
    --st-warn:      #fab219;
    --st-serious:   #ec835a;
    --st-crit:      #d03b3b;
    --st-crit-tx:   #f07a72;

    --focus:        #3987e5;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --plane:        #0d0d0c;
  --surface:      #1a1a19;
  --surface-alt:  #212120;
  --surface-sunk: #262624;

  --ink:          #f2f1ec;
  --ink-2:        #b5b2a8;
  --ink-3:        #8b887f;

  --rule:         #333330;
  --rule-strong:  #4a4844;
  --grid:         #2c2c2a;
  --axis:         #3d3d3a;

  --s-renovado:   #3987e5;
  --s-pendente:   #d95926;
  --s-aberto:     #6f6c65;
  --s-ramp-100:   #184f95;

  --o1: #184f95;
  --o2: #256abf;
  --o3: #3987e5;
  --o4: #6da7ec;
  --o5: #9ec5f4;

  --st-good:      #0ca30c;
  --st-good-tx:   #3cb54a;
  --st-warn:      #fab219;
  --st-serious:   #ec835a;
  --st-crit:      #d03b3b;
  --st-crit-tx:   #f07a72;

  --focus:        #3987e5;
}