/*
  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 DOIS NÍVEIS, que se MULTIPLICAM (nunca se substituem):
     o Tema dá a sua densidade (fábrica 0,75 — aprovada por Wagner em
     25/08/2026 sobre maquete com 100 registros; um Tema publicado pode
     sobrescrever), e o obreiro aplica o multiplicador pessoal por cima,
     como percentual INTEIRO no molde exato de --sk-escala-fonte — o
     valor vem de Usuario.densidade via style no <html> (base.html), e
     inteiro porque decimal renderizado por template em pt-br sairia
     localizado ("0,85") e quebraria este calc em silêncio.

     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: 0.75;
  --sk-densidade-obreiro: 100;
  --sk-densidade: calc(var(--sk-densidade-tema) * var(--sk-densidade-obreiro) / 100);
  --e1: calc(4px * var(--sk-densidade));
  --e2: calc(8px * var(--sk-densidade));
  --e3: calc(12px * var(--sk-densidade));
  --e4: calc(16px * var(--sk-densidade));
  --e5: calc(20px * var(--sk-densidade));
  --e6: calc(24px * var(--sk-densidade));
}