/* ==========================================================================
   Navayuga — Design tokens
   Palette derived from the NCSC emblem: navy ring · laurel gold · sunset
   coral · sea teal. Warm ivory ground so the gold reads as gold, not yellow.
   ========================================================================== */
:root {
  /* Brand */
  --navy-950: #0a1236;
  --navy-900: #0f1b4d;
  --navy-800: #142566;
  --navy-700: #1b327f;
  --navy-600: #24439e;
  --navy-100: #e6eaf7;
  --navy-50: #f2f4fb;

  --gold-700: #8f6a12;
  --gold-600: #b8891c;
  --gold-500: #d3a233;
  --gold-400: #e5b94a;
  --gold-300: #f2d27a;
  --gold-100: #fbf1d3;

  --coral-600: #d3552f;
  --coral-500: #e8683f;
  --coral-100: #fde7de;
  --teal-600: #157f74;
  --teal-500: #1e9e8f;
  --teal-100: #d9f2ee;

  /* Neutrals (warm) */
  --ivory: #fbf9f4;
  --sand: #f3efe6;
  --sand-dark: #e9e3d6;
  --white: #ffffff;
  --ink: #10162e;
  --slate: #465070;
  --muted: #6f7791;
  --line: #e4e0d5;
  --line-strong: #cfc9ba;
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Semantic */
  --bg: var(--ivory);
  --surface: var(--white);
  --surface-2: var(--sand);
  --text: var(--ink);
  --text-2: var(--slate);
  --text-3: var(--muted);
  --on-dark: rgba(255, 255, 255, 0.94);
  --on-dark-2: rgba(255, 255, 255, 0.7);
  --on-dark-3: rgba(255, 255, 255, 0.5);
  --brand: var(--navy-800);
  --accent: var(--gold-500);
  --focus: 0 0 0 3px rgba(211, 162, 51, 0.45);

  /* Gradients */
  --grad-navy: linear-gradient(160deg, #142566 0%, #0f1b4d 55%, #0a1236 100%);
  --grad-gold: linear-gradient(135deg, #f2d27a 0%, #d3a233 48%, #b8891c 100%);
  --grad-gold-text: linear-gradient(100deg, #f5dd8f 0%, #e5b94a 50%, #d3a233 100%);
  --grad-sunset: linear-gradient(135deg, #e8683f 0%, #e5b94a 100%);
  --grad-sea: linear-gradient(135deg, #1e9e8f 0%, #24439e 100%);

  /* Type */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-2xs: 0.72rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --fs-md: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  --fs-lg: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --fs-xl: clamp(1.8rem, 1.45rem + 1.6vw, 2.6rem);
  --fs-2xl: clamp(2.3rem, 1.7rem + 2.8vw, 3.8rem);
  --fs-3xl: clamp(2.8rem, 1.9rem + 4.6vw, 5.4rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;
  --track-caps: 0.16em;

  /* Space & layout */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.8rem + 2.5vw, 3rem);
  --header-h: 132px;      /* masthead: 108px emblem + 12px above and below */
  --bar-compact: 80px;    /* the bar once the reader has scrolled */
  --mark-compact: 60px;
  --size-compact: 1.25rem;
  --topbar-h: 38px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(16, 22, 46, 0.05);
  --sh-sm: 0 2px 8px rgba(16, 22, 46, 0.06), 0 1px 2px rgba(16, 22, 46, 0.04);
  --sh-md: 0 12px 32px -8px rgba(16, 22, 46, 0.14), 0 2px 6px rgba(16, 22, 46, 0.05);
  --sh-lg: 0 32px 64px -20px rgba(10, 18, 54, 0.32), 0 8px 20px -8px rgba(10, 18, 54, 0.12);
  --sh-gold: 0 14px 34px -10px rgba(211, 162, 51, 0.55);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  --t-slow: 0.7s;
}