/* Tokens del sistema de diseño (ver DESIGN.md). Los --brand-* se inyectan en línea desde el servidor. */
:root {
  --gray-0: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  --sev-critica: #b91c1c; --sev-critica-bg: #fee2e2;
  --sev-alta: #c2410c;    --sev-alta-bg: #ffedd5;
  --sev-media: #b45309;   --sev-media-bg: #fef3c7;
  --sev-baja: #1d4ed8;    --sev-baja-bg: #dbeafe;
  --sev-info: #475569;    --sev-info-bg: #f1f5f9;
  --ok: #15803d;          --ok-bg: #dcfce7;
  --warn: #b45309;        --warn-bg: #fef3c7;
  --bad: #b91c1c;         --bad-bg: #fee2e2;

  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-2: var(--gray-100);
  --surface-3: var(--gray-200);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-400);
  --link: var(--brand-700);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 12px; --lh-xs: 16px;
  --text-sm: 13.5px; --lh-sm: 20px;
  --text-base: 15px; --lh-base: 24px;
  --text-lg: 17px; --lh-lg: 26px;
  --text-xl: 20px; --lh-xl: 28px;
  --text-2xl: 24px; --lh-2xl: 32px;
  --text-3xl: 30px; --lh-3xl: 36px;
  --text-4xl: 38px; --lh-4xl: 44px;
  --text-5xl: 52px; --lh-5xl: 56px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgb(15 23 42 / .06);
  --shadow-sm: 0 1px 3px rgb(15 23 42 / .08), 0 1px 2px rgb(15 23 42 / .04);
  --shadow-md: 0 6px 16px -4px rgb(15 23 42 / .12);
  --shadow-lg: 0 24px 48px -12px rgb(15 23 42 / .22);
  --ring: 0 0 0 3px var(--brand-200);

  --sidebar-w: 240px;
  --content-max: 1200px;
}

[data-theme="dark"] {
  --bg: var(--gray-950);
  --surface: var(--gray-900);
  --surface-2: var(--gray-800);
  --surface-3: var(--gray-700);
  --border: var(--gray-800);
  --border-strong: var(--gray-700);
  --text: var(--gray-100);
  --text-muted: var(--gray-400);
  --text-faint: var(--gray-500);
  --link: var(--brand-300);
  --sev-critica: #fca5a5; --sev-critica-bg: rgb(185 28 28 / .22);
  --sev-alta: #fdba74;    --sev-alta-bg: rgb(194 65 12 / .22);
  --sev-media: #fcd34d;   --sev-media-bg: rgb(180 83 9 / .22);
  --sev-baja: #93c5fd;    --sev-baja-bg: rgb(29 78 216 / .25);
  --sev-info: #cbd5e1;    --sev-info-bg: rgb(71 85 105 / .35);
  --ok: #86efac;          --ok-bg: rgb(21 128 61 / .25);
  --warn: #fcd34d;        --warn-bg: rgb(180 83 9 / .22);
  --bad: #fca5a5;         --bad-bg: rgb(185 28 28 / .22);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .5);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / .6);
  --ring: 0 0 0 3px var(--brand-800);
}