/* ============================================================
   SAFENTRA DESIGN SYSTEM — TOKENS
   Single source of truth: color, type, space, elevation, motion.
   Every component consumes these variables — never hard-code.
   ============================================================ */

:root{
  /* ---------- Typography ---------- */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;

  --text-2xs:10.5px; --text-xs:11.5px; --text-sm:12.5px; --text-md:13.5px;
  --text-base:14px;  --text-lg:16px;   --text-xl:18px;   --text-2xl:20px;
  --text-3xl:24px;   --text-4xl:30px;  --text-5xl:36px;

  --lh-tight:1.2; --lh-snug:1.35; --lh-base:1.5; --lh-relaxed:1.65;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---------- Brand ramps ---------- */
  --blue-25:#F5F8FF; --blue-50:#EAF1FF; --blue-100:#D8E5FF; --blue-200:#B3CCFF;
  --blue-300:#85ABFF; --blue-400:#4F84FF; --blue-500:#0F62FE; --blue-600:#0B4FCE;
  --blue-700:#083EA3; --blue-800:#062E78; --blue-900:#041E4F;
  --teal-25:#F2FCFA; --teal-50:#E6FAF7; --teal-100:#C2F2EC; --teal-200:#8FE3D9;
  --teal-300:#54CFC1; --teal-400:#24B5A6; --teal-500:#0E9C8E; --teal-600:#0B7D73;
  --teal-700:#086259; --teal-800:#05463F;
  --navy-950:#04101F; --navy-900:#061A33; --navy-800:#0A2540; --navy-700:#123A63;

  --gray-0:#FFFFFF; --gray-25:#FBFCFE; --gray-50:#F6F8FB; --gray-100:#EEF2F7;
  --gray-200:#E2E8F0; --gray-300:#CBD5E1; --gray-400:#94A3B8; --gray-500:#64748B;
  --gray-600:#475569; --gray-700:#334155; --gray-800:#1E293B; --gray-900:#0F172A;

  --green-50:#ECF9F0; --green-100:#D1F0DC; --green-500:#22A45B; --green-600:#15803D; --green-700:#115E30;
  --amber-50:#FFF8EB; --amber-100:#FDEBC8; --amber-400:#F5A623; --amber-500:#E8930C; --amber-600:#B45309; --amber-700:#8A4006;
  --red-25:#FEF7F7; --red-50:#FEF1F1; --red-100:#FCDDDD; --red-400:#F16464; --red-500:#E5484D; --red-600:#DC2626; --red-700:#B91C1C;

  /* ---------- Semantic mapping ---------- */
  --color-bg:var(--gray-50);
  --color-surface:var(--gray-0);
  --color-surface-2:var(--gray-25);
  --color-surface-3:var(--gray-100);
  --color-hover:var(--gray-100);
  --color-active:var(--blue-50);
  --color-border:#E3E8F0;
  --color-border-strong:var(--gray-300);
  --color-text:var(--gray-900);
  --color-text-2:var(--gray-600);
  --color-text-3:var(--gray-500);
  --color-on-primary:#FFFFFF;

  --color-primary:var(--blue-500);
  --color-primary-hover:var(--blue-600);
  --color-primary-active:var(--blue-700);
  --color-primary-soft:var(--blue-50);
  --color-primary-soft-2:var(--blue-100);
  --color-accent:var(--teal-500);
  --color-accent-hover:var(--teal-600);
  --color-accent-soft:var(--teal-50);

  --color-success:var(--green-600); --color-success-fg:var(--green-700); --color-success-soft:var(--green-50);
  --color-warning:var(--amber-600); --color-warning-fg:var(--amber-700); --color-warning-soft:var(--amber-50);
  --color-danger:var(--red-600);    --color-danger-fg:var(--red-700);    --color-danger-soft:var(--red-50);
  --color-info:var(--blue-600);     --color-info-fg:var(--blue-700);     --color-info-solid-bg:var(--blue-50);

  --ring:0 0 0 3px rgba(15,98,254,.16);

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ---------- Radius ---------- */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;

  /* ---------- Elevation ---------- */
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 8px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.05);
  --shadow-lg:0 12px 16px -4px rgba(16,24,40,.10),0 4px 6px -2px rgba(16,24,40,.05);
  --shadow-xl:0 20px 28px -6px rgba(16,24,40,.14),0 8px 10px -4px rgba(16,24,40,.06);
  --shadow-pop:0 10px 28px -6px rgba(16,24,40,.18),0 4px 10px -4px rgba(16,24,40,.08);

  /* ---------- Layout metrics ---------- */
  --header-h:60px;
  --sidebar-w:264px;
  --sidebar-rail:72px;
  --footer-h:44px;
  --page-max:1440px;
  --drawer-w:400px;
  --drawer-w-lg:480px;
  --ctl-h:38px;
  --ctl-h-sm:32px;
  --ctl-h-lg:44px;

  /* ---------- Z scale ---------- */
  --z-sticky:20; --z-header:40; --z-sidebar:41;
  --z-scrim:60; --z-drawer:70; --z-overlay:80;
  --z-modal:90; --z-toast:100; --z-tip:110;

  /* ---------- Motion ---------- */
  --t-fast:.12s; --t:.18s; --t-slow:.28s;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Dark theme ---------- */
[data-theme="dark"]{
  --color-bg:#0A1322;
  --color-surface:#101D33;
  --color-surface-2:#14243E;
  --color-surface-3:#1A2C4A;
  --color-hover:#18294A;
  --color-active:rgba(79,132,255,.16);
  --color-border:#21344F;
  --color-border-strong:#304463;
  --color-text:#E6EDF7;
  --color-text-2:#A9B8CD;
  --color-text-3:#7E93B1;

  --color-primary:#4F84FF;
  --color-primary-hover:#6E97FB;
  --color-primary-active:#85ABFF;
  --color-primary-soft:rgba(79,132,255,.14);
  --color-primary-soft-2:rgba(79,132,255,.22);
  --color-accent:#24B5A6;
  --color-accent-soft:rgba(36,181,166,.14);

  --color-success:#34C172; --color-success-fg:#5BD693; --color-success-soft:rgba(52,193,114,.14);
  --color-warning:#F0A93F; --color-warning-fg:#F5BE63; --color-warning-soft:rgba(240,169,63,.14);
  --color-danger:#F16464;  --color-danger-fg:#F78B8B;  --color-danger-soft:rgba(241,100,100,.14);
  --color-info:#6E97FB;    --color-info-fg:#95B3FC;    --color-info-solid-bg:rgba(79,132,255,.16);

  --ring:0 0 0 3px rgba(79,132,255,.28);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 8px -2px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.4);
  --shadow-lg:0 12px 16px -4px rgba(0,0,0,.55),0 4px 6px -2px rgba(0,0,0,.4);
  --shadow-xl:0 20px 28px -6px rgba(0,0,0,.6),0 8px 10px -4px rgba(0,0,0,.45);
  --shadow-pop:0 10px 28px -6px rgba(0,0,0,.6),0 4px 10px -4px rgba(0,0,0,.45);
}