/* Reboot Vitality GATE 1.5 round 1: shared world-kit tokens (K0, 2026-10-06).
   Load after fonts.css:  <link rel="stylesheet" href="../../kit/fonts/fonts.css"><link rel="stylesheet" href="../../kit/tokens.css">
   then put the world class on <html> or <body>: class="w-v1" | "w-v2" | "w-v3" | "w-v4".
   Values come from each WORLD-BRIEF field 5 (type) and field 6 (palette). Worlds may add tokens in their own CSS; do not edit
   another world's block. No pure #000 anywhere. Motion eases live in kit/js/eases.js (GSAP CustomEase), not here; the
   --ease-* below are cubic-beziers for CSS hover/press transitions only (no CSS @keyframes, design lint M11). */

:root {
  /* spacing scale (4 px base, macro steps for band breathing room; M7 wants median band whitespace >= 192 px at 1440) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px; --sp-12: 192px; --sp-13: 240px;
  --band-pad: clamp(96px, 12vw, 192px);         /* vertical padding per band; 2x this between bands clears M7 */
  --gutter: clamp(16px, 4vw, 64px);             /* page side gutter (16 px at 390) */
  --measure: 62ch;                              /* body copy line length */
  --container: 1320px;
  --container-wide: 1520px;

  /* radii (double-bezel: inner radius = outer radius - shell padding) */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --bezel-pad: 6px;

  /* shared brand facts as colours */
  --google-gold: #fbbc04;                       /* review stars only */
  --dusty-blue: #9AB6CB;                        /* the brand's one accent family */
  --link-blue: #3F6FA8;                         /* deeper member of the family, for light grounds */
  --paper: #EDECEC; --stone: #DDDCD9; --taupe: #BDBAB0; --taupe-deep: #8B887E; --ink: #191919;

  /* CSS transition curves (hover / press only) */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out-calm: cubic-bezier(.65, 0, .35, 1);
  --press-scale: .98;

  /* booking host (Poptin-playbook sizing so the real third-party iframe drops in) */
  --booking-min-h: 560px;
  --sticky-bar-h: 64px;                         /* 390 sticky Call + Book bar */

  /* focus */
  --focus-w: 3px; --focus-off: 3px;
}

/* ---------- V1 Two Rings (ELEVATE under locks): greige monochrome, ink chapters, dusty blue as the ONE accent ---------- */
.w-v1 {
  --bg: #EDECEC;            /* paper, default */
  --bg-2: #DDDCD9;          /* stone */
  --bg-ink: #191919;        /* ink chapters: proof + closing band (never #000) */
  --surface: #F4F3F2;
  --fg: #191919;
  --fg-muted: #5E5B54;      /* AA on paper */
  --fg-on-ink: #EDECEC;
  --fg-on-ink-muted: #BDBAB0;
  --line: #BDBAB0;
  --taupe: #BDBAB0; --taupe-deep: #8B887E;
  --accent: #9AB6CB;        /* rings link point, CTA icon wrappers, focus rings ONLY */
  --cta-bg: #191919; --cta-fg: #EDECEC;
  --focus: #9AB6CB;
  --rings-ink: #191919; --rings-gap: #EDECEC;
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-utility: 'Manrope', system-ui, sans-serif;
  --display-size: clamp(52px, 8.9vw, 128px); --display-track: -0.02em; --display-lead: .95;
  --body-size: 18px; --body-lead: 1.6;
  --utility-size: 12px; --utility-track: .14em; --utility-weight: 600;
}

