/* design-system/tokens.css
 *
 * Fonte única dos valores do notanexo. SÓ custom properties — nenhuma regra de
 * componente entra aqui, porque o painel adota este arquivo na Fase 2 e não pode
 * herdar layout de landing junto.
 *
 * A paleta vem dos arquivos originais da marca (notanexo branding/), não do painel
 * atual: o #1d59c8 e o teal que app.css usa hoje não existem no logo.
 */
:root {
  /* --- cor da marca --- */
  --ink: #081028;        /* wordmark: texto, títulos, o preto do sistema */
  --brand: #203880;      /* o "N" do ícone: ação primária, link, ícone ativo */
  --cyan: #28c8e8;       /* o corte diagonal do N e do X: acento e sinal */

  /* --- cor derivada --- */
  --ink-2: #5f6880;      /* texto de apoio */
  --ink-3: #8890a4;      /* legenda, placeholder */
  --brand-hover: #2a4899;
  --brand-soft: #f2f5fb;
  --cyan-soft: #eaf9fd;
  --cyan-ink: #0e6f85;   /* texto sobre --cyan-soft, contraste AA */

  /* --- superfície --- */
  --bg: #ffffff;
  --surface: #f5f7fb;
  --line: #e1e6f0;
  --line-strong: #d5dcea;

  /* --- estado (funcional, não é cor de marca) --- */
  --positive: #0e7d5a;
  --positive-soft: #e7f6ef;
  --negative: #b42318;
  --negative-soft: #fdeceb;
  /* "atenção" nasceu com o painel (Fase 2): pendência que não é erro — certificado
     vencendo, cadastro incompleto. A landing não tinha o estado, o produto tem. */
  --warning: #9a6a00;
  --warning-soft: #fdf3d9;

  /* --- tipografia --- */
  --font-display: "Sora", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --text-xs: 0.6875rem;   /* 11px — legenda, chip */
  --text-sm: 0.8125rem;   /* 13px — apoio, item de lista */
  --text-md: 0.9375rem;   /* 15px — corpo */
  --text-lg: 1.0625rem;   /* 17px — destaque de corpo */
  --title-sm: 1.3125rem;  /* 21px — título de card grande */
  --title-md: 1.625rem;   /* 26px */
  --title-lg: 1.9375rem;  /* 31px — título de seção */
  --title-xl: 3.25rem;    /* 52px — hero */

  --tracking-tight: -0.03em;  /* todo título em Sora */
  --leading-title: 1.12;
  --leading-body: 1.55;

  /* --- espaço (escala de 4) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4.375rem;  /* respiro entre seções da landing */

  /* --- forma --- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* --- elevação --- */
  /* Derivadas do --ink, não de um cinza neutro: sombra colorida pela tinta da marca
     afunda no fundo em vez de sujar. Só o painel usa — a landing é plana. */
  --shadow-sm: 0 12px 28px rgb(8 16 40 / 6%);
  --shadow-md: 0 28px 60px rgb(8 16 40 / 8%);

  /* --- layout --- */
  --content-max: 1240px;  /* mesmo valor que o painel já usa em .content-body > * */

  /* --- foco --- */
  --focus-ring: 0 0 0 3px rgb(40 200 232 / 45%);
}