/* ==========================================================================
   Design tokens — single source of truth for colour, type, space, motion.
   Loaded first (render blocking, tiny) so nothing paints unstyled.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- brand ---- */
  --c-blue: #004ea3;
  --c-blue-600: #0a63cc;
  --c-blue-300: #6fa8e6;
  --c-amber: #e67500;
  --c-amber-400: #ff8f2b;

  /* ---- dark surfaces ---- */
  --c-ink: #050b18;
  --c-ink-2: #0b1730;
  --c-ink-3: #122246;

  /* ---- light surfaces ---- */
  --c-surface: #f4f7fc;
  --c-surface-2: #eaf0f9;
  --c-white: #ffffff;

  /* ---- text ---- */
  --c-text: #16202e;
  --c-text-muted: #4a5871;
  --c-text-on-dark: #e8eefb;
  --c-text-on-dark-muted: #a8b6d0;

  /* ---- semantic ---- */
  --c-focus: #ffb35c;
  --c-line: rgba(6, 18, 40, 0.12);
  --c-line-dark: rgba(255, 255, 255, 0.14);

  /* ---- gradients ---- */
  --g-ink: radial-gradient(120% 90% at 12% 0%, #12305e 0%, transparent 55%),
    radial-gradient(90% 80% at 88% 12%, #2a1a06 0%, transparent 60%),
    linear-gradient(168deg, var(--c-ink-2) 0%, var(--c-ink) 62%, #03070f 100%);
  --g-brand: linear-gradient(96deg, var(--c-blue) 0%, var(--c-blue-600) 48%, var(--c-amber) 100%);
  --g-accent-text: linear-gradient(96deg, var(--c-amber) 0%, var(--c-amber-400) 100%);

  /* ---- type ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-display: clamp(2.35rem, 1.35rem + 3.4vw, 4.05rem);
  --fs-hero: clamp(2.6rem, 1.15rem + 4.6vw, 4.75rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3.4vw, 4.1rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem);
  --fs-h3: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
  --fs-h4: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h5: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-h6: clamp(0.95rem, 0.92rem + 0.2vw, 1.1rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --lh-tight: 1.05;
  --lh-heading: 1.14;
  --lh-body: 1.72;
  --ls-display: -0.035em;
  --ls-heading: -0.025em;
  --ls-body: -0.005em;
  --ls-eyebrow: 0.22em;

  /* ---- layout ---- */
  --maxw: 1240px;

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

  /* ---- radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- elevation ---- */
  --sh-1: 0 2px 10px rgba(5, 11, 24, 0.06);
  --sh-2: 0 14px 34px rgba(5, 11, 24, 0.1);
  --sh-3: 0 32px 70px rgba(5, 11, 24, 0.18);
  --sh-glow: 0 18px 44px rgba(0, 78, 163, 0.28);

  /* ---- glass ---- */
  --blur-glass: 16px;
  --glass-dark: rgba(11, 23, 48, 0.62);
  --glass-light: rgba(255, 255, 255, 0.72);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 640ms;

  /* ---- layers ---- */
  --z-world: 0;
  --z-content: 1;
  --z-header: 100;
  --z-progress: 120;
  --z-fab: 1050;
  --z-mobile-cta: 1150;
  --z-curtain: 1500;
  --z-preloader: 1620;
  --z-skip: 1800;
}