/* ==========================================================================
 * SIR · Clube de Investidores — src/styles/tokens.css
 * --------------------------------------------------------------------------
 * Única fonte de verdade cromática, tipográfica e espacial do sistema.
 * Nenhum outro arquivo declara cor literal: tudo consome as variáveis daqui.
 *
 * Identidade: institucional, sóbria, alto contraste.
 *   primária  → azul-petróleo profundo (registro, governança, confiança)
 *   acento    → latão (valor econômico: cotas, dinheiro, resultado)
 *
 * Proibições permanentes desta folha: roxo genérico de SaaS, gradiente
 * decorativo, sombra difusa colorida, emoji.
 *
 * CONTRASTE — todo par texto/fundo abaixo foi medido pela fórmula WCAG 2.1
 * (luminância relativa) e o valor está anotado ao lado. Mínimo exigido: 4,5:1
 * (AA) em texto normal; texto corrido do sistema fica em AAA (≥ 7:1).
 *
 * DUAS CAMADAS, UMA GARANTIA — esta folha é a paleta de partida: é ela que
 * pinta a primeira tela, o `noscript`, a impressão e qualquer situação em que
 * o JavaScript não rode. Os valores abaixo são fixos e cada par crítico traz o
 * contraste medido ao lado; nenhum deles entra abaixo de AA.
 *
 * Em tempo de execução, `src/ui/tema.js` reescreve EXATAMENTE estas mesmas
 * chaves no elemento raiz, derivando-as em OKLab a partir do tema escolhido —
 * é o que permite trocar cor, tipografia, raio e densidade sem uma segunda
 * folha de estilo. A garantia de contraste não afrouxa nessa passagem: toda
 * face de texto sai de `ajustarAte()`/`quatroFaces()`, que CAMINHAM EM LAÇO
 * com o tom até cruzar o mínimo exigido, e `verificar()` mede o conjunto par a
 * par (a lista `PARES`, em `tema.js`) antes de um tema poder ser salvo.
 *
 * Regra prática para quem mexer aqui: um par novo entra nesta folha com o
 * contraste anotado ao lado E na lista `PARES` de `tema.js`. Anotar só aqui
 * garante o modo estático; medir só lá deixa a partida sem prova.
 * ======================================================================== */