/* ---------- V2 The Curve (REIMAGINE): grounds climb from ink-blue-grey to bright paper ---------- */
.w-v2 {
  --g-reset: #1B2026;       /* 01 Reset */
  --g-repair: #2C333B;      /* 02 Repair */
  --g-restore: #DDDCD9;     /* 03 Restore */
  --g-optimize: #F3F2EF;    /* 04 Optimize */
  --bg: #F3F2EF;            /* booking chapter on paper */
  --bg-2: #DDDCD9;
  --fg: #1B2026; --fg-muted: #4F5864;
  --fg-on-dark: #EEF0F2; --fg-on-dark-muted: #A9B3BE;
  --line: #C9CCCF; --line-on-dark: #3A434D;
  --accent: #3F6FA8;        /* on light: the line, ticks, CTA icon wrappers */
  --accent-on-dark: #9AB6CB;
  --cta-bg: #1B2026; --cta-fg: #F3F2EF;
  --focus: #3F6FA8; --focus-on-dark: #9AB6CB;
  --font-display: 'Clash Display', 'Arial Narrow', sans-serif;
  --font-body: 'Satoshi', system-ui, sans-serif;
  --font-utility: 'Geist Mono', ui-monospace, monospace;
  --display-size: clamp(56px, 10.4vw, 150px); --display-track: -0.03em; --display-lead: .9;
  --numeral-size: clamp(120px, 16vw, 240px);
  --body-size: 18px; --body-lead: 1.6;
  --utility-size: 12px; --utility-track: .08em; --utility-weight: 500;
}

/* ---------- V3 Same Day (REIMAGINE): monitor charcoal + warm paper + stone ---------- */
.w-v3 {
  --bg-monitor: #121416;    /* hero, process day sheet, CTA */
  --bg: #EDECEC;            /* proof, booking, phases */
  --bg-2: #DDDCD9;          /* providers, FAQ */
  --monitor-chrome: #1E2124; --monitor-line: #2E3338;
  --fg: #191919; --fg-muted: #55534D;
  --fg-on-dark: #E6E8E9; --fg-on-dark-muted: #9AA1A7;
  --line: #C4C1B9;
  --accent: #3F6FA8;        /* on light */
  --accent-on-dark: #9AB6CB;/* crosshair, side markers, CTA icon wrappers on dark; no glow */
  --cta-bg: #121416; --cta-fg: #EDECEC;
  --focus: #3F6FA8; --focus-on-dark: #9AB6CB;
  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --display-stretch: 118%; --display-weight: 800;   /* brief: width 112 to 125 */
  --font-body: 'Geist', system-ui, sans-serif;
  --font-utility: 'Geist Mono', ui-monospace, monospace;
  --display-size: clamp(50px, 9.4vw, 135px); --display-track: -0.02em; --display-lead: .92;
  --body-size: 18px; --body-lead: 1.6;
  --utility-size: 12px; --utility-track: .1em; --utility-weight: 500;
}

/* ---------- V4 Downshift (REIMAGINE, wildcard): overdrive charcoal + amber, then calm paper + dusty blue ---------- */
.w-v4 {
  /* overdrive state (hero + why-us only) */
  --od-bg: #17181A;
  --od-fg: #ECEAE6; --od-fg-muted: #A3A19C;
  --od-accent: #C8873A;     /* signal amber: the ONLY hot colour, first two bands only, on the trace and one word */
  /* calm state (from the downshift band on) */
  --bg: #EDECEC; --bg-2: #DDDCD9;
  --fg: #191919; --fg-muted: #57554F;
  --line: #C4C1B9;
  --accent: #9AB6CB;        /* takes over after the downshift; one accent per band, never both */
  --accent-strong: #3F6FA8; /* text-safe member of the family on paper */
  --cta-bg: #191919; --cta-fg: #EDECEC;
  --focus: #3F6FA8; --focus-on-dark: #ECEAE6;
  --font-display-od: 'Archivo', 'Arial Narrow', sans-serif;
  --od-stretch: 68%; --od-weight: 800;              /* brief: width 62 to 75, caps, tracking -0.04em, leading .82 */
  --od-track: -0.04em; --od-lead: .82;
  --font-display-calm: 'Instrument Serif', Georgia, serif;
  --calm-lead: 1.05;
  --font-body: 'Satoshi', system-ui, sans-serif;
  --font-utility: 'Geist Mono', ui-monospace, monospace;
  --od-display-size: clamp(48px, 8.6vw, 124px);
  --calm-display-size: clamp(44px, 7.8vw, 112px);
  --body-size: 18px; --body-lead: 1.6;
  --utility-size: 12px; --utility-track: .1em; --utility-weight: 500;
}

/* shared, opt-in helpers (class-scoped so nothing leaks) */
.k-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.k-booking-host { min-height: var(--booking-min-h); }
@media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } }