/* cell.ia — tokens de design. ÚNICO lugar com valores de cor, fonte, espaço e raio.
   O resto do CSS só usa var(--...). Regras da marca e razões de contraste em
   docs/identidade-visual.md. Mudou uma cor aqui? Recalcule o contraste lá. */

/* ---- fontes (Nippo, WOFF2 oficial da Fontshare, sem conversão: licença ITF FFL) ---- */
@font-face { font-family: "Nippo"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("/static/brand/fonts/Nippo-Light.woff2") format("woff2"); }
@font-face { font-family: "Nippo"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/brand/fonts/Nippo-Regular.woff2") format("woff2"); }
@font-face { font-family: "Nippo"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/brand/fonts/Nippo-Medium.woff2") format("woff2"); }
@font-face { font-family: "Nippo"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/brand/fonts/Nippo-Bold.woff2") format("woff2"); }

:root {
  /* ---- marca (manual Picelli, pág. 3) ---- */
  --azul-marca: #0055b8;    /* Safe Blue · Pantone 2935 C */
  --escuro-marca: #101820;  /* Dark Blue · Pantone Black 6 C */
  /* Azul para texto/link/ícone SOBRE fundo escuro: 7,18:1 sobre --escuro-marca.
     (Safe Blue sobre Dark Blue dá 2,55:1: só para blocos, logo e títulos grandes.) */
  --azul-claro: #6aa6f8;
  --azul-fundo: #e8f0fb;    /* realce suave (item ativo, linha selecionada) no tema claro */

  /* ---- neutros derivados do Dark Blue (mesmo matiz, ~210°) ---- */
  --neutro-950: #0d141b;
  --neutro-900: #101820;
  --neutro-850: #16202a;
  --neutro-800: #1e2935;
  --neutro-700: #2c3845;
  --neutro-600: #4d5a68;
  --neutro-500: #6b7785;
  --neutro-400: #8e98a4;
  --neutro-300: #b5bdc6;
  --neutro-200: #d6dbe1;
  --neutro-100: #e9ecf0;
  --neutro-50: #f4f6f8;
  --branco: #ffffff;

  /* ---- estado (fora da marca, discretas; nunca vermelho perto do logo) ---- */
  --sucesso: #1a7a45;  --sucesso-fundo: #e7f4ec;
  --atencao: #8a5100;  --atencao-fundo: #fdf1dc;  --atencao-borda: #e0a33a;
  --erro: #b42318;     --erro-fundo: #fdecea;
  --info: var(--azul-marca); --info-fundo: var(--azul-fundo);
  --perigo: #b42318;   /* fundo do botão Rejeitar, nos dois temas: texto branco 6,6:1 */

  /* ---- papéis (o CSS usa estes; o tema escuro troca só eles) ---- */
  --fundo: var(--neutro-50);          /* área de conteúdo */
  --painel: var(--branco);            /* cartões, tabelas */
  --painel-alt: #f8f9fb;              /* zebra das tabelas */
  --texto: var(--neutro-900);         /* 16,5:1 sobre --fundo; 17,9:1 sobre --painel */
  --texto-suave: var(--neutro-600);   /* 6,5:1 sobre --fundo; 7,1:1 sobre --painel */
  --borda: var(--neutro-200);
  --borda-forte: var(--neutro-300);
  --link: var(--azul-marca);          /* 7,0:1 sobre --painel; 6,5:1 sobre --fundo */
  --acento: var(--azul-marca);        /* botão primário (texto branco 7,0:1) */
  --acento-hover: #00479a;
  --realce: var(--azul-fundo);
  --foco: #0055b8;

  /* menu lateral e cabeçalho: sempre Dark Blue, nos dois temas */
  --menu-fundo: var(--escuro-marca);
  --menu-texto: var(--neutro-300);    /* 9,4:1 */
  --menu-texto-forte: var(--branco);  /* 17,9:1 */
  --menu-rotulo: var(--neutro-400);   /* 6,1:1 (rótulos de seção) */
  --menu-ativo: rgba(106, 166, 248, .14);
  --menu-borda: #243140;

  /* ---- tipografia ---- */
  --fonte: "Nippo", Arial, "Liberation Sans", Arimo, sans-serif;
  /* Nippo não tem algarismos tabulares (sem 'tnum'; o "1" é mais estreito que o "0"):
     número em tabela e cartão de valor usa Arial com tabular-nums, para alinhar. */
  --fonte-numeros: Arial, "Liberation Sans", Arimo, "Helvetica Neue", Helvetica, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Consolas, monospace;
  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 700;
  /* escala 1,2 (terça menor) a partir de 15px */
  --t-xs: .75rem;    /* 12 */
  --t-sm: .8125rem;  /* 13 */
  --t-md: .9375rem;  /* 15: corpo */
  --t-lg: 1.125rem;  /* 18 */
  --t-xl: 1.375rem;  /* 22 */
  --t-2xl: 1.75rem;  /* 28: valor do cartão de indicador */
  --t-3xl: 2.25rem;  /* 36 */

  /* ---- espaço (múltiplos de 4px) ---- */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem;
  --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem;

  /* ---- raio: a marca é de ângulos retos ---- */
  --raio: 2px;
  --raio-0: 0;

  /* ---- sombra mínima ---- */
  --sombra: 0 1px 2px rgba(16, 24, 32, .06);
  --sombra-flutuante: 0 8px 24px rgba(16, 24, 32, .18);

  /* ---- medidas do layout ---- */
  --largura-menu: 248px;
  --altura-cabecalho: 60px;

  color-scheme: light;
}

/* Tema escuro completo, com os mesmos tokens (só os papéis mudam). */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: var(--neutro-950);
    --painel: var(--neutro-850);
    --painel-alt: #1a2531;
    --texto: #e6e9ed;              /* 15,2:1 sobre --fundo; 13,5:1 sobre --painel */
    --texto-suave: #9aa5b1;        /* 7,4:1 sobre --fundo; 6,6:1 sobre --painel */
    --borda: var(--neutro-700);
    --borda-forte: #3a4757;
    --link: var(--azul-claro);     /* 6,6:1 sobre --painel */
    --acento: var(--azul-marca);   /* botão: texto branco 7,0:1 */
    --acento-hover: #0a63d0;
    --realce: rgba(106, 166, 248, .12);
    --foco: var(--azul-claro);
    --menu-borda: #1f2b38;

    --sucesso: #5fcf8f;  --sucesso-fundo: #14291e;  /* 7,9:1 */
    --atencao: #f2b045;  --atencao-fundo: #2e2412;  --atencao-borda: #7a5a1f;  /* 8,0:1 */
    --erro: #ff8a80;     --erro-fundo: #321a1a;     /* 7,1:1 */
    --info: var(--azul-claro); --info-fundo: rgba(106, 166, 248, .12);

    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}