:root {
  color-scheme: light;

  /* --- Superfícies e tinta (tema claro) ------------------------------- */
  --fundo: #F2F4F6;
  --superficie: #FFFFFF;
  --superficie-2: #E9EDF1;
  --superficie-3: #DFE5EA;

  --tinta: #111A20;    /* 17,61:1 sobre superfície · 15,97:1 sobre fundo — AAA */
  --tinta-2: #48565E;  /*  7,59:1 sobre superfície ·  6,45:1 sobre superfície-2 — AAA/AA */
  --tinta-3: #586770;  /*  5,85:1 sobre superfície ·  4,61:1 sobre superfície-3 — AA */

  --linha: #D5DDE3;
  --linha-2: #C2CDD5;

  /* --- Primária: azul-petróleo --------------------------------------- */
  --primaria: #0B4A5E;        /*  9,74:1 sobre superfície — AAA */
  --primaria-2: #083A4A;      /* variante de pressão e hover */
  --sobre-primaria: #F2F7F9;  /*  9,02:1 sobre primária — AAA */
  --primaria-suave: #DCE9EE;  /*  primária sobre ela: 7,86:1 — AAA */

  /* --- Acento: latão --------------------------------------------------- */
  --latao: #835D14;           /*  5,93:1 sobre superfície — AA */
  --latao-forte: #6E4E10;     /*  7,61:1 sobre superfície · 6,36:1 sobre latão-suave — AAA/AA */
  --latao-suave: #F3EAD6;

  /* --- Status do sistema (par cor + fundo, todos AA) ------------------- */
  --st-pendente: #7E5A0C;        --st-pendente-bg: #F6EDD6;      /* 5,37:1 — AA */
  --st-aprovado: #155F3F;        --st-aprovado-bg: #DCEDE4;      /* 6,30:1 — AA */
  --st-disponivel: #0F5A51;      --st-disponivel-bg: #D8EBE7;    /* 6,52:1 — AA */
  --st-bloqueado: #87451F;       --st-bloqueado-bg: #F3E3D9;     /* 5,79:1 — AA */
  --st-alocado: #2C4B8C;         --st-alocado-bg: #DEE6F5;       /* 6,72:1 — AA */
  --st-liquidado: #49565E;       --st-liquidado-bg: #E4E9EC;     /* 6,18:1 — AA */
  --st-rejeitado: #96291F;       --st-rejeitado-bg: #F5DEDB;     /* 6,21:1 — AA */
  --st-inadimplente: #8C2249;    --st-inadimplente-bg: #F6DEE7;  /* 6,77:1 — AA */
  --perigo: #96241C;             --perigo-bg: #F6DDDA;           /* 6,34:1 — AA · 8,18:1 sobre superfície */
  --sobre-perigo: #FFFFFF;                                       /* 8,18:1 sobre perigo — AAA */

  /* --- Sombras: nítidas, curtas, nunca coloridas ----------------------- */
  --sombra: 0 10px 26px rgba(12, 22, 30, .10);
  --sombra-2: 0 22px 58px rgba(10, 18, 26, .18);
  --sombra-borda: inset 0 0 0 1px var(--linha);

  /* --- Raios ----------------------------------------------------------- */
  --r-p: 6px;
  --r: 9px;
  --r-g: 13px;
  --r-pilula: 999px;

  /* --- Espaçamento (escala de 4) --------------------------------------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 26px;
  --e-7: 34px;
  --e-8: 44px;
  --e-9: 60px;

  /* --- Tipografia ------------------------------------------------------ */
  /* Apesar do nome, este é o token de TÍTULO: `tema.js` publica nele a fonte
     de destaque da tipografia escolhida, que hoje nunca é serifada. O nome é
     herança do mock original e está registrado no backlog para renomear. */
  --serif: 'Geist', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sans: 'Geist', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  --t-xs: .68rem;
  --t-p: .78rem;
  --t-s: .84rem;
  --t-base: .92rem;
  --t-m: 1.02rem;
  --t-g: 1.24rem;
  --t-gg: 1.62rem;
  --t-titulo: 2.05rem;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --entrelinha: 1.5;
  --entrelinha-curta: 1.2;
  --rastreio-kicker: .13em;

  /* --- Camadas (z-index) ----------------------------------------------- */
  --z-base: 1;
  --z-tabela-cabecalho: 10;
  --z-topbar: 40;
  --z-sidebar: 45;
  /* Dica do menu recolhido e menu de grupo da casca em faixa: precisam passar
     por cima da lateral e da barra, e ficar por baixo de gaveta e modal. */
  --z-menu: 60;
  --z-drawer-fundo: 90;
  --z-drawer: 95;
  --z-modal: 120;
  --z-paleta: 150;
  --z-toast: 200;

  /* --- Movimento -------------------------------------------------------- */
  --transicao-rapida: .12s ease;
  --transicao: .18s ease;

  /* --- Métrica de layout ----------------------------------------------- */
  --largura-sidebar: 256px;
  /* Lateral recolhida: só o ícone e o alvo de toque em volta dele. É a métrica
     que a dica do menu usa para se posicionar ao lado da coluna. */
  --largura-lateral-colapsada: 62px;
  --altura-topbar: 58px;
  --largura-conteudo: 1280px;
  --alvo-toque: 44px;
}

