/* =============================================================================
 * tokens.css — sistema visual unico do Thiago, "preto e branco quente".
 *
 * ESTE E O UNICO ARQUIVO DO SISTEMA COM LITERAL DE COR, DE FONTE E DE MEDIDA.
 * Trocar o visual de qualquer painel = trocar este arquivo. Quem quiser conferir:
 * `criterio_00_tokens_css.py` fica vermelho se aparecer cor solta em qualquer .css,
 * .php, .js ou .html fora daqui.
 *
 * Origem dos valores (spec-redesign-interface.md, secao 0, medido no Chrome em 16/09):
 *   - rampa de cinza QUENTE de 21 passos: claude.com (secao 0.4), copiada como esta
 *   - acabamento (cartao, sidebar sem fundo, item ativo em tinta a 5%, kicker em caixa
 *     alta, sombra longa e leve): Afilia Valen e Valen CRM (secoes 0.5c e 0.5d)
 *   - receita de app shell (sidebar, breadcrumb, chip, cartao levantado): Contiq (0.2)
 *   - escala tipografica curta e rotulo em caixa alta com tracking: os quatro Framer
 * O que NAO veio: nenhuma cor de marca (o azul e o verde do Afilia, o clay do
 * claude.com, o azul da Vide, o verde da Synapta). O acento aqui e o preto.
 *
 * Ordem do arquivo: fontes, rampa, papeis do tema claro, tema escuro (duas vezes, de
 * proposito: CSS nao tem alias de bloco), tipografia, espaco, forma, medida.
 * ============================================================================= */

