/**
 * Strit design tokens — canonical reference is /design.md (§10).
 * Loaded BEFORE app.css so app.css can resolve every var() against these.
 */

:root {
	/* ── Brand surfaces ──────────────────────────────────────────── */
	--navy: #0b1b3d;
	--navy-2: #1a2a52;
	--navy-3: #34416b;
	--cream: #ece7da;
	--cream-2: #f3efe5;
	--card: #ffffff;
	--ink: #070e22;
	--ink-2: #2f3855;
	--ink-3: #7a7f94;
	--bone: #f0ede6;
	--bone-2: #c9c4b7;
	--bone-3: #9e9986;
	--rule-cream: #d3cec0;
	--rule-navy: rgba(255, 255, 255, 0.16);

	/* ── Status ──────────────────────────────────────────────────── */
	--ok: #3f7a4e;
	--ok-tint: #dde9da;
	--ok-tint-navy: rgba(143, 194, 156, 0.18);
	--warn: #a8731c;
	--warn-tint: #efe0bd;
	--warn-tint-navy: rgba(232, 184, 92, 0.2);
	--danger: #b2382a;
	--danger-tint: #efd2cc;
	--danger-tint-navy: rgba(214, 110, 95, 0.22);

	/* ── Spacing (4px base) ──────────────────────────────────────── */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-7: 32px;
	--s-8: 40px;
	--s-9: 56px;
	--s-10: 72px;
	--s-11: 96px;
	--s-12: 128px;

	/* ── Radii ───────────────────────────────────────────────────── */
	--r-1: 4px;
	--r-2: 10px;
	--r-3: 16px;
	--r-4: 22px;
	--r-pill: 999px;

	/* ── Fonts ───────────────────────────────────────────────────── */
	--font-display: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* ── Motion ──────────────────────────────────────────────────── */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--dur: 180ms;

	/* ──────────────────────────────────────────────────────────────
	   Legacy token bridge — keeps existing page-scoped CSS working
	   while we migrate page-by-page in Phase 3. Each legacy token now
	   points at the closest Strit-brand equivalent.
	   ────────────────────────────────────────────────────────────── */
	--primary: var(--navy);
	--primary-dark: var(--navy-2);
	--primary-light: var(--navy-3);
	--primary-50: var(--cream-2);
	--primary-100: var(--cream);
	--primary-500: var(--navy);
	--primary-600: var(--navy);
	--primary-700: var(--navy-2);

	--secondary: var(--navy);
	--secondary-dark: var(--navy-2);
	--secondary-light: var(--navy-3);
	--secondary-50: var(--cream-2);
	--secondary-100: var(--cream);
	--secondary-500: var(--navy);
	--secondary-600: var(--navy);
	--secondary-700: var(--navy-2);

	--success: var(--ok);
	--success-light: var(--ok-tint);
	--warning: var(--warn);
	--warning-light: var(--warn-tint);
	--danger-light: var(--danger-tint);
	--info: var(--navy);
	--info-light: var(--cream-2);

	--white: var(--card);
	--gray-50: var(--cream);
	--gray-100: var(--cream-2);
	--gray-200: var(--rule-cream);
	--gray-300: var(--rule-cream);
	--gray-400: var(--ink-3);
	--gray-500: var(--ink-3);
	--gray-600: var(--ink-2);
	--gray-700: var(--ink-2);
	--gray-800: var(--ink);
	--gray-900: var(--ink);

	--text-primary: var(--ink);
	--text-secondary: var(--ink-2);
	--text-tertiary: var(--ink-3);
	--text-inverse: var(--bone);

	--bg-primary: var(--cream);
	--bg-secondary: var(--cream-2);
	--bg-tertiary: var(--cream-2);
	--bg-overlay: rgba(7, 14, 34, 0.5);

	--border-primary: var(--rule-cream);
	--border-secondary: var(--rule-cream);
	--border-focus: var(--navy);

	/* No drop shadows in the new system (§4.4). Override legacy shadows to none
	   except --shadow-xl which is reserved for floating menus. */
	--shadow-sm: none;
	--shadow: none;
	--shadow-md: none;
	--shadow-lg: none;
	--shadow-xl: 0 24px 60px -24px rgba(11, 27, 61, 0.35);

	--space-1: var(--s-1);
	--space-2: var(--s-2);
	--space-3: var(--s-3);
	--space-4: var(--s-4);
	--space-5: var(--s-5);
	--space-6: var(--s-6);
	--space-8: var(--s-7);
	--space-10: var(--s-8);
	--space-12: var(--s-9);
	--space-16: var(--s-10);
	--space-20: var(--s-11);

	--radius-sm: var(--r-1);
	--radius: var(--r-1);
	--radius-md: var(--r-2);
	--radius-lg: var(--r-2);
	--radius-xl: var(--r-3);
	--radius-2xl: var(--r-3);
	--radius-full: var(--r-pill);
}

/* ── Typography scale (used inline; no need to alias as vars yet) ── */
/* --type-hero:     88px / 0.95 / 800 / -0.03em / uppercase
   --type-display:  44px / 1.00 / 800 / -0.02em / uppercase
   --type-section:  28px / 1.10 / 700 / -0.015em / uppercase
   --type-subtitle: 22px / 1.30 / 600 / 0
   --type-tag:      20px / 1.20 / 700 / 0
   --type-body-lg:  17px / 1.55 / 400 / 0
   --type-body:     15px / 1.55 / 400 / 0
   --type-body-sm:  13px / 1.50 / 400 / 0
   --type-eyebrow:  12px / 1.20 / 600 / 0.10em / uppercase
   --type-mono:     14px / 1.40 / 500 / 0
   --type-mono-sm:  12px / 1.40 / 500 / 0   */