/* ==========================================================================
   WOW! DUSHI. — Design tokens
   Single source of truth for colour, type, space, radius, motion.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --navy-900: #061C38;   /* deepest — footer, scrims                         */
  --navy-800: #0A2A50;   /* primary navy — headings, nav, button text        */
  --navy-700: #12406F;   /* supportive navy — body copy on light             */
  --navy-500: #2E6699;   /* muted navy — meta, rules                         */

  --turq-600: #0FA3B8;
  --turq-500: #17C3D6;   /* bright turquoise — accents, icons                */
  --turq-300: #7BE3EC;
  --turq-100: #E6FAFC;   /* tinted surface                                   */

  --yellow-500: #FFD429; /* warm Caribbean yellow — primary CTA              */
  --yellow-400: #FFDF5C; /* hover                                            */
  --yellow-300: #FFE98C; /* script accent on photography                     */

  --coral-500: #FF4F45;  /* small accent only — the brand full stop          */

  --white: #FFFFFF;
  --sand-50: #FBF9F5;    /* barely-there warm surface                        */
  --line: rgba(10, 42, 80, 0.12);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* Fluid scale — clamp(min, preferred, max) */
  --fs-eyebrow: clamp(0.72rem, 0.66rem + 0.3vw, 0.875rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lede:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2:      clamp(1.875rem, 1.5rem + 1.9vw, 3.125rem);
  --fs-script:  clamp(2.75rem, 1.7rem + 4.6vw, 5.25rem);
  --fs-hero:    clamp(4rem, 1.6rem + 11vw, 10.5rem);

  --lh-tight: 0.92;
  --lh-snug: 1.15;
  --lh-body: 1.65;
  --ls-eyebrow: 0.34em;

  /* ---- Space ------------------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4.5rem, 3rem + 6vw, 8rem);

  --container: 1280px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);

  --header-h: 72px;

  /* ---- Radius & shadow -------------------------------------------------- */
  --r-pill: 999px;
  --r-lg: 22px;
  --r-md: 14px;

  --shadow-sm: 0 2px 10px rgba(6, 28, 56, 0.07);
  --shadow-md: 0 14px 34px -14px rgba(6, 28, 56, 0.28);
  --shadow-lg: 0 28px 64px -24px rgba(6, 28, 56, 0.4);
  --shadow-cta: 0 12px 30px -10px rgba(255, 212, 41, 0.62);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 720ms;
}

@media (min-width: 880px) {
  :root {
    --header-h: 104px;
  }
}