/*
 * Design tokens — CSS custom properties extracted from the SPA's
 * app/src/styles/theme.css (see plan/output/design-tokens.md).
 *
 * Only the light palette is ported: the SPA scaffolds a .dark palette but
 * never ships a toggle anywhere in the app (no useState/context/localStorage
 * key controls a `.dark` class). Porting unused dead code isn't a faithful
 * port, it's scope creep — see THEME-NOTES.md.
 *
 * Spacing / shadows / breakpoints are NOT custom in the SPA — it uses
 * Tailwind v4 stock defaults for all of those, so there is nothing to
 * extract for them; main.css uses plain rem-based values matching Tailwind's
 * default scale directly where needed.
 */

:root {
	/* Color palette — updated-design/src/styles/theme.css (Modernize refresh).
	   Accent shifted from the old pale blue to a vibrant teal (#0EA5B0);
	   navy primary deepened; page background is now an off-white (#F5F7FA). */
	--background: #f5f7fa;
	--foreground: #0f1f3d;
	--card: #ffffff;
	--card-foreground: #0f1f3d;
	--popover: #ffffff;
	--popover-foreground: #0f1f3d;
	--primary: #0f3460;
	--primary-foreground: #ffffff;
	--secondary: #e8f0fe;
	--secondary-foreground: #0f3460;
	--muted: #eef1f7;
	--muted-foreground: #5a6b8a;
	--accent: #0ea5b0;
	--accent-foreground: #ffffff;
	--destructive: #d4183d;
	--destructive-foreground: #ffffff;
	--border: rgba(15, 31, 61, 0.1);
	--input: transparent;
	--input-background: #ffffff;
	--switch-background: #cbced4;
	--ring: #0ea5b0;

	/* Navy hero gradient + radial glow (used across every page hero). */
	--hero-gradient: linear-gradient(135deg, #0f3460 0%, #0a2545 100%);
	--hero-gradient-3: linear-gradient(135deg, #0f3460 0%, #0a2545 50%, #0c2d52 100%);
	--hero-glow: radial-gradient(circle at 20% 50%, #0ea5b0 0%, transparent 50%), radial-gradient(circle at 80% 20%, #1a4a7a 0%, transparent 40%);

	--chart-1: #0f3460;
	--chart-2: #0ea5b0;
	--chart-3: #f59e0b;
	--chart-4: #8b5cf6;
	--chart-5: #ec4899;

	/* Non-brand utility colors used ad hoc in the SPA (star ratings, soft
	   status badges, success/error states) — tokenized here so main.css has
	   no raw hex outside this file. Soft badges pair a tinted bg with a
	   saturated text/border color, matching the refreshed pill treatment. */
	--star: #f59e0b;
	--success: #16a34a;
	--success-bg: #f0fdf4;
	--success-border: #bbf7d0;
	--success-text: #15803d;
	--info: #1d4ed8;
	--info-bg: #eff6ff;
	--info-border: #bfdbfe;
	--info-text: #1d4ed8;
	--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
	--accent-border: color-mix(in srgb, var(--accent) 30%, transparent);
	--amber-bg: #fffbeb;
	--amber-border: #fde68a;
	--amber-text: #b45309;
	--sponsored: #facc15;
	--sponsored-foreground: #713f12;

	/* Typography — Outfit for display/headings/brand, Inter for body,
	   DM Mono for the small "STEP 01" style labels. */
	--font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--font-display: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
	--font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
	--font-size: 16px;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	/* Tailwind v4 default type scale (theme.css references var(--text-*)
	   which are Tailwind v4 built-ins, not custom — reproduced here so
	   plain CSS has the same numbers without running Tailwind). */
	--text-xs: 0.75rem;    /* 12px */
	--text-sm: 0.875rem;   /* 14px */
	--text-base: 1rem;     /* 16px */
	--text-lg: 1.125rem;   /* 18px */
	--text-xl: 1.25rem;    /* 20px */
	--text-2xl: 1.5rem;    /* 24px */
	--text-3xl: 1.875rem;  /* 30px */
	--text-4xl: 2.25rem;   /* 36px */
	--text-5xl: 3rem;      /* 48px */

	/* Radius — theme.css sets --radius: 0.75rem in the refresh; the SPA leans
	   heavily on rounded-xl (0.75rem) inputs/buttons and rounded-2xl (1rem)
	   cards/modals. Scale reproduced here. */
	--radius: 0.75rem;       /* 12px */
	--radius-sm: 0.5rem;     /* 8px  */
	--radius-md: 0.625rem;   /* 10px */
	--radius-lg: 0.75rem;    /* 12px */
	--radius-xl: 1rem;       /* 16px — rounded-2xl cards/modals */
	--radius-full: 9999px;

	/* Tailwind v4 default breakpoints (used only as documentation — plain
	   CSS media queries below hardcode the pixel values since custom
	   properties can't be used inside @media conditions). */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;

	/* Shadows — Tailwind v4 stock shadow/shadow-md/shadow-lg values */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Page container width — max-w-7xl is the dominant container in the SPA */
	--container-7xl: 80rem;  /* 1280px */
	--container-5xl: 64rem;
	--container-4xl: 56rem;
	--container-3xl: 48rem;
	--container-2xl: 42rem;
}