/* Cascade order for the whole site. Later layers win regardless of specificity. */
@layer reset, base, layout, components, animations, responsive;

:root {
  /* Brand palette */
  --color-ocean-950: #050b24;
  --color-ocean-900: #0a1540;
  --color-ocean-800: #12296b;
  --color-ocean-700: #1e3a8a;
  --color-blue-700: #1d4ed8;
  --color-blue-600: #2563eb;
  --color-blue-500: #3b82f6;
  --color-blue-400: #60a5fa;
  --color-sky-300: #93c5fd;
  --color-sky-200: #bfdbfe;
  --color-sky-100: #dbeafe;
  --color-sky-50: #eff6ff;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-teal-700: #0f766e;
  --color-purple-500: #8b5cf6;
  --color-pink-500: #ec4899;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-red-600: #dc2626;
  --color-red-50: #fef2f2;

  /* Blue-tinted neutrals */
  --color-white: #ffffff;
  --color-light: #f8faff;
  --color-ink-900: #0b1535;
  --color-ink-700: #33415c;
  --color-ink-500: #5b6882;
  --color-ink-300: #a3aec6;
  --color-line: #e3e9f6;
  --color-line-strong: #cbd5ea;

  /* Semantic roles */
  --bg: var(--color-light);
  --surface: var(--color-white);
  --surface-tint: #f1f5ff;
  --text: var(--color-ink-700);
  --text-strong: var(--color-ink-900);
  --text-muted: var(--color-ink-500);
  --text-on-dark: #e6ecff;
  --text-on-dark-muted: #b4c2e6;
  --accent: var(--color-blue-600);
  --accent-strong: var(--color-blue-700);
  --success: var(--color-teal-700);
  --danger: var(--color-red-600);
  --focus: var(--color-blue-600);

  --gradient-ocean: radial-gradient(120% 90% at 85% 10%, #1b3c9e 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, #0f2a7a 0%, transparent 60%),
    linear-gradient(160deg, var(--color-ocean-900) 0%, var(--color-ocean-950) 100%);
  --gradient-sky: radial-gradient(90% 120% at 100% 0%, #dbe8ff 0%, transparent 60%),
    linear-gradient(180deg, #eef4ff 0%, var(--color-light) 100%);
  --gradient-accent: linear-gradient(120deg, var(--color-cyan-400), var(--color-blue-500) 55%, var(--color-purple-500));

  /* Typography */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.3rem + 5vw, 5.25rem);
  --fs-h1: clamp(2.25rem, 1.45rem + 3.4vw, 4.125rem);
  --fs-statement: clamp(1.75rem, 1.1rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --tracking-display: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-mono: 0.02em;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --section-space: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);
  --container: 76rem;
  --panel-inset: clamp(0.5rem, 0.2rem + 1.2vw, 1rem);

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Elevation (blue-tinted, never animated directly) */
  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-sm: 0 1px 2px rgb(30 58 138 / 0.06), 0 6px 16px -6px rgb(30 58 138 / 0.12);
  --shadow-md: 0 2px 4px rgb(30 58 138 / 0.05), 0 16px 36px -12px rgb(30 58 138 / 0.2);
  --shadow-lg: 0 4px 10px rgb(30 58 138 / 0.06), 0 32px 64px -20px rgb(30 58 138 / 0.34);
  --shadow-glow: 0 12px 32px -10px rgb(37 99 235 / 0.6);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-4: 700ms;
  --dur-5: 1000ms;
  --stagger: 90ms;

  /* Stacking */
  --z-raised: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-cursor: 900;
  --z-skip: 1000;

  /* Mobile-first header metrics; desktop values live in responsive.css */
  --header-h: 4.25rem;
  --header-scale: 0.882;
  --header-shift: -0.25rem;
  --logo-h: 2.25rem;

  color-scheme: light;
}