/*
 * Tokens visuais: fonte única dos valores (ADR 0011). Papéis, contraste e uso de cada um:
 * docs/DESIGN.md. Usado pelo painel (tema do Tailwind) e copiado para o site no build.
 * Tema claro em :root; escuro só por prefers-color-scheme (sem seletor manual no MVP).
 */
:root {
  color-scheme: light;

  --color-bg: #f6f6f3;
  --color-surface: #ffffff;
  --color-surface-alt: #ecede8;
  --color-text: #1b1f24;
  --color-muted: #596069;
  --color-primary: #1d5c86;
  --color-on-primary: #ffffff;
  --color-danger: #b3261e;
  --color-on-danger: #ffffff;
  --color-success: #1d7240;
  --color-warning: #8a5a00;
  --color-border: #858c95;
  --color-focus: #1d5c86;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --text-xs: 12px;
  --text-xs--line-height: 16px;
  --text-sm: 14px;
  --text-sm--line-height: 20px;
  --text-base: 16px;
  --text-base--line-height: 24px;
  --text-lg: 20px;
  --text-lg--line-height: 28px;
  --text-xl: 24px;
  --text-xl--line-height: 32px;
  --text-2xl: 36px;
  --text-2xl--line-height: 44px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.08);

  --touch-target: 44px;

  --width-form: 400px;
  --width-content: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-bg: #111316;
    --color-surface: #1a1d21;
    --color-surface-alt: #24282d;
    --color-text: #e7e9ec;
    --color-muted: #a2a9b2;
    --color-primary: #7ab8e4;
    --color-on-primary: #0c1b27;
    --color-danger: #f2948c;
    --color-on-danger: #2a0d0a;
    --color-success: #74c893;
    --color-warning: #e5b455;
    --color-border: #717982;
    --color-focus: #9ccbee;
    --shadow-1: none;
  }
}