/**
 * SSDC design tokens
 * Primitive → Semantic → Components
 * Extracted from Figma Foundations (Home).
 */

:root {
	/* Fonts */
	--font-heading: 'Hanken Grotesk', 'Open Sans', sans-serif;
	--font-body: 'Inter', 'Open Sans', sans-serif;
	--font-accent: 'Instrument Serif', Georgia, serif;

	/* ---------- Primitive colors (79) ---------- */
	--color-white: #ffffff;
	--color-black: #000000;

	/* Primary — brand red */
	--color-primary-50: #fef2f2;
	--color-primary-100: #fce9e9;
	--color-primary-200: #f9c5c6;
	--color-primary-300: #f48b8d;
	--color-primary-400: #ee4a4e;
	--color-primary-500: #e30d11;
	--color-primary-600: #b40b0e;
	--color-primary-700: #8f090b;
	--color-primary-800: #6b0708;
	--color-primary-900: #4a0506;
	--color-primary-950: #2a0303;

	/* Secondary — navy / blue */
	--color-secondary-50: #eaeef8;
	--color-secondary-100: #e5eafc;
	--color-secondary-200: #c5d0f5;
	--color-secondary-300: #8ea5e8;
	--color-secondary-400: #4b6fcf;
	--color-secondary-500: #0b39a1;
	--color-secondary-600: #0a2d82;
	--color-secondary-700: #0a256c;
	--color-secondary-800: #0a1f57;
	--color-secondary-900: #07102c;
	--color-secondary-950: #040816;

	/* Neutral — warm grey */
	--color-neutral-50: #f9f8f6;
	--color-neutral-100: #f3f1ed;
	--color-neutral-200: #e7e3de;
	--color-neutral-300: #d5d1cc;
	--color-neutral-400: #a8a4a0;
	--color-neutral-500: #5b5b66;
	--color-neutral-600: #3f3f48;
	--color-neutral-700: #2a2a32;
	--color-neutral-800: #171417;
	--color-neutral-900: #0f0d0f;
	--color-neutral-950: #080708;

	/* Success */
	--color-success-50: #ecfdf3;
	--color-success-100: #d1fadf;
	--color-success-200: #a6f4c5;
	--color-success-300: #6ce9a6;
	--color-success-400: #32d583;
	--color-success-500: #12b76a;
	--color-success-600: #039855;
	--color-success-700: #027a48;
	--color-success-800: #05603a;
	--color-success-900: #054f31;
	--color-success-950: #053321;

	/* Warning */
	--color-warning-50: #fffaeb;
	--color-warning-100: #fef0c7;
	--color-warning-200: #fedf89;
	--color-warning-300: #fec84b;
	--color-warning-400: #fdb022;
	--color-warning-500: #f79009;
	--color-warning-600: #dc6803;
	--color-warning-700: #b54708;
	--color-warning-800: #93370d;
	--color-warning-900: #7a2e0e;
	--color-warning-950: #4e1d09;

	/* Error */
	--color-error-50: #fef3f2;
	--color-error-100: #fee4e2;
	--color-error-200: #fecdca;
	--color-error-300: #fda29b;
	--color-error-400: #f97066;
	--color-error-500: #f04438;
	--color-error-600: #d92d20;
	--color-error-700: #b42318;
	--color-error-800: #912018;
	--color-error-900: #7a271a;
	--color-error-950: #55160c;

	/* Info */
	--color-info-50: #eff8ff;
	--color-info-100: #d1e9ff;
	--color-info-200: #b2ddff;
	--color-info-300: #84caff;
	--color-info-400: #53b1fd;
	--color-info-500: #2e90fa;
	--color-info-600: #1570ef;
	--color-info-700: #175cd3;
	--color-info-800: #1849a9;
	--color-info-900: #194185;
	--color-info-950: #102a56;

	/* ---------- Semantic colors ---------- */
	/* text-heading — Figma Case 1/2: rgba(2, 6, 23, 1) / #020617 */
	--color-text-heading: #020617;
	/* text-secondary-700 — Figma Case 3 body: rgba(30, 41, 59, 1) / #1e293b */
	--color-text-secondary-700: #1e293b;
	--color-text-body: var(--color-text-secondary-700);
	--color-text-primary: var(--color-text-heading);
	--color-text-secondary: var(--color-text-secondary-700);
	--color-text-muted: var(--color-neutral-500);
	--color-text-subtle: var(--color-neutral-400);
	--color-text-inverse: var(--color-white);
	--color-text-brand: var(--color-primary-500);
	--color-text-on-brand: var(--color-white);
	--color-text-on-navy: var(--color-white);
	--color-text-disabled: var(--color-neutral-400);
	--color-text-success: var(--color-success-700);
	--color-text-warning: var(--color-warning-700);
	--color-text-error: var(--color-error-600);
	--color-text-info: var(--color-info-700);
	--color-text-link: var(--color-secondary-500);

	--color-bg-default: var(--color-white);
	--color-bg-subtle: var(--color-neutral-50);
	--color-bg-muted: #f6f7fb;
	--color-bg-inverse: var(--color-secondary-800);
	--color-bg-brand: var(--color-primary-500);
	--color-bg-navy: var(--color-secondary-800);
	--color-bg-navy-deep: var(--color-secondary-900);
	--color-bg-overlay: rgba(7, 16, 44, 0.55);
	--color-bg-announce: var(--color-secondary-50);

	--color-surface-default: var(--color-white);
	--color-surface-raised: var(--color-white);
	--color-surface-sunken: var(--color-neutral-50);
	--color-surface-brand: var(--color-primary-50);
	--color-surface-navy: var(--color-secondary-800);
	--color-surface-info: var(--color-secondary-50);
	--color-surface-overlay: rgba(255, 255, 255, 0.86);

	--color-border-default: var(--color-neutral-200);
	--color-border-subtle: var(--color-neutral-100);
	--color-border-strong: var(--color-neutral-300);
	--color-border-brand: var(--color-primary-500);
	--color-border-navy: var(--color-secondary-800);
	--color-border-focus: var(--color-secondary-500);
	--color-border-error: var(--color-error-500);
	--color-border-input: #d5d7da;

	--color-icon-primary: var(--color-secondary-800);
	--color-icon-muted: var(--color-neutral-500);
	--color-icon-inverse: var(--color-white);
	--color-icon-brand: var(--color-primary-500);
	--color-icon-info: var(--color-secondary-500);

	--color-action-primary: var(--color-primary-500);
	--color-action-primary-hover: var(--color-primary-600);
	--color-action-secondary: var(--color-secondary-800);
	--color-action-secondary-hover: var(--color-secondary-900);

	--color-button-primary-bg: var(--color-primary-500);
	--color-button-primary-bg-hover: var(--color-primary-600);
	--color-button-primary-text: var(--color-white);
	--color-button-secondary-bg: var(--color-secondary-800);
	--color-button-secondary-bg-hover: var(--color-secondary-900);
	--color-button-secondary-text: var(--color-white);
	--color-button-ghost-bg: var(--color-white);
	--color-button-ghost-border: var(--color-secondary-800);
	--color-button-ghost-text: var(--color-secondary-800);
	--color-button-white-bg: var(--color-white);
	--color-button-white-text: var(--color-primary-500);

	--color-input-bg: var(--color-white);
	--color-input-text: var(--color-neutral-800);
	--color-input-placeholder: var(--color-neutral-400);
	--color-input-border: var(--color-border-input);
	--color-input-border-focus: var(--color-secondary-500);

	--color-link-default: var(--color-secondary-500);
	--color-link-hover: var(--color-secondary-700);
	--color-link-visited: var(--color-secondary-700);

	--color-status-success-bg: var(--color-success-50);
	--color-status-success-text: var(--color-success-700);
	--color-status-success-border: var(--color-success-200);
	--color-status-warning-bg: var(--color-warning-50);
	--color-status-warning-text: var(--color-warning-700);
	--color-status-warning-border: var(--color-warning-200);
	--color-status-error-bg: var(--color-error-50);
	--color-status-error-text: var(--color-error-700);
	--color-status-error-border: var(--color-error-200);
	--color-status-info-bg: var(--color-info-50);
	--color-status-info-text: var(--color-info-700);
	--color-status-info-border: var(--color-info-200);

	--color-interactive-hover: var(--color-secondary-50);
	--color-interactive-pressed: var(--color-secondary-100);
	--color-interactive-focus: var(--color-secondary-500);
	--color-interactive-disabled: var(--color-neutral-300);

	/* ---------- Spacing (base-4, 0–160) ---------- */
	--space-0: 0;
	--space-0-5: 2px;
	--space-1: 4px;
	--space-1-5: 6px;
	--space-2: 8px;
	--space-2-5: 10px;
	--space-3: 12px;
	--space-3-5: 14px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-9: 36px;
	--space-10: 40px;
	--space-12: 48px;
	--space-14: 56px;
	--space-16: 64px;
	--space-18: 72px;
	--space-20: 80px;
	--space-24: 96px;
	--space-28: 112px;
	--space-32: 128px;
	--space-36: 144px;
	--space-40: 160px;

	/* ---------- Radius ---------- */
	--radius-none: 0;
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 20px;
	--radius-3xl: 24px;
	--radius-full: 999px;

	/* ---------- Elevation ---------- */
	--shadow-card: 0 12px 32px rgba(15, 23, 42, 0.06);
	--shadow-medium: 0 16px 40px rgba(15, 23, 42, 0.10);
	--shadow-high: 0 24px 60px rgba(15, 23, 42, 0.16);
	--shadow-brand: 0 10px 24px -12px rgba(227, 13, 17, 0.7);
	--shadow-navy: 0 14px 28px -10px rgba(10, 31, 87, 0.45);
	--shadow-header: 0 8px 24px rgba(10, 31, 87, 0.08);
	--blur-header: 14px;

	/* ---------- Layout (Home Figma inset — sitewide) ---------- */
	/* Desktop 1440: side inset 112px → ~1216 content width */
	--ssdc-page-max: none;
	--ssdc-gutter: var(--space-28); /* 112px */

	/* Home v2 aliases — keep existing class names working */
	--hv2-navy: var(--color-secondary-800);
	--hv2-navy-deep: var(--color-secondary-900);
	--hv2-blue: var(--color-secondary-500);
	--hv2-red: var(--color-primary-500);
	--hv2-red-dark: var(--color-primary-600);
	/* Heading/title ink (Case 1/2) — not brand navy */
	--hv2-heading-color: var(--color-text-heading);
	/* Body/lead copy (Case 3) */
	--hv2-text: var(--color-text-body);
	--hv2-body-color: var(--color-text-body);
	/* Meta/caption only — do not use for body copy */
	--hv2-muted: var(--color-text-muted);
	--hv2-border: var(--color-border-default);
	--hv2-sand: var(--color-bg-subtle);
	--hv2-announce: var(--color-bg-announce);
	--hv2-heading: var(--font-heading);
	--hv2-body: var(--font-body);
}

@media (max-width: 1280px) {
	:root {
		--ssdc-gutter: var(--space-16); /* 64px */
	}
}

@media (max-width: 991px) {
	:root {
		--ssdc-gutter: var(--space-6); /* 24px */
	}
}

@media (max-width: 767px) {
	:root {
		--ssdc-gutter: var(--space-5); /* 20px */
	}
}