/*
  Skirret — Tokens de Marca
  =========================
  O bloco `:root` do sistema de design: cor, tipografia, raio, altura de
  referência e a escala de espaçamento. **Consumido por TODA folha de
  estilo do Skirret** — a do produto (`pedra-bruta.css`) e a do site
  público (`landing.css`).

  ESTA É A R11 do `docs/59`: token é marca; componente é contexto.
  Trocar o dourado aqui muda o produto E o site — correto, é a mesma
  marca. Apertar o espaçamento de um datagrid não encosta na home —
  também correto, é outro contexto.

  DUAS EXIGÊNCIAS QUE A SEPARAÇÃO CRIA, e as duas falham em SILÊNCIO:

  1. **Todo token precisa de valor de fábrica que funcione SOZINHO**,
     sem a cadeia de herança de quatro níveis do `docs/37`. O visitante
     do site público não tem Loja, não tem usuário, não tem preferência
     nenhuma — e `calc()` sobre variável vazia **não dá erro, dá layout
     desmontado**. É o que
     `apps/core/tests/test_tokens_landing.py` vigia.
  2. **O site institucional tem TEMA FIXO**, o da marca. Não oferece
     troca de tema: escolher entre Pavimento Mosaico e Abóbada Celeste
     é decisão de quem já pertence.

  ORDEM DE CARGA IMPORTA: este arquivo entra ANTES de `pedra-bruta.css`
  e de `landing.css` (ver `base.html`), e o CSS publicado de um Tema
  (`docs/37` §5) entra DEPOIS de todos, porque só sobrescreve tokens.

  Ver `docs/Brand_Guidelines_Skirret.md` para o simbolismo de cada cor.
*/

