/* ==========================================================================
   CROWN RIDES — DESIGN TOKENS
   Single source of truth. No component may hardcode a value that exists here.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. COLOUR — BRAND
     ------------------------------------------------------------------ */
  --c-black:          #000000;  /* Primary   — brand black            */
  --c-ink:            #111111;  /* Dark sections                      */
  --c-gold:           #D4AF37;  /* Secondary — brand gold             */
  --c-mist:           #F5F5F5;  /* Accent    — light section fill     */
  --c-white:          #FFFFFF;  /* Background                         */

  /* Gold family — derived. See §2 of the design system doc for the
     contrast maths. Each variant exists for one specific job. */
  --c-gold-deep:      #7D6219;  /* 5.78:1 on white, 5.30:1 on #F5F5F5 —
                                   the ONLY gold permitted for text on
                                   a light background                 */
  --c-gold-light:     #E8CE7A;  /* hover state on dark surfaces       */
  --c-gold-champagne: #F7F0DC;  /* large soft fills, light bg only    */

  /* Neutral ramp — warm-shifted so it sits with the gold, not against it */
  --c-n-950: #0A0A0A;
  --c-n-900: #141414;
  --c-n-800: #1F1E1C;
  --c-n-700: #33312D;
  --c-n-600: #52504A;
  /* Was #75726B, which measured 4.8:1 on white and passed — but muted body
     text also sits on the --c-n-050 mist sections, and there it dropped to
     4.40:1, just under the 4.5 AA needs. The comment claiming 4.6 was only
     ever true against white. Four points darker clears AA on BOTH grounds
     (4.94 on white, 4.60 on mist) and is not a visible change. */
  --c-n-500: #716E67;
  --c-n-400: #A3A099;
  --c-n-300: #C9C6BF;
  --c-n-200: #E3E1DC;
  --c-n-100: #F0EEEA;
  --c-n-050: #F8F7F5;

  --c-success: #2E7D5B;
  --c-error:   #B3261E;

  /* ------------------------------------------------------------------
     2. COLOUR — SEMANTIC (light surface = default)
     Components reference these, never the raw values above.
     ------------------------------------------------------------------ */
  --bg:              var(--c-white);
  --bg-subtle:       var(--c-mist);
  --bg-raised:       var(--c-white);

  --text:            var(--c-black);
  --text-muted:      var(--c-n-500);
  --text-inverse:    var(--c-white);
  --text-accent:     var(--c-gold-deep);   /* NOT --c-gold. See §2. */

  --border:          var(--c-n-200);
  --border-strong:   var(--c-n-300);
  --rule-gold:       var(--c-gold);        /* hairlines only, non-text */

  --focus-ring:      var(--c-gold-deep);

  /* ------------------------------------------------------------------
     3. TYPOGRAPHY
     ------------------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  /* Fluid display scale — min at 360px, max at 1440px */
  --fs-hero:  clamp(2.75rem, 1.85rem + 4.00vw, 5.25rem);  /*  44 →  84 */
  --fs-d1:    clamp(2.25rem, 1.60rem + 2.90vw, 4.00rem);  /*  36 →  64 */
  --fs-d2:    clamp(2.00rem, 1.36rem + 2.85vw, 3.75rem);  /*  32 →  60 */
  --fs-d3:    clamp(1.75rem, 1.32rem + 1.90vw, 2.88rem);  /*  28 →  46 */

  /* UI scale — fixed, predictable */
  --fs-xl:    1.375rem;   /* 22 — lead paragraph        */
  --fs-lg:    1.1875rem;  /* 19 — large body            */
  --fs-md:    1.0625rem;  /* 17 — BODY DEFAULT          */
  --fs-sm:    0.9375rem;  /* 15 — secondary             */
  --fs-xs:    0.8125rem;  /* 13 — captions, meta        */
  --fs-eyebrow: 0.75rem;  /* 12 — uppercase labels      */

  --lh-tight:   1.05;   /* display only */
  --lh-snug:    1.20;
  --lh-normal:  1.50;
  --lh-relaxed: 1.75;   /* body default */

  --ls-display: -0.02em;  /* serif tightens as it grows */
  --ls-normal:   0em;
  --ls-wide:     0.06em;
  --ls-eyebrow:  0.18em;  /* uppercase labels breathe */

  --measure:       68ch;  /* max line length for body copy */
  --measure-tight: 46ch;  /* for display headings          */

  /* ------------------------------------------------------------------
     4. SPACE — 4px base, geometric above 32
     ------------------------------------------------------------------ */
  --s-1:  0.25rem;   /*   4 */
  --s-2:  0.5rem;    /*   8 */
  --s-3:  0.75rem;   /*  12 */
  --s-4:  1rem;      /*  16 */
  --s-5:  1.5rem;    /*  24 */
  --s-6:  2rem;      /*  32 */
  --s-7:  3rem;      /*  48 */
  --s-8:  4rem;      /*  64 */
  --s-9:  6rem;      /*  96 */
  --s-10: 8rem;      /* 128 */
  --s-11: 10rem;     /* 160 */
  --s-12: 12.5rem;   /* 200 */

  /* Section rhythm — the single most important luxury signal */
  --section-y:      clamp(4.5rem, 2.5rem + 8.5vw, 10rem);   /*  72 → 160 */
  --section-y-lg:   clamp(6rem,   3.2rem + 12vw,  14rem);   /*  96 → 224 */
  --section-gap:    clamp(2.5rem, 1.6rem + 4vw,   5rem);    /*  40 →  80 */

  /* ------------------------------------------------------------------
     5. LAYOUT
     ------------------------------------------------------------------ */
  --container:      1320px;
  --container-wide: 1560px;
  --container-text:  760px;
  --gutter:         clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem);  /* 20 → 40 */
  --grid-cols:      12;

  --header-h:       84px;
  --header-h-sm:    68px;

  /* ------------------------------------------------------------------
     6. RADIUS — restrained. Luxury is not bubbly.
     ------------------------------------------------------------------ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;   /* inputs        */
  --r-lg:   20px;   /* cards, media  */
  --r-xl:   28px;   /* panels        */
  --r-pill: 999px;  /* buttons       */

  /* ------------------------------------------------------------------
     7. ELEVATION — soft, wide, low-opacity. Never harsh.
     ------------------------------------------------------------------ */
  --sh-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
  --sh-sm: 0 2px 8px rgba(17, 17, 17, 0.06);
  --sh-md: 0 8px 24px -4px rgba(17, 17, 17, 0.08);
  --sh-lg: 0 24px 48px -12px rgba(17, 17, 17, 0.14);
  --sh-xl: 0 40px 80px -24px rgba(17, 17, 17, 0.20);

  --sh-gold: 0 8px 32px -6px rgba(212, 175, 55, 0.36);

  /* ------------------------------------------------------------------
     8. GLASS — used ONLY on the booking panel and the scrolled header.
     ------------------------------------------------------------------ */
  --glass-dark-bg:     rgba(17, 17, 17, 0.62);
  --glass-dark-border: rgba(255, 255, 255, 0.12);
  --glass-light-bg:    rgba(255, 255, 255, 0.72);
  --glass-light-border:rgba(17, 17, 17, 0.08);
  --glass-blur:        blur(20px) saturate(140%);

  /* ------------------------------------------------------------------
     9. MOTION
     ------------------------------------------------------------------ */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);      /* expo — entrances */
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);      /* symmetric        */
  --e-ui:    cubic-bezier(0.40, 0, 0.20, 1);      /* small state      */

  --d-micro:  150ms;   /* hover, focus            */
  --d-fast:   250ms;   /* toggles, tabs           */
  --d-base:   400ms;   /* menus, panels           */
  --d-slow:   700ms;   /* scroll reveals          */
  --d-hero:  1100ms;   /* hero + loader reveal    */

  --stagger:   90ms;   /* between sibling reveals */

  /* ------------------------------------------------------------------
     10. Z-INDEX
     ------------------------------------------------------------------ */
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-header:    200;
  --z-megamenu:  250;
  --z-overlay:   300;
  --z-modal:     400;
  --z-loader:    900;
}

/* ==========================================================================
   DARK SURFACE — apply .on-dark to any section to flip the semantic layer.
   Gold becomes usable for text here (9.99:1 on black).
   ========================================================================== */
.on-dark {
  --bg:            var(--c-ink);
  --bg-subtle:     var(--c-n-900);
  --bg-raised:     var(--c-n-800);

  --text:          var(--c-white);
  --text-muted:    var(--c-n-400);
  --text-inverse:  var(--c-black);
  --text-accent:   var(--c-gold);   /* full-strength gold is safe here */

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);

  --focus-ring:    var(--c-gold);

  background-color: var(--bg);
  color: var(--text);
}

/* ==========================================================================
   REDUCED MOTION — collapse all durations, keep the layout identical.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 1ms;
    --d-fast:  1ms;
    --d-base:  1ms;
    --d-slow:  1ms;
    --d-hero:  1ms;
    --stagger: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}