/* ==========================================================================
   variables.css — design tokens
   Deep navy + warm cream + soft gold, teal as secondary.
   ========================================================================== */

:root {
  /* ------------------------------ colour ------------------------------ */
  --navy-900: #061426;
  --navy-800: #0b1f33;
  --navy-700: #12304c;
  --navy-600: #1c4166;
  --navy-500: #2d5a85;

  --cream-50: #fdfbf7;
  --cream-100: #faf6ef;
  --cream-200: #f4eee3;
  --cream-300: #ebe2d3;
  --cream-400: #dccfb8;

  --gold-200: #f4e8cd;
  --gold-300: #e8d3a4;
  --gold-400: #d8ba79;
  --gold-500: #c9a45c; /* primary accent */
  --gold-600: #b08b45;
  --gold-700: #8f6f33;
  --gold-800: #7a5a24; /* dark bronze — passes 4.5:1 on cream/white */

  --teal-400: #4a9d95;
  --teal-500: #2f8079;
  --teal-600: #246660;

  /* Aspect ratio of the full-width intro banner artwork, overridden per page
     from the image's intrinsic size (see C.introBanner in components.js). The
     value here is the home hero's real ratio, so a page that forgets to set it
     still gets a correct box instead of a broken layout. */
  --intro-ratio: 2103 / 748;

  --ink-900: #14202c;
  --ink-700: #33465a;
  --ink-500: #465665; /* secondary text: 4.5:1 on cream, gold-tinted headers */
  --ink-400: #516070; /* muted text: 4.5:1 on white, cream and tinted headers */
  --ink-300: #a8b3bd;

  --line: #e5dccb;
  --line-soft: #efe8db;

  --white: #ffffff;
  --success: #276b4d;
  --success-bg: #e8f4ee;
  --warn: #8a5a12;
  --warn-bg: #fbf2e2;
  --danger: #a83232;
  --danger-bg: #fbecec;
  --info: #2b5f8a;
  --info-bg: #e8f1f8;

  /* Semantic */
  --bg: var(--cream-50);
  --bg-alt: var(--cream-100);
  --surface: var(--white);
  --text: var(--ink-900);
  --text-soft: var(--ink-500);
  --text-mute: var(--ink-400);
  --heading: var(--navy-800);
  --brand: var(--gold-500);
  --brand-dark: var(--gold-600);

  /* ------------------------------ type -------------------------------- */
  --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-2xs: 0.75rem; /* 12px */
  --fs-xs: 0.8125rem; /* 13px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-md: 1rem; /* 16px */
  --fs-lg: 1.125rem; /* 18px */
  --fs-xl: 1.375rem; /* 22px */
  --fs-2xl: 1.75rem; /* 28px */
  --fs-3xl: 2.25rem; /* 36px */
  --fs-4xl: 3rem; /* 48px */
  --fs-5xl: 3.75rem; /* 60px */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* ---------------------------- spacing ------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  --section-y: clamp(3.5rem, 7vw, 7rem);
  --container: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

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

  /* ----------------------------- shadow ------------------------------ */
  --sh-xs: 0 1px 2px rgba(11, 31, 51, 0.06);
  --sh-sm: 0 2px 8px rgba(11, 31, 51, 0.07);
  --sh-md: 0 8px 24px rgba(11, 31, 51, 0.09);
  --sh-lg: 0 18px 44px rgba(11, 31, 51, 0.12);
  --sh-gold: 0 8px 24px rgba(201, 164, 92, 0.28);

  /* Layered, "lit from above" shadows used by raised cards and hovers */
  --sh-card: 0 1px 1px rgba(11, 31, 51, 0.04), 0 6px 18px -8px rgba(11, 31, 51, 0.14);
  --sh-card-hover: 0 2px 4px rgba(11, 31, 51, 0.05), 0 22px 44px -16px rgba(11, 31, 51, 0.24);
  --sh-float: 0 24px 60px -20px rgba(11, 31, 51, 0.3);
  --sh-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --ring-gold: 0 0 0 3px rgba(201, 164, 92, 0.32);
  --ring-navy: 0 0 0 3px rgba(11, 31, 51, 0.16);

  /* ---------------------------- gradients ---------------------------- */
  --grad-brand: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 45%, var(--gold-600) 100%);
  --grad-brand-soft: linear-gradient(135deg, var(--gold-200), var(--gold-300));
  --grad-navy: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-700) 100%);
  --grad-navy-deep: radial-gradient(120% 160% at 80% -10%, rgba(47, 128, 121, 0.5) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 70%);
  --grad-gold-glow: radial-gradient(circle, rgba(201, 164, 92, 0.22), transparent 68%);
  --grad-teal-glow: radial-gradient(circle, rgba(47, 128, 121, 0.2), transparent 68%);
  --grad-ribbon: linear-gradient(90deg, var(--gold-500), var(--teal-500) 50%, var(--gold-500));
  --grad-cream: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);

  /* Subtle woven texture: two crossing hairlines, used on navy sections */
  --texture-weave: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03) 0 1px,
      transparent 1px 9px
    ),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 9px);

  /* ----------------------------- motion ------------------------------ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* ----------------------------- layout ------------------------------ */
  --header-h: 72px;
  --announce-h: 38px;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-float: 90;

  /* Focus ring colour, overridden on dark surfaces */
  --focus: var(--gold-500);
}

@media (max-width: 900px) {
  :root {
    --header-h: 62px;
    --announce-h: 34px;
    --fs-5xl: 2.6rem;
    --fs-4xl: 2.2rem;
    --fs-3xl: 1.85rem;
  }
}

@media (max-width: 560px) {
  :root {
    --fs-5xl: 2.1rem;
    --fs-4xl: 1.8rem;
    --fs-3xl: 1.5rem;
    --fs-2xl: 1.3rem;
    --gutter: 1rem;
  }
}