/* ------------------------------------------------------------------- fontes
 * Tres familias, as tres variaveis, servidas do proprio dominio (nunca @import,
 * nunca CDN de terceiro): uma sans pro texto (Inter), uma mono pra rotulo em caixa
 * alta e identificador tecnico (JetBrains Mono) e uma sans de NUMERO (Manrope).
 * O caminho e relativo a ESTE arquivo, entao a mesma folha serve em
 * `sistema-visual/fontes/` e em `public_html/css/fontes/`.
 *
 * Por que uma terceira familia so pro numero (16/09/2026, pedido do Thiago): o zero da
 * JetBrains Mono tem ponto no meio, e em numero grande isso atrapalha a leitura. A
 * Manrope e a fonte que o dashboard da OpenCapital usa nos numeros (la a classe se
 * chama font-mono mas resolve pra Manrope), com font-variant-numeric: tabular-nums pra
 * coluna nao dançar. A mono NAO sai do sistema: ela fica onde era boa, que e rotulo em
 * caixa alta e identificador tecnico. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fontes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fontes/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fontes/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fontes/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope variavel, faixa 500-700: e a faixa que o Google entrega em `wght@500..700` e
 * a unica que o sistema usa (numero de metrica em 700, resto em 500-600). Declarar a
 * faixa real evita o navegador sintetizar peso que a fonte nao tem. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fontes/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fontes/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root,
[data-tema="claro"] {
  color-scheme: light;

  /* --------------------------------------------------------------- a rampa
   * 21 passos quentes do claude.com. Sao as PRIMITIVAS: componente nenhum usa
   * `--cinza-*` direto, so os papeis abaixo. Existem pra que derivar um papel novo
   * seja escolher um passo, nao inventar um cinza. */
  --cinza-000: #ffffff;
  --cinza-050: #faf9f5;
  --cinza-100: #f5f4ed;
  --cinza-150: #f0eee6;
  --cinza-200: #e8e6dc;
  --cinza-250: #dedcd1;
  --cinza-300: #d1cfc5;
  --cinza-350: #c2c0b6;
  --cinza-400: #b0aea5;
  --cinza-450: #9c9a92;
  --cinza-500: #87867f;
  --cinza-550: #73726c;
  --cinza-600: #5e5d59;
  --cinza-650: #4d4c48;
  --cinza-700: #3d3d3a;
  --cinza-750: #30302e;
  --cinza-800: #262624;
  --cinza-850: #1f1e1d;
  --cinza-900: #1a1918;
  --cinza-950: #141413;

  /* tres tons de semantica, discretos de proposito: nao sao cor de marca, sao sinal.
   * Cada um em trio (tinta sobre fundo claro, fundo, linha). Matiz de baixa saturacao
   * pra conviver com a rampa quente sem virar identidade. */
  --vermelho-tinta: #9a3b32;
  --vermelho-fundo: #f7ece9;
  --vermelho-linha: #e3c9c3;
  --vermelho-tinta-escuro: #e8a39a;
  --vermelho-fundo-escuro: #2b1d1b;
  --vermelho-linha-escuro: #4a2f2a;
  --ocre-tinta: #7a5a17;
  --ocre-fundo: #f7f1de;
  --ocre-linha: #e4d6ae;
  --ocre-tinta-escuro: #d9bc72;
  --ocre-fundo-escuro: #2a2417;
  --ocre-linha-escuro: #463c22;
  --oliva-tinta: #4c6438;
  --oliva-fundo: #eef2e7;
  --oliva-linha: #d3ddc3;
  --oliva-tinta-escuro: #a8c189;
  --oliva-fundo-escuro: #1e2518;
  --oliva-linha-escuro: #364027;

  /* ------------------------------------------------------- papeis (tema claro)
   * Papel = o que a cor FAZ na tela. Componente usa daqui pra baixo, sempre. */

  /* superficie */
  --fundo: var(--cinza-050);          /* canvas da pagina: quase-branco quente */
  --fundo-afundado: var(--cinza-100); /* area recuada dentro do canvas */
  --superficie: var(--cinza-000);     /* cartao, cabecalho de tabela, campo */
  --superficie-2: var(--cinza-100);   /* chip, bloco de log, zebra */

  /* linha */
  --linha: var(--cinza-200);          /* hairline de 1px, o padrao (decorativa) */
  --linha-forte: var(--cinza-300);    /* divisor de tabela densa e de secao */
  --linha-fraca: var(--cinza-150);    /* divisor interno de cartao */
  /* borda de CONTROLE (campo, select, botao secundario): ela identifica o componente,
   * entao precisa de 3:1 contra o fundo vizinho (WCAG 2.2, 1.4.11). E por isso que ela
   * e mais escura que a hairline decorativa, e nao por gosto. */
  --linha-campo: var(--cinza-500);

  /* tinta */
  --tinta: var(--cinza-950);          /* texto principal: preto quente, nunca #000 */
  --tinta-2: var(--cinza-650);        /* texto secundario (8:1 no cartao) */
  --tinta-3: var(--cinza-550);        /* rotulo, metadado, hora (AA em 15px) */
  --tinta-4: var(--cinza-500);        /* icone decorativo e placeholder (3:1) */

  /* realce: a tinta em opacidade baixa. E o gesto do Afilia (item ativo em 5%) e o que
   * faz destaque sem inventar mais um cinza. */
  --realce: rgba(20, 20, 19, 0.05);
  --realce-2: rgba(20, 20, 19, 0.09);
  --realce-3: rgba(20, 20, 19, 0.14);

  /* acento: o preto e o acento. Nao ha cor de marca. */
  --acento: var(--cinza-950);
  --acento-hover: var(--cinza-800);
  --acento-tinta: var(--cinza-050);

  /* foco: mesma tinta, anel grosso. Sem cor viva, por decisao (preto e branco). */
  --foco: var(--cinza-950);

  /* semantica em uso */
  --erro-tinta: var(--vermelho-tinta);
  --erro-fundo: var(--vermelho-fundo);
  --erro-linha: var(--vermelho-linha);
  --aviso-tinta: var(--ocre-tinta);
  --aviso-fundo: var(--ocre-fundo);
  --aviso-linha: var(--ocre-linha);
  --ok-tinta: var(--oliva-tinta);
  --ok-fundo: var(--oliva-fundo);
  --ok-linha: var(--oliva-linha);

  /* sombra: duas, so. Repouso = a longa e leve do Afilia (0 14px 36px a 5%).
   * Levantado = a mesma mais curta e mais densa, pro que sai do plano. */
  --sombra-repouso: 0 1px 2px rgba(20, 20, 19, 0.04), 0 14px 36px rgba(20, 20, 19, 0.05);
  --sombra-levantado: 0 2px 6px rgba(20, 20, 19, 0.08), 0 18px 44px rgba(20, 20, 19, 0.12);
  --sombra-interna: inset 0 1px 0 rgba(255, 255, 255, 0);

  /* util */
  --cortina: rgba(20, 20, 19, 0.4);   /* atras da gaveta no celular */
  --transparente: transparent;
}

