/* NexoJus.IA — tokens de tema (fonte única das cores, tipografia e formas).
   Use sempre os tokens semânticos (--color-*) nos componentes; não escreva cores soltas no código.
   Contrastes conferidos (WCAG 2.1):
   texto #263445 sobre #F7F9FC 12,0:1 · #596779 sobre branco 5,8:1 · branco sobre #087F8C 4,75:1
   #087F8C sobre branco 4,75:1 · #066773 sobre #E5F5F4 5,85:1 · #087F8C sobre #E5F5F4 4,23:1 (NÃO usar em texto)
   cobre #B87345 3,8:1 → apenas detalhes decorativos, nunca texto pequeno nem estado. */
:root {
  /* paleta oficial */
  --palette-navy: #142B45;        /* azul profundo — institucional */
  --palette-teal: #087F8C;        /* verde-petróleo — ação principal */
  --palette-teal-dark: #066773;   /* hover das ações / texto de ação sobre turquesa */
  --palette-mint: #E5F5F4;        /* turquesa claro — fundo de destaque */
  --palette-copper: #B87345;      /* cobre suave — acento decorativo da marca */
  --palette-snow: #F7F9FC;        /* branco suave — fundo geral */
  --palette-white: #FFFFFF;
  --palette-graphite: #263445;    /* grafite azulado — texto principal */
  --palette-slate: #596779;       /* texto secundário */
  --palette-mist: #DCE3EB;        /* bordas e divisórias */

  /* semânticos — superfícies e texto */
  --color-bg: var(--palette-snow);
  --color-surface: var(--palette-white);
  --color-surface-muted: #F1F4F8;
  --color-highlight: var(--palette-mint);
  --color-highlight-border: #BFE2DF;
  --color-text: var(--palette-graphite);
  --color-text-secondary: var(--palette-slate);
  --color-text-disabled: #7A889B;
  --color-heading: var(--palette-navy);
  --color-border: var(--palette-mist);
  --color-border-strong: #8391A3;   /* contorno de campos de formulário (≥ 3:1) */

  /* semânticos — marca e ação */
  --color-brand: var(--palette-navy);
  --color-on-brand: var(--palette-white);
  --color-on-brand-muted: #B9C6D6;
  --color-brand-hover: #1D3A5A;
  --color-brand-deep: #0E2034;       /* azul mais fundo para profundidade em faixas escuras */
  --color-on-brand-line: rgba(255, 255, 255, .14);
  --color-action: var(--palette-teal);
  --color-action-hover: var(--palette-teal-dark);
  --color-on-action: var(--palette-white);
  --color-action-text: var(--palette-teal);          /* links e botões secundários sobre branco */
  --color-action-text-on-highlight: var(--palette-teal-dark);
  --color-action-on-dark: #7FD1D7;                    /* links sobre o azul profundo (8,2:1) */
  --color-accent: var(--palette-copper);             /* só decoração */
  --color-focus: var(--palette-teal);
  --color-focus-on-dark: var(--palette-white);

  /* semânticos — estados (sempre acompanhados de texto ou ícone) */
  --color-success: #18794E;  --color-success-bg: #E7F4EC;
  --color-warning-on-dark: #F2C46D;  /* atenção sobre o azul profundo */
  --color-warning: #946200;  --color-warning-bg: #FBF1DB;
  --color-danger:  #B42318;  --color-danger-bg:  #FDECEA;
  --color-info: var(--palette-teal-dark); --color-info-bg: var(--palette-mint);

  /* tipografia */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-base: 16px;
  --leading-body: 1.6;
  --leading-long: 1.7;

  /* forma e profundidade */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 43, 69, .06);
  --shadow-md: 0 1px 2px rgba(20, 43, 69, .05), 0 6px 20px rgba(20, 43, 69, .06);
  --shadow-lg: 0 20px 50px rgba(20, 43, 69, .16);
  --focus-ring: 0 0 0 3px var(--palette-white), 0 0 0 5px var(--color-focus);

  color-scheme: light;
}