/* ==========================================================================
   Design tokens — Wayfare Journeys
   Colours, typography, spacing, radius, shadow and motion live here so every
   component pulls from one source of truth.
   ========================================================================== */

:root {
  /* Brand palette */
  --c-ivory: #F7F8F5;
  --c-navy: #142D3A;
  --c-navy-800: #1d3a49;
  --c-navy-700: #2a4b5b;
  --c-teal: #247C78;
  --c-teal-600: #1d6764;
  --c-teal-700: #175553;
  --c-teal-100: #d3e8e5;
  --c-teal-50: #eaf4f2;
  --c-sand: #D8B77A;
  --c-sand-600: #b8945a;
  --c-sand-100: #f3e9d6;
  --c-sand-50: #faf5eb;
  --c-grey: #E7ECE8;
  --c-white: #ffffff;

  /* Semantic */
  --c-bg: var(--c-ivory);
  --c-surface: var(--c-white);
  --c-ink: var(--c-navy);
  --c-ink-soft: #3c5560;
  --c-muted: #5a6b72;
  --c-line: #dde4e0;
  --c-line-strong: #c5d0cb;
  --c-accent: var(--c-teal);
  --c-danger: #b3261e;
  --c-danger-50: #fdecea;
  --c-success: #2e7d4f;
  --c-success-50: #e7f4ec;
  --c-warning: #8a5a00;
  --c-warning-50: #fff4dc;
  --c-overlay: rgba(10, 26, 34, 0.55);

  /* Typography */
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-xl: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --fs-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem);

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

  /* Spacing (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --section-y: clamp(4rem, 2.5rem + 5vw, 7.5rem);

  /* Layout */
  --container: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 76px;

  /* Shape */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-pill: 999px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(20, 45, 58, 0.06);
  --sh-sm: 0 1px 2px rgba(20, 45, 58, 0.06);
  --sh-md: 0 4px 14px -6px rgba(20, 45, 58, 0.18);
  --sh-lg: 0 12px 32px -12px rgba(20, 45, 58, 0.3);
  --ring: 0 0 0 3px var(--c-ivory), 0 0 0 5px var(--c-teal);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 600ms;

  /* Layers */
  --z-header: 50;
  --z-dropdown: 60;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;
}