/* ---------------------------------------------------- tema escuro (automatico)
 * Deriva dos MESMOS passos da rampa: nada de paleta nova. Fundo 950, cartao 900,
 * linha 750, tinta 050. O acento inverte (o preto vira o quase-branco), que e o unico
 * jeito de manter "preto e branco" com acento legivel no escuro.
 * A lista abaixo aparece duas vezes de proposito: uma pro sistema operacional
 * (prefers-color-scheme) e uma pro pedido explicito ([data-tema="escuro"]).
 * CSS nao tem alias de bloco e a alternativa (light-dark()) ainda deixaria de fora
 * navegador que o Thiago pode ter no celular. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: var(--cinza-950);
    --fundo-afundado: var(--cinza-900);
    --superficie: var(--cinza-850);
    --superficie-2: var(--cinza-800);
    --linha: var(--cinza-750);
    --linha-forte: var(--cinza-700);
    --linha-fraca: var(--cinza-800);
    --linha-campo: var(--cinza-550);
    --tinta: var(--cinza-050);
    --tinta-2: var(--cinza-400);
    --tinta-3: var(--cinza-450);
    --tinta-4: var(--cinza-550);
    --realce: rgba(250, 249, 245, 0.07);
    --realce-2: rgba(250, 249, 245, 0.12);
    --realce-3: rgba(250, 249, 245, 0.18);
    --acento: var(--cinza-050);
    --acento-hover: var(--cinza-200);
    --acento-tinta: var(--cinza-950);
    --foco: var(--cinza-200);
    --erro-tinta: var(--vermelho-tinta-escuro);
    --erro-fundo: var(--vermelho-fundo-escuro);
    --erro-linha: var(--vermelho-linha-escuro);
    --aviso-tinta: var(--ocre-tinta-escuro);
    --aviso-fundo: var(--ocre-fundo-escuro);
    --aviso-linha: var(--ocre-linha-escuro);
    --ok-tinta: var(--oliva-tinta-escuro);
    --ok-fundo: var(--oliva-fundo-escuro);
    --ok-linha: var(--oliva-linha-escuro);
    /* no escuro, sombra preta sobre fundo preto nao existe: o volume vem de LUZ na
     * aresta de cima (LIC-037, item 5). A sombra fica so pra profundidade real. */
    --sombra-repouso: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sombra-levantado: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 44px rgba(0, 0, 0, 0.5);
    --sombra-interna: inset 0 1px 0 rgba(250, 249, 245, 0.08);
    --cortina: rgba(0, 0, 0, 0.62);
  }
}

[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: var(--cinza-950);
  --fundo-afundado: var(--cinza-900);
  --superficie: var(--cinza-850);
  --superficie-2: var(--cinza-800);
  --linha: var(--cinza-750);
  --linha-forte: var(--cinza-700);
  --linha-fraca: var(--cinza-800);
  --linha-campo: var(--cinza-550);
  --tinta: var(--cinza-050);
  --tinta-2: var(--cinza-400);
  --tinta-3: var(--cinza-450);
  --tinta-4: var(--cinza-550);
  --realce: rgba(250, 249, 245, 0.07);
  --realce-2: rgba(250, 249, 245, 0.12);
  --realce-3: rgba(250, 249, 245, 0.18);
  --acento: var(--cinza-050);
  --acento-hover: var(--cinza-200);
  --acento-tinta: var(--cinza-950);
  --foco: var(--cinza-200);
  --erro-tinta: var(--vermelho-tinta-escuro);
  --erro-fundo: var(--vermelho-fundo-escuro);
  --erro-linha: var(--vermelho-linha-escuro);
  --aviso-tinta: var(--ocre-tinta-escuro);
  --aviso-fundo: var(--ocre-fundo-escuro);
  --aviso-linha: var(--ocre-linha-escuro);
  --ok-tinta: var(--oliva-tinta-escuro);
  --ok-fundo: var(--oliva-fundo-escuro);
  --ok-linha: var(--oliva-linha-escuro);
  --sombra-repouso: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-levantado: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 44px rgba(0, 0, 0, 0.5);
  --sombra-interna: inset 0 1px 0 rgba(250, 249, 245, 0.08);
  --cortina: rgba(0, 0, 0, 0.62);
}

