/*
 * Polar Tint — Design Tokens
 *
 * Source of truth for color, typography, spacing, radius, shadow, motion, and
 * breakpoints. Mirrored from planning/07-design-system.md.
 *
 * Locked brand tokens (do not change without Sean's approval):
 *   --color-primary-navy: #164992
 *   --color-polar-blue:   #2ea3f2
 *   --color-ink:          #020824
 *   Font family: Barlow
 *
 * Anything outside :root should consume these variables — never hard-code values.
 */

:root {
	/* === Brand color tokens (LOCKED) ============================== */
	--color-primary-navy: #164992;
	--color-polar-blue:   #2ea3f2;
	--color-ink:          #020824;
	--color-navy-mid:     #004d90;
	--color-ice:          #eff9ff;
	--color-gold:         #fcc640;
	--color-body:         #333333;

	/* === Extended palette ========================================= */
	--color-white:     #ffffff;
	--color-off-white: #f7fafc;

	--color-slate-50:  #f8fafc;
	--color-slate-100: #e2e8f0;
	--color-slate-200: #cbd5e0;
	--color-slate-300: #94a3b8;
	--color-slate-500: #64748b;
	--color-slate-700: #334155;
	--color-slate-900: #0f172a;

	--color-success: #10b981;
	--color-warning: #f59e0b;
	--color-error:   #ef4444;

	/* === Brand gradients ========================================== */
	--gradient-hero:        linear-gradient(180deg, #020824 0%, #004d90 100%);
	--gradient-hero-radial: radial-gradient(circle at 30% 20%, #2ea3f2 0%, #164992 50%, #020824 100%);
	--gradient-accent:      linear-gradient(135deg, #2ea3f2 0%, #164992 100%);
	--gradient-ice:         linear-gradient(180deg, #ffffff 0%, #eff9ff 100%);

	/* === Typography =============================================== */
	--font-family-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-family-heading: var(--font-family-body);

	--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 */
	--text-6xl:  3.75rem;   /* 60px */
	--text-7xl:  4.5rem;    /* 72px */

	--leading-tight:  1.15;
	--leading-snug:   1.3;
	--leading-normal: 1.6;
	--leading-loose:  1.8;

	--weight-regular:    400;
	--weight-medium:     500;
	--weight-bold:       700;
	--weight-extrabold:  800;

	--tracking-tight:  -0.02em;
	--tracking-normal:  0;
	--tracking-wide:    0.04em;

	/* === Spacing scale (4px grid) ================================= */
	--space-0:  0;
	--space-1:  0.25rem;  /* 4px */
	--space-2:  0.5rem;   /* 8px */
	--space-3:  0.75rem;  /* 12px */
	--space-4:  1rem;     /* 16px */
	--space-5:  1.25rem;  /* 20px */
	--space-6:  1.5rem;   /* 24px */
	--space-8:  2rem;     /* 32px */
	--space-10: 2.5rem;   /* 40px */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */
	--space-20: 5rem;     /* 80px */
	--space-24: 6rem;     /* 96px */
	--space-32: 8rem;     /* 128px */

	/* === Border radius (no sharp edges — locked brand rule) ======= */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   14px;
	--radius-xl:   20px;
	--radius-2xl:  28px;
	--radius-pill: 9999px;

	/* === Shadows (navy-ink tint, on-brand) ======================== */
	--shadow-sm:   0 1px 2px 0 rgb(2 8 36 / 0.05);
	--shadow-md:   0 4px 12px -2px rgb(2 8 36 / 0.08), 0 2px 4px -1px rgb(2 8 36 / 0.04);
	--shadow-lg:   0 12px 24px -6px rgb(2 8 36 / 0.12), 0 4px 8px -2px rgb(2 8 36 / 0.06);
	--shadow-xl:   0 24px 48px -12px rgb(2 8 36 / 0.18);
	--shadow-hero: 0 32px 64px -16px rgb(22 73 146 / 0.25);
	--shadow-inset: inset 0 2px 4px 0 rgb(2 8 36 / 0.05);

	/* === Motion =================================================== */
	--duration-instant: 100ms;
	--duration-fast:    150ms;
	--duration-base:    200ms;
	--duration-slow:    300ms;
	--duration-slower:  500ms;

	--easing-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* === Layout =================================================== */
	--container-max:        1280px;
	--container-narrow-max: 880px;
	--container-padding:    var(--space-6);

	/* === Z-index scale ============================================ */
	--z-base:    1;
	--z-sticky:  100;
	--z-overlay: 500;
	--z-modal:   1000;
	--z-toast:   2000;
}

/* === Breakpoint reference (CSS custom properties don't power @media,
 * but kept here for reference and JS consumption via getComputedStyle):
 *   --bp-sm:  640px;
 *   --bp-md:  768px;
 *   --bp-lg:  1024px;
 *   --bp-xl:  1280px;
 *   --bp-2xl: 1536px;
 */

/* === Respect prefers-reduced-motion =========================== */
@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-instant: 0ms;
		--duration-fast:    0ms;
		--duration-base:    0ms;
		--duration-slow:    0ms;
		--duration-slower:  0ms;
	}
}