/* ==========================================================================
   Design tokens — the only place color, type and spacing values are defined.
   Change a value here and it propagates across the entire site.
   ========================================================================== */
:root {
  /* Color — brand */
  --color-navy: #0F2A47;
  --color-navy-700: #16385D;
  --color-navy-900: #0A1D33;
  --color-charcoal: #1F2937;
  --color-gold: #C9A227;
  --color-gold-600: #B5911F;
  --color-gold-800: #8A6E17;

  /* Color — neutrals */
  --color-bg: #F8F9FA;
  --color-white: #FFFFFF;
  --color-border: #E5E7EA;
  --color-gray: #6B7280;
  --color-gray-100: #F1F2F4;

  /* Color — semantic */
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-gray);
  --color-heading: var(--color-navy);
  --color-accent: var(--color-gold);
  --color-accent-hover: var(--color-gold-600);
  --color-link: var(--color-navy);
  --color-success: #1E7A4C;
  --color-error: #B3261E;
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-bg);

  /* Typography */
  --font-heading: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: clamp(2.1rem, 1.6rem + 2vw, 3.2rem);
  --lh-h1: 1.1;
  --fs-h2: clamp(1.65rem, 1.4rem + 1.1vw, 2.25rem);
  --lh-h2: 1.18;
  --fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  --lh-h3: 1.25;
  --fs-h4: 1.375rem;
  --lh-h4: 1.35;
  --fs-h5: 1.125rem;
  --lh-h5: 1.4;
  --fs-h6: 1rem;
  --lh-h6: 1.4;
  --fs-body: 1rem;
  --lh-body: 1.65;
  --fs-lead: 1.1875rem;
  --lh-lead: 1.6;
  --fs-small: 0.875rem;
  --lh-small: 1.5;
  --fs-micro: 0.75rem;
  --lh-micro: 1.4;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Spacing scale (8px 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: 6.5rem;

  /* Layout */
  --container-width: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --border-width: 1px;

  /* Elevation — used sparingly, on interactive surfaces only */
  --shadow-sm: 0 1px 2px rgba(15, 42, 71, 0.06);
  --shadow-md: 0 6px 20px rgba(15, 42, 71, 0.10);
  --shadow-lg: 0 16px 40px rgba(15, 42, 71, 0.16);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* Z-index scale */
  --z-header: 100;
  --z-dropdown: 110;
  --z-fab: 120;
  --z-cookie: 130;
  --z-popup: 140;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}