:root {
  --sk-bg: #0A0A0A;          /* Preto — o vazio primordial */
  --sk-fg: #E9E7E1;          /* Texto principal sobre o fundo escuro */
  --sk-muted: #B7B5AE;       /* Texto secundário */
  --sk-gold: #C9A84C;        /* Dourado — a Luz, o ponto luminoso (destaque/CTA) */
  --sk-gray: #888884;        /* Cinza — a pedra bruta (neutro, bordas, textos terciários) */
  --sk-orange: #E8651A;      /* Laranja — o fogo/ação (botões de ação principal) */

  --sk-surface: rgba(255, 255, 255, 0.03);
  --sk-border: rgba(255, 255, 255, 0.08);
  --sk-border-strong: rgba(255, 255, 255, 0.15);
  /* Superfície opaca — popups nativos do navegador (lista de <option> de um
     <select> aberto) não compõem com o fundo da página como um elemento
     normal; precisam de uma cor sólida própria (docs/14, princípio 10). */
  --sk-surface-solid: #171717;

  --sk-success: #639922;
  --sk-warning: #d9a441;
  --sk-danger: #c0392b;

  /* Cores de TEXTO sobre superfícies semânticas (docs/37 catálogo, Prompt
     #106). As três acima são a cor da SINALIZAÇÃO (fundo/borda de mensagem,
     botão destrutivo); estas são o texto que se lê por cima dela, que
     precisa se afastar da base do Tema — num Tema escuro é a versão
     clareada da mesma cor, num Tema claro a escurecida. Ficaram presas no
     CSS até aqui (valores literais, pensados só para fundo escuro), o que
     impedia qualquer Tema de base clara de atingir contraste AA nas
     mensagens; entram no catálogo com o valor que já tinham, então "Pedra
     Bruta" permanece idêntico. Mesma justificativa da entrada de
     --sk-datagrid-cabecalho-bg (docs/37, decisão de escopo: um token novo
     entra quando surge necessidade real de variação entre Temas). */
  --sk-success-fg: #a3d977;
  --sk-warning-fg: #C9A84C;
  --sk-danger-fg: #e88f85;
  /* Texto sobre o botão de ação principal (fundo --sk-orange). Nunca
     --sk-fg nem --sk-bg: o par texto/fundo do botão é independente da base
     do Tema (um Tema pode querer botão escuro com texto claro sobre fundo
     claro, ou o inverso). */
  --sk-btn-primary-fg: #1a0d05;

  --sk-font-display: Georgia, "Times New Roman", serif;
  --sk-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --sk-radius: 8px;
  --sk-radius-sm: 6px;

  /* Altura de referência de um `.sk-btn` de texto (docs/14, princípio 23) —
     medida na altura real computada (`getBoundingClientRect`) do botão
     "Continuar" renderizado, não calculada a partir de padding/font-size
     no papel (line-height "normal" varia por fonte/navegador). Qualquer
     botão que precise compartilhar altura com um `.sk-btn` de texto no
     mesmo grupo de ações (ex: botões só de ícone) usa esta variável, nunca
     um valor solto. */
  --sk-btn-height: 37px;


  /* Componente Datagrid Compartilhado (docs/38 §2.7, docs/37 catálogo) —
     fundo do cabeçalho de coluna. O zebrado de linhas alternadas
     deliberadamente NÃO tem token próprio — deriva de --sk-fg/--sk-bg via
     color-mix() logo abaixo, em .sk-datagrid tbody tr:nth-child(even),
     para se adaptar sozinho a qualquer Tema futuro. */
  /* OPACO (Prompt #148): o valor anterior era `rgba(255,255,255,0.04)`,
     e alfa aqui deixava as linhas passarem por trás do cabeçalho fixo.
     `#1B1B1B` é exatamente o que aquele rgba produzia composto sobre o
     card — mesma aparência em repouso, sem o vazamento. */
  --sk-datagrid-cabecalho-bg: #1B1B1B;
  /* Cor do rótulo de coluna sob o ponteiro (Prompt #153). Token próprio, e
     não `--sk-gold` direto, por um motivo medido: no Abóbada Celeste o
     gold (#77ACDC) sobre o fundo do cabeçalho (#27497C) dá 3,74:1 —
     abaixo do AA de 4,5:1. Escurecer o cabeçalho até o gold passar
     colapsaria o contraste dele contra a superfície do card de 1,27:1 para
     1,01:1, ou seja, apagaria a faixa do cabeçalho; e clarear o `--sk-gold`
     mexeria em botões, foco e destaques do tema inteiro para consertar um
     hover. O token isola a correção no ponto exato do problema: nos outros
     três Temas o valor É o gold deles, e nada muda. */
  --sk-datagrid-cabecalho-hover-fg: #C9A84C;

  /* Componente de Gráficos (docs/54, docs/37 — Prompt #140): as SEIS
     cores de série, na ordem em que os datasets as consomem. Seis porque
     é o teto de séries que uma composição empilhada aguenta legível — e o
     teto do que o Pavimento Mosaico distingue em cinza puro; do sétimo em
     diante, o preparo de dados agrupa em "Outros", pintado com --sk-gray
     (por isso não existe token "serie-outros"). A ordem ALTERNA famílias
     de matiz de propósito: séries adjacentes de matiz próximo somem uma
     na outra para daltônicos numa barra empilhada. Todas medidas >= 3:1
     (WCAG 1.4.11) contra o fundo E contra a superfície de card — a
     tabela completa está no docs/37. Sempre #RRGGBB, nunca rgba(): o
     preenchimento de área deriva "#RRGGBBAA" por concatenação. */
  --sk-grafico-serie-1: #C9A84C;
  --sk-grafico-serie-2: #6FA8C9;
  --sk-grafico-serie-3: #E8873C;
  --sk-grafico-serie-4: #9CC069;
  --sk-grafico-serie-5: #B58CC9;
  --sk-grafico-serie-6: #D9CBB1;

  /* Escala de fonte por usuário (docs/14, princípio 15) — multiplicador
     (percentual unitless), nunca valores absolutos de fonte nos
     componentes: todo `font-size` deste arquivo é `rem` (relativo à raiz),
     então escalar só esta variável escala tudo junto, preservando a
     hierarquia entre título/corpo/legenda. Telas pré-login nunca sobrescrevem
     esta variável (só o <html> de telas autenticadas ganha um `style` com o
     valor salvo do Usuario — ver base.html), então ficam sempre em 100%. */
  --sk-escala-fonte: 100;

  /* BASE tipográfica do Tema (Prompt #177) — o tamanho de que todo `rem`
     deste arquivo deriva. É o token que a MASTER-08 expõe ao Master da
     Plataforma, ao lado de cor e família.

     UM EIXO, DOIS DONOS, e a ordem importa: o **Tema** define a BASE
     (este token); o **usuário** aplica o zoom pessoal
     (`--sk-escala-fonte`), que continua sendo o ÚNICO multiplicador.
     Os dois não se multiplicam entre si — ver `docs/37` §8.1. */
  --sk-base-fonte: 20px;

  /* ESCALA DE ESPAÇAMENTO (docs/59 §3-§4, Prompt #200) — os únicos
     valores que padding/margin/gap podem usar fora deste bloco; valor
     literal é violação (docs/59 R1), guardada por
     apps/core/tests/test_sistema_de_design.py. Fios de borda de 1-3px
     são isentos por natureza (R9), e exceção legítima se registra com
     o marcador `sk-excecao: motivo` (R5).

     DENSIDADE EM UM NÍVEL SÓ, desde 04/09/2026 (docs/74 R3/R4, Prompt
     #287). Eram dois multiplicadores: o do Tema e o do obreiro. O do
     obreiro MORREU, e a razão está no docs/74 R3, medida antes de
     decidir: era principalmente no datagrid que a necessidade de
     densidade aparecia, e a grade saiu desta régua (ganhou a sua, §2.3
     da spec). Um controle que só age onde não incomoda é um controle
     que o obreiro gira sem entender o que mudou. O que substitui, para
     quem precisa de conforto de leitura, é --sk-escala-fonte: escala de
     fonte é para ENXERGAR, densidade é para CABER.

     --sk-densidade-tema passou de 0,75 para 1,0 (R4): o 0,75 foi
     aprovado olhando GRADE, em 25/08/2026, e com a grade fora desta
     régua ele passaria a governar exclusivamente formulários — um
     aperto escolhido para outra coisa, aplicado onde nunca foi julgado.

     Quem escreve CSS usa var(--eN) e nunca pensa no multiplicador: os
     passos NOMINAIS são 4/8/12/16/20/24px, e o valor efetivo é
     detalhe de renderização. */
  --sk-densidade-tema: 1.0;
  --e1: calc(4px * var(--sk-densidade-tema));
  --e2: calc(8px * var(--sk-densidade-tema));
  --e3: calc(12px * var(--sk-densidade-tema));
  --e4: calc(16px * var(--sk-densidade-tema));
  --e5: calc(20px * var(--sk-densidade-tema));
  --e6: calc(24px * var(--sk-densidade-tema));

  /* RÉGUA PRÓPRIA DA GRADE (docs/74 §2.3, R1/R2/R5/R6/R7, Prompt #287).
     Separada da régua acima porque o conflito que originou a spec era
     exatamente este: "a densidade utilizada nas linhas dos datagrids não
     pode ser a mesma utilizada nas demais áreas do sistema" (Wagner,
     04/09/2026).

     EM `em`, NUNCA `px` (R1) — e é isto que conserta o defeito de origem
     do §0.2 da spec: a fonte escalava em `rem` e o respiro ficava parado
     em `px`, então existia um ponto de cruzamento em que a letra
     encostava no padding e depois passava por cima. Sendo relativo à
     fonte, o zoom carrega a linha junto POR CONSTRUÇÃO, não por
     calibragem dentro de uma faixa testada.

     A densidade multiplica SÓ O EIXO VERTICAL (R2): espaço horizontal em
     grade é governado por quantidade de colunas e largura de conteúdo, e
     padding de célula é erro de arredondamento nessa disputa. Por isso
     --g-lateral não é multiplicado — mas continua em `em`, senão o
     defeito voltaria pelo eixo horizontal (R6).

     A entrelinha fica FORA da régua (R7): baixá-la de 1,35 para 1,20
     encolhe a linha em 2,2px — uma linha a mais, na melhor hipótese, com
     custo de legibilidade que não paga.

     0,60 é fixo e foi escolhido UMA vez, sobre maquete (R5): 14 linhas em
     430px, 3,6px de respiro de cada lado a 100%. O 0,30 foi testado e
     REJEITADO por Wagner — texto encostado no traço divisório. */
  --sk-densidade-grade: 0.60;
  --g-vertical: calc(0.42em * var(--sk-densidade-grade));
  --g-lateral: 0.5em;
  --g-entrelinha: 1.35;
}