:root {
  /* --------------------------------------------------------------- tipografia
   * Tres papeis, tres familias, e a regra de qual usar e por CONTEUDO, nao por gosto:
   *
   *   --fonte         texto: titulo, corpo, resumo, botao, rotulo de metrica.
   *   --fonte-numero  TODO numero que a pessoa le como numero: KPI, contador, celula
   *                   de tabela, nota de 1 a 5, data, hora, pagina, codigo de erro.
   *                   Sempre acompanhada de `font-variant-numeric: tabular-nums`.
   *   --fonte-mono    rotulo em caixa alta (kicker, grupo da lateral, cabecalho de
   *                   tabela, chip de estado, trilha) e identificador tecnico (origem
   *                   do incidente, id, nome de cron, bloco de log). Nunca numero solto.
   *
   * O numero saiu da mono em 16/09/2026 a pedido do Thiago: o zero da JetBrains Mono
   * tem ponto no meio e atrapalha a leitura. A Manrope resolve sem perder a largura
   * fixa, porque quem alinha coluna e o tabular-nums, nao o monoespacamento. */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --fonte-numero: "Manrope", var(--fonte);
  --fonte-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* escala curta: 7 passos e nada entre eles */
  --t-rotulo: 0.6875rem;  /* 11px  rotulo de grupo, kicker, badge */
  --t-micro: 0.8125rem;   /* 13px  metadado, ajuda de campo */
  --t-menor: 0.875rem;    /* 14px  tabela densa, chip, botao */
  --t-base: 1rem;         /* 16px  corpo (pedido do Thiago 17/09: +1 passo; era 15, o do claude.com) */
  --t-campo: 1rem;        /* 16px  SO em campo de formulario: abaixo de 16 o iOS
                             da zoom no foco e a tela pula */
  --t-medio: 1.125rem;    /* 18px  titulo de cartao, subtitulo de secao */
  --t-titulo: 1.25rem;    /* 20px  h1 da tela */
  --t-numero: 1.75rem;    /* 28px  numero grande de metrica */
  --t-display: 2.5rem;    /* 40px  codigo de erro, numero heroi */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-maximo: 700;

  --altura-numero: 1;
  --altura-apertada: 1.2;
  --altura-titulo: 1.3;
  --altura-base: 1.55;

  /* tracking por funcao: rotulo abre, titulo fecha (medida do Afilia: 2,2px em 11px) */
  --trilha-rotulo: 0.2em;
  --trilha-kicker: 0.14em;
  --trilha-titulo: -0.02em;
  --trilha-numero: -0.03em;

  /* ------------------------------------------------------------------ espaco
   * Escala de 4px. Valor fora da escala e excecao justificada, nao default. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;
  --e-8: 40px;
  --e-9: 48px;
  --e-10: 64px;

  /* ------------------------------------------------------------------ forma
   * 6 botao / 8 bloco / 12 item de nav e chip / 16 cartao. O 16 nao estava na lista
   * inicial de 6-8-12: entrou porque a referencia de acabamento (Afilia, cartao de
   * radius 16 a 24) e o piso aceito, e cartao em 12 volta a parecer wireframe.
   * Registrado em decisoes.md (D-03). */
  --raio-1: 6px;
  --raio-2: 8px;
  --raio-3: 12px;
  --raio-4: 16px;
  --raio-pilula: 999px;

  --borda: 1px;
  --anel-foco: 2px;

  /* ----------------------------------------------------------------- medidas */
  --lateral: 248px;         /* sidebar aberta (Afilia 207, Valen CRM 255) */
  --lateral-curta: 68px;    /* sidebar colapsada (medida do portal da Vide) */
  --conteudo-max: 76rem;    /* coluna de conteudo */
  --alvo: 36px;             /* altura de controle no computador */
  --alvo-toque: 44px;       /* altura de controle no celular */
  --icone: 18px;            /* icone de nav e de botao */
  --icone-2: 14px;          /* icone inline, chevron */
  --tabela-min: 720px;      /* abaixo disso a tabela densa rola na horizontal */
  --detalhe-max: 12rem;     /* teto do bloco de log antes de rolar */

  /* duracao e curva: uma de cada. Entrada com a curva do Contiq. */
  --tempo: 0.18s;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* A quebra pro celular e 800px e aparece literal no componentes.css: media query nao
 * le variavel CSS. E medida, nao cor, e esta anotada no guia. */