/* ============================================================
   tokens.css — Odyssey VR public site
   Dark-by-default design system. Derived from the booking
   widget (booking.css) so the site and the modal share one
   language: same accent, same radii, same easing curves.

   Colour approach follows UI-UX rule color-dark-mode:
   dark mode uses desaturated tonal surfaces, not inverted
   light values. Every text/background pair below is checked
   to meet WCAG AA (4.5:1 body, 3:1 large/secondary).
   ============================================================ */

:root {
  /* ---- Brand accent (Odyssey masthead magenta) ----
     Core brand colour is #fc00fc, lifted from the masthead logo.
     Pure magenta is vivid for fills/large elements but dips below
     WCAG AA for small text on near-black, so --accent (used for
     small text/links/icons) is lifted toward pink for ~4.5:1, while
     --accent-strong keeps the exact brand magenta for buttons/fills. */
  --accent:        #ff4dff;   /* small text/links/icons — AA on dark */
  --accent-strong: #fc00fc;   /* the brand magenta, for fills/buttons */
  --accent-soft:   #ff85ff;   /* hover / focus glow, brightest */
  --accent-ink:    #1a0019;   /* text on accent (dark ink reads on magenta) */
  --accent-tint:   rgba(252,0,252,0.14);   /* subtle fills, chips */
  --accent-line:   rgba(252,0,252,0.42);

  /* ---- Dark surfaces (near-black → charcoal ladder) ---- */
  --bg:        #0a0910;   /* page base, deepest */
  --bg-1:      #0f0e17;   /* raised sections */
  --surface:   #16151f;   /* cards */
  --surface-2: #1d1c28;   /* card hover / nested */
  --surface-3: #26242f;   /* inputs, wells */

  /* ---- Text on dark (AA-verified against --bg/--surface) ---- */
  --ink:       #f4f2fb;   /* primary text          ~16:1 */
  --ink-soft:  #d9d7e6;   /* secondary text, brighter for contrast ~12:1 */
  --ink-faint: #a7a4ba;   /* tertiary / meta       ~6:1 */
  --ink-dim:   #6b6880;   /* disabled, hairlines on text */

  /* ---- Lines & dividers (visible on dark, per rule) ---- */
  --line:      rgba(255,255,255,0.10);
  --line-2:    rgba(255,255,255,0.06);
  --line-strong: rgba(255,255,255,0.16);

  /* ---- Status (AA on dark) ---- */
  --ok:   #34d17e;
  --warn: #f0b341;
  --bad:  #ff5f56;

  /* ---- Glassmorphism (depth without losing contrast) ---- */
  --glass-bg:     rgba(22,21,31,0.62);
  --glass-bg-2:   rgba(15,14,23,0.72);
  --glass-brd:    rgba(255,255,255,0.12);
  --glass-blur:   18px;
  --glass-shadow: 0 8px 40px rgba(0,0,0,0.45);

  /* ---- Gradients (fun, immersive; centred on the brand magenta) ---- */
  --grad-accent:  linear-gradient(135deg, #fc00fc 0%, #9d4bff 100%);
  --grad-violet:  linear-gradient(135deg, #ff4dff 0%, #c026ff 55%, #7c3cff 100%);
  --grad-ember:   linear-gradient(135deg, #ff6b4b 0%, #ff2e8d 100%);
  --grad-aurora:  linear-gradient(135deg, #2ec5a8 0%, #6c2eb8 100%);
  /* atmospheric page wash: barely-there colour bleeding up from black.
     Kept as immersive mood, dialled down so it never competes with a
     headline (lower-cognitive-load: ambient, not focal). */
  --grad-page:    radial-gradient(1100px 560px at 82% -12%, rgba(252,0,252,0.12), transparent 62%),
                  radial-gradient(820px 460px at -2% 8%, rgba(157,75,255,0.07), transparent 58%);
  /* dark scrim that sits over imagery so text stays legible */
  --grad-scrim:   linear-gradient(180deg, rgba(10,9,16,0) 0%, rgba(10,9,16,0.55) 55%, rgba(10,9,16,0.96) 100%);
  --grad-scrim-h: linear-gradient(90deg, rgba(10,9,16,0.92) 0%, rgba(10,9,16,0.55) 45%, rgba(10,9,16,0) 100%);
  /* subtle diagonal wash for the arena game "about" section — atmosphere
     without competing with text, no imagery required */
  --grad-about:   linear-gradient(135deg, rgba(252,0,252,0.10) 0%, rgba(124,60,255,0.06) 55%, transparent 100%);

  /* ---- Radii (identical scale to booking widget) ---- */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---- Elevation scale (consistent, per elevation-consistent rule) ---- */
  --e-1: 0 2px 10px rgba(0,0,0,0.30);
  --e-2: 0 10px 30px rgba(0,0,0,0.40);
  --e-3: 0 24px 70px rgba(0,0,0,0.55);
  --glow: 0 10px 36px rgba(252,0,252,0.38);

  /* ---- Easing (the widget's exact three curves) ---- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* spring-ish for press feedback (spring-physics rule) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Motion durations (150–300ms band, per duration-timing) ---- */
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 320ms;

  /* ---- Spacing scale (Carbon 4px rule — single source of truth) ----
     Borrowed from the admin dashboard so the whole estate shares one
     spacing language. Use these everywhere instead of ad-hoc px/clamp. */
  --sp-01: 0.25rem;  /*  4 */
  --sp-02: 0.5rem;   /*  8 */
  --sp-03: 0.75rem;  /* 12 */
  --sp-04: 1rem;     /* 16 */
  --sp-05: 1.5rem;   /* 24 */
  --sp-06: 2rem;     /* 32 */
  --sp-07: 2.5rem;   /* 40 */
  --sp-08: 3rem;     /* 48 */
  --sp-09: 4rem;     /* 64 */
  --sp-10: 5rem;     /* 80 */

  /* Fluid section rhythm — snapped to the scale, kept immersive on
     large displays. One curve for every section's vertical breathing. */
  --section-y:       clamp(4rem, 9vw, 7.5rem);   /* 64 → 120 */
  --section-y-tight: clamp(2rem, 5vw, 3.5rem);   /* 32 → 56  */

  /* ---- Layout ---- */
  --maxw:      1480px;   /* wide, immersive on large displays */
  --maxw-wide: 1760px;   /* extra-wide band for heroes + scrollers */
  --gutter:    clamp(20px, 5vw, 80px);
  --nav-h:     88px;
  --cta-h:     72px;     /* sticky book bar */

  /* ---- Readable measures (line-length rule: 55–75 cpl) ----
     Dyson & Haselgrove sweet spot. One deliberate set, applied via
     width:min(100%, var(--measure)) so it holds at every breakpoint. */
  --measure:        66ch;   /* long-form body / prose          */
  --measure-lead:   60ch;   /* leads and supporting paragraphs  */
  --measure-narrow: 52ch;   /* hero leads, punchy intros        */
  --measure-tight:  40ch;   /* big-type statements, captions    */
  --maxw-text: var(--measure);  /* back-compat alias */

  /* ---- Type scale (12 14 16 18 24 32 …, fluid) ----
     Body prose is 17px, not the 16px browser default. Anything that is a
     full sentence meant to be read uses --fs-body. The smaller sizes below
     are for labels and metadata (badges, timestamps, table cells), never
     for prose: if it reads as a sentence, it gets --fs-body.
     --fs-body-sm exists only for genuinely compact prose in tight UI, and
     should be reached for rarely. */
  --fs-eyebrow: 12px;
  --fs-meta:    13px;
  --fs-body-sm: 15px;
  --fs-body:    17px;
  --fs-lead:    clamp(18px, 1.4vw, 21px);
  --fs-h4:      15px;
  --fs-h3:      clamp(19px, 2vw, 22px);
  --fs-h2:      clamp(26px, 4vw, 40px);
  --fs-h1:      clamp(36px, 6.5vw, 76px);
  --fs-display: clamp(44px, 9vw, 104px);

  /* ---- Z-index ladder (z-index-management rule) ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky-cta: 40;
  --z-header: 60;
  --z-drawer: 80;
  --z-cookie: 90;
  --z-modal: 1000;   /* booking overlay owns 1000, matches widget */
}

/* The booking widget keeps its own light theme on the site. We do NOT
   repaint it dark: Gary chose the light booking form as-is. The widget
   ships its own :root tokens in booking.css, which win inside the modal. */