/* ==========================================================================
   Bambo Booking — Phase 3 tokens EXTENSION  (tokens.css)
   Load order: css/base-tokens.css (unchanged copy of bambo-design tokens)
               -> tokens.css (this file) -> css/components.css -> css/phase2.css
               -> css/phase3.css -> server tenant <style> (6 brand vars only).
   Extends, never contradicts, the base tokens. Only ONE deliberate override:
   the focus ring adopts the platform two-tone ring already shipped in
   assets/css/a11y-fixes.css (gold #E8C96A + navy gap). Fixed, never tenant-coloured.
   ========================================================================== */
:root {
  /* ---------- Focus ring (fixed, platform-wide) ---------- */
  --focus-ring:   #E8C96A;  /* light gold outer ring                         */
  --focus-gap:    #0D1628;  /* navy-deep gap: 17:1 on white, 11:1 vs gold    */
  --focus-color:  var(--focus-ring);
  --focus-width:  3px;
  --focus-offset: 2px;

  /* ---------- Type: two extra steps (base scale unchanged) ---------- */
  --fs-3xl: clamp(2rem, 1.55rem + 2.4vw, 3rem);    /* landing hero h1 only     */
  --fs-2xs: 0.75rem;                                /* 12: counters, mono tags (never body text) */
  --lh-snug: 1.35;

  /* ---------- Spacing: one larger step for marketing sections ---------- */
  --space-9: 6rem;

  /* ---------- Radii / shadows ---------- */
  --radius-xl: 24px;                                /* hero panels             */
  --shadow-focus-gap: 0 0 0 var(--focus-offset) var(--focus-gap);

  /* ---------- Breakpoints (reference values; CSS vars can't be used in @media) ----------
     --bp-sm 30rem (480)  --bp-md 48rem (768)  --bp-lg 64rem (1024)  --bp-xl 80rem (1280)
     Mobile-first: base styles target 320px; min-width queries only.      */
  --bp-sm: 30rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 80rem;

  /* ---------- Shop page sizing ---------- */
  --logo-size: 3rem;          /* header logo / monogram box               */
  --logo-size-lg: 5rem;       /* hero logo / monogram                     */
  --avatar-size: 3rem;        /* team monogram                            */
  --container-settings: 48rem;

  /* ---------- Switch control (settings) ---------- */
  --switch-w: 3rem; --switch-h: 1.75rem;
  --switch-off: var(--n-400);          /* 3.5:1 on white: boundary OK     */
  --switch-on:  var(--success-600);    /* FIXED status green, not tenant  */
}
/* forced colours: system ring */
@media (forced-colors: active) { :root { --focus-ring: Highlight; --focus-gap: Canvas; } }