/* Tokens do design system (.context/design-system.md) — v2 (P-008).
   ÚNICA fonte de cor/tipo/espaço/densidade. Componente nenhum usa hex solto.

   Duas camadas:
   1. PRIMITIVOS (rampa neutra, marca, sinais) — existem só para definir a camada 2.
   2. SEMÂNTICOS (superfície, texto, borda, densidade) — é o que o componente usa.

   Regra travada por teste (P-009): `.module.css` não pode conter hex, rgb()
   nem px fora da escala, e não pode consumir primitivo direto. */

:root {
  /* ══ 1. PRIMITIVOS ══════════════════════════════════════════════
     Não use no componente. Use os semânticos da seção 2. */

  /* Rampa neutra — base de tudo que não é sinal */
  --gray-50: #f7f9fb;
  --gray-100: #eef2f6;
  --gray-200: #dfe6ed;
  --gray-300: #cdd7e1;
  --gray-400: #a9b6c4;
  --gray-500: #7d8b9a;
  --gray-600: #5b6b7b;
  --gray-700: #3f4d5c;
  --gray-800: #2a3644;
  --gray-900: #1c2733;
  --white: #ffffff;

  /* Marca institucional */
  --blue-700: #0e5a8a;
  --blue-800: #0a4468;
  --blue-900: #073350;
  --blue-50: #e3eef6;
  --teal-600: #1a9e8f;

  /* Sinais de estado */
  --red-600: #b23a2b;
  --red-50: #f8e6e3;
  --amber-700: #9c6612;
  --amber-50: #f7eedd;
  --green-600: #2f7d4f;
  --green-50: #e4f1e9;

  /* ══ 2. SEMÂNTICOS ══════════════════════════════════════════════ */

  /* Marca */
  --color-primary: var(--blue-700);
  --color-primary-dark: var(--blue-800);
  --color-primary-darker: var(--blue-900);
  --color-primary-soft: var(--blue-50);
  --color-accent: var(--teal-600);

  /* Sinais */
  --color-danger: var(--red-600);
  --color-danger-soft: var(--red-50);
  --color-warning: var(--amber-700);
  --color-warning-soft: var(--amber-50);
  --color-success: var(--green-600);
  --color-success-soft: var(--green-50);
  --color-info: var(--blue-700);
  --color-info-soft: var(--blue-50);

  /* Superfícies */
  --color-bg: var(--gray-100);
  --color-surface: var(--white);
  --color-surface-sunken: var(--gray-50);
  --color-surface-hover: var(--gray-50);
  --color-surface-active: var(--gray-100);
  --color-surface-selected: var(--color-primary-soft);
  --color-surface-disabled: var(--gray-100);
  --color-scrim: rgb(28 39 51 / 0.45);

  /* Superfície invertida (SideNav) */
  --color-surface-inverse: var(--blue-800);
  --color-surface-inverse-hover: rgb(255 255 255 / 0.08);
  --color-surface-inverse-selected: rgb(255 255 255 / 0.16);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: #c3d5e2;
  --color-border-inverse: rgb(255 255 255 / 0.12);

  /* Bordas */
  --color-border: var(--gray-300);
  --color-border-subtle: var(--gray-200);
  --color-border-strong: var(--gray-400);
  --border-w: 1px;

  /* Texto */
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-text-faint: var(--gray-500);
  --color-text-on-primary: var(--white);

  /* ══ Tipografia ══ */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --text-xs: 0.75rem;
  --leading-xs: 1.1rem;
  --text-sm: 0.8125rem;
  --leading-sm: 1.25rem;
  --text-base: 0.875rem; /* base da UI densa */
  --leading-base: 1.375rem;
  --text-md: 1rem; /* base de leitura / landing */
  /* Texto de campo digitável (P-285). Igual à base no desktop; no celular vai a
     16px, porque o Safari do iPhone **dá zoom** ao focar campo com fonte menor
     — e o operador teria de desfazer o zoom a cada campo do laudo. */
  --text-campo: var(--text-base);
  --leading-md: 1.5rem;
  --text-lg: 1.125rem;
  --leading-lg: 1.625rem;
  --text-xl: 1.375rem;
  --leading-xl: 1.875rem;
  --text-2xl: 1.75rem;
  --leading-2xl: 2.25rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600; /* teto: nada de 700+ na UI */
  --tracking-tight: -0.011em;
  --tracking-caps: 0.06em;

  /* ══ Espaço (escala de 4px, sem exceção) ══ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ══ Densidade — altura é token, não improviso ══ */
  --control-h-sm: 28px;
  --control-h: 34px;
  --control-h-lg: 40px;
  --row-h-compact: 32px;
  --row-h: 40px;
  --sidenav-w: 232px;
  --topbar-h: 52px;
  --content-max: 1440px;

  /* ══ Forma ══ */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Sombra SÓ para o que flutua. Card estático se separa por borda. */
  --shadow-overlay:
    0 8px 24px rgb(16 30 44 / 0.14),
    0 1px 3px rgb(16 30 44 / 0.08);
  --shadow-sticky: 0 1px 0 var(--color-border);

  /* ══ Foco — acessibilidade é requisito, não polimento ══ */
  --focus-ring:
    0 0 0 2px var(--color-surface),
    0 0 0 4px rgb(14 90 138 / 0.55);
  --focus-ring-inverse:
    0 0 0 2px var(--color-surface-inverse),
    0 0 0 4px rgb(255 255 255 / 0.7);

  /* ══ Motion ══ */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 90ms;
  --dur: 140ms;

  /* ══ Camadas ══ */
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* ══ Celular (P-285 · ADR-0026) ══
   Alvo de toque de 44px (o mínimo confortável para o dedo; 34px é do cursor)
   e campo com fonte de 16px. Por token, e não por tela: todo botão, seta,
   select e aba passa a ter o tamanho certo sem ninguém lembrar. */
@media (max-width: 640px) {
  :root {
    --control-h-sm: 36px;
    --control-h: 44px;
    --control-h-lg: 48px;
    --text-campo: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}