/* ==========================================================================
 * Tema escuro — mesmas chaves, papéis invertidos.
 * A primária clareia para permanecer legível sobre fundo profundo.
 * ======================================================================== */

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

  --fundo: #0A1116;
  --superficie: #101A20;
  --superficie-2: #16232A;
  --superficie-3: #1D2C34;

  --tinta: #E6EDF1;    /* 14,91:1 sobre superfície · 16,07:1 sobre fundo — AAA */
  --tinta-2: #A3B3BC;  /*  8,17:1 sobre superfície ·  6,66:1 sobre superfície-3 — AAA/AA */
  --tinta-3: #8A9AA2;  /*  6,07:1 sobre superfície ·  4,94:1 sobre superfície-3 — AA */

  --linha: #22323A;
  --linha-2: #2E404A;

  --primaria: #59B2CD;        /*  7,29:1 sobre superfície — AAA */
  --primaria-2: #7CC7DE;
  --sobre-primaria: #04141B;  /*  7,74:1 sobre primária — AAA */
  --primaria-suave: #10333F;  /*  primária sobre ela: 5,53:1 — AA */

  --latao: #D6AC5B;           /*  8,32:1 sobre superfície — AAA */
  --latao-forte: #E5C283;     /* 10,39:1 sobre superfície ·  9,04:1 sobre latão-suave — AAA */
  --latao-suave: #2C2413;

  --st-pendente: #DCB558;        --st-pendente-bg: #2C2410;      /* 7,90:1 — AAA */
  --st-aprovado: #5BC08F;        --st-aprovado-bg: #0F2C20;      /* 6,69:1 — AA */
  --st-disponivel: #4FBCAC;      --st-disponivel-bg: #0D2C29;    /* 6,47:1 — AA */
  --st-bloqueado: #D8925F;       --st-bloqueado-bg: #2E1E12;     /* 6,25:1 — AA */
  --st-alocado: #8FAAEA;         --st-alocado-bg: #16213A;       /* 6,94:1 — AA */
  --st-liquidado: #A0AEB6;       --st-liquidado-bg: #1C2529;     /* 6,85:1 — AA */
  --st-rejeitado: #E8827A;       --st-rejeitado-bg: #331512;     /* 6,29:1 — AA */
  --st-inadimplente: #EA7FA5;    --st-inadimplente-bg: #33131F;  /* 6,44:1 — AA */
  --perigo: #E8837A;             --perigo-bg: #331411;           /* 6,37:1 — AA · 6,68:1 sobre superfície */
  --sobre-perigo: #1A0A08;

  --sombra: 0 10px 26px rgba(0, 0, 0, .48);
  --sombra-2: 0 24px 64px rgba(0, 0, 0, .62);
}

/* Preferência do sistema operacional. Só vale quando o usuário não fixou
 * o tema claro explicitamente — a escolha manual sempre vence. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --fundo: #0A1116;
    --superficie: #101A20;
    --superficie-2: #16232A;
    --superficie-3: #1D2C34;

    --tinta: #E6EDF1;
    --tinta-2: #A3B3BC;
    --tinta-3: #8A9AA2;

    --linha: #22323A;
    --linha-2: #2E404A;

    --primaria: #59B2CD;
    --primaria-2: #7CC7DE;
    --sobre-primaria: #04141B;
    --primaria-suave: #10333F;

    --latao: #D6AC5B;
    --latao-forte: #E5C283;
    --latao-suave: #2C2413;

    --st-pendente: #DCB558;        --st-pendente-bg: #2C2410;
    --st-aprovado: #5BC08F;        --st-aprovado-bg: #0F2C20;
    --st-disponivel: #4FBCAC;      --st-disponivel-bg: #0D2C29;
    --st-bloqueado: #D8925F;       --st-bloqueado-bg: #2E1E12;
    --st-alocado: #8FAAEA;         --st-alocado-bg: #16213A;
    --st-liquidado: #A0AEB6;       --st-liquidado-bg: #1C2529;
    --st-rejeitado: #E8827A;       --st-rejeitado-bg: #331512;
    --st-inadimplente: #EA7FA5;    --st-inadimplente-bg: #33131F;
    --perigo: #E8837A;             --perigo-bg: #331411;
    --sobre-perigo: #1A0A08;

    --sombra: 0 10px 26px rgba(0, 0, 0, .48);
    --sombra-2: 0 24px 64px rgba(0, 0, 0, .62);
  }
}

/* Tela de marca (login e selo): fundo institucional fixo nos dois temas,
 * medido contra a tinta clara aplicada sobre ele. */
:root {
  --marca-fundo: #071319;      /* tinta-marca sobre ele: 15,4:1 — AAA */
  --marca-tinta: #E8EFF2;
  --marca-tinta-2: #9BAFB8;    /* 6,9:1 sobre marca-fundo — AA */
  --marca-latao: #D8B96A;      /* 9,9:1 sobre marca-fundo — AAA */
  --marca-linha: rgba(232, 239, 242, .20);
}
[data-theme="dark"] { --marca-fundo: #040D12; }