/* ═══════════════════════════════════════════════════════════
   ONYX FITNESS — DESIGN TOKENS
   Single source of truth for every value used across the site.
   Update here, propagates everywhere.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── SURFACE SYSTEM ──────────────────────────────────────
     Inverted to warm-cream palette per TI2. Token names retain
     their legacy `onyx` prefix for historical continuity; the
     VALUES now represent the inverted warm-cream surface tiers.

     Admin login + password-change + public site footer preserve
     the original dark values via scoped overrides at the bottom
     of this file.
     ──────────────────────────────────────────────────────── */
  --color-onyx:           #FAF6EF;  /* Page surface — warm cream */
  --color-onyx-deep:      #FCF9F4;  /* Lifted sections — barely brighter than page */
  --color-onyx-rich:      #FFFFFF;  /* Elevated card surface — pure white */
  --color-onyx-warm:      #F5F1E8;  /* Hover wash on cream */
  --color-onyx-elevated:  #FFFFFF;  /* Same as -rich, intended for shadow-elevated cards */
  --color-onyx-border:    #2a2830;  /* Legacy: kept unchanged — used only by 3 admin/components.css refs (admin scope) */

  /* Bronze-wash surface tier (Prompt PD3) — used for one substantive
     section per page to create rhythmic depth without breaking the
     warm-onyx language. Sits at onyx-deep luminance with a stronger
     warm bias (R/G/B = 16/12/8 vs onyx-deep's 15/14/12). Applied via
     anchor-ID selectors in pages/sections.css. Current placements:
       • #stats     (homepage stat_strip — "Facility")
       • #history   (about timeline)
       • #pillars   (24/7 access features_grid)
       • #compare   (pricing comparison_table)
       • #scenarios (day-pass features_grid)
     If any of those section_anchor_id values change in admin, the
     bronze-wash application breaks silently — coordinate with the
     PD3 block in sections.css. */
  --color-onyx-bronze-wash: #FCF9F4;  /* TI2: inverted — now equals --color-onyx-deep so PD3 sections fall to the page-lifted tier. Distinct tone for these sections can be reintroduced in TI5 if desired. Operator decision: no bronze accent on the public site. */

  /* TI5A: Premium-moment surface tier — sinks toward warm depth.
     Counterpart to --color-onyx-deep which lifts toward white. Used for
     one section per page that should feel like a "lifted plinth":
     homepage stat_strip, about timeline, 24/7 features, pricing
     comparison, day-pass features. Section-level CSS in sections.css
     applies this via anchor-ID composite selectors (PD3 / TI5A pattern).
     If section_anchor_id values change in admin, the application
     silently no-ops. Distinct from --color-onyx-warm which is reserved
     for hover wash interaction states. */
  --color-onyx-deeper: #F2EDE3;

  /* ─── PLATINUM SYSTEM ─────────────────────────────────────
     Inverted per TI2 — was "highest highlight on dark," now
     functions as "deepest text on cream." Token names retain
     their legacy `platinum` prefix; values reflect the inverted
     dark-on-light register.

     The --chrome-* aliases below auto-update through var() so
     all existing references continue working.
     ──────────────────────────────────────────────────────── */
  --platinum-bright:      #2A2521;  /* Strongest accent / display headlines */
  --platinum:             #555048;  /* Default secondary text */
  --platinum-muted:       #888278;  /* Tertiary text / eyebrow labels */
  --platinum-deep:        #B5B0A6;  /* Lightest visible — borders, hairlines */

  /* Aliases for backward compatibility — DO NOT REMOVE.
     These let existing code keep working. Over time, code should
     migrate to --platinum-* names. */
  --chrome-bright:        var(--platinum-bright);
  --chrome:               var(--platinum);
  --chrome-muted:         var(--platinum-muted);
  --chrome-dim:           var(--platinum-deep);

  /* ─── BONE/PEARL WHITES ──────────────────────────────────
     Slightly warm whites. Pure white reserved for rare emphasis.
     ──────────────────────────────────────────────────────── */
  /* TI2 inversion — text colors flipped to dark register for cream surface.
     Warm dark (vs pure black) reads as premium editorial on warm cream
     (Aesop / Tracksmith precedent). */
  --color-bone:           #1F1B16;  /* Default body text — warm dark */
  --color-pearl:          #080706;  /* Emphasis / display — warm true-dark */
  --color-steel:          #444038;  /* Secondary text, descriptive */
  --color-steel-muted:    #888278;  /* Tertiary, footnotes */
  --color-steel-dark:     #2e2c34;  /* Legacy: kept unchanged — admin.css form input border (admin scope) */

  /* ─── STATUS INDICATORS ──────────────────────────────────
     Restrained, used sparingly. Keep for admin success/error states.
     ──────────────────────────────────────────────────────── */
  --color-online:         #6ee7a0;
  --color-warning:        #d97757;

  /* ─── SURFACE/STRUCTURAL ──────────────────────────────────
     Functional tokens that reference the palette above.
     ──────────────────────────────────────────────────────── */
  /* TI2 inversion — dividers flipped to warm-dark at low alpha so they
     layer cleanly over any surface tier. */
  --color-divider:        rgba(31, 27, 22, 0.08);
  --color-divider-strong: rgba(31, 27, 22, 0.14);

  /* ─── HAIRLINE GRADIENTS ──────────────────────────────────
     TI2 inversion — gradients now fade warm-dark at center on
     light page (was reverse). Use --color-divider as the tint
     so the value automatically flips with the rest of the
     palette in future re-tunes.
     ──────────────────────────────────────────────────────── */
  --gradient-hairline-h:  linear-gradient(90deg, transparent 0%, var(--color-divider-strong) 50%, transparent 100%);
  --gradient-hairline-v:  linear-gradient(180deg, transparent 0%, var(--color-divider-strong) 50%, transparent 100%);

  /* ─── GLOWS — REMOVED in TI2 ─────────────────────────────
     Bright-on-dark glow effects don't translate to light
     surfaces. Aliases retained as no-ops so existing references
     in admin.css / components.css don't 404. Use --shadow-* for
     real elevation. */
  --glow-platinum-sm:     none;
  --glow-platinum-md:     none;
  --glow-chrome-sm:       none;

  /* ─── Typography ────────────────────────────────────────
     Fraunces (variable serif) for display — editorial, structural
     DM Sans for body — clean, modern, paired with Fraunces
     System mono fallback only (no third font load)
     ────────────────────────────────────────────────────── */

  --font-display: 'Archivo Black', 'Impact', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Typography sizes — fluid clamp() for responsive type without media queries */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      clamp(1.25rem, 1.6vw, 1.5rem);
  --text-2xl:     clamp(1.5rem, 2.5vw, 2rem);
  --text-3xl:     clamp(2rem, 4vw, 3rem);
  --text-4xl:     clamp(2rem, 5vw, 3.5rem);     /* TI5A: -12% from clamp(2.5rem, 6vw, 4rem) — less aggressive on cream */
  --text-5xl:     clamp(2.5rem, 6vw, 4.25rem);  /* TI5A: -15% from clamp(3rem, 7vw, 5rem) */
  --text-display: clamp(2.75rem, 7.5vw, 5.75rem); /* TI5A: -18% from clamp(3.5rem, 9vw, 7rem) */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-loose:   1.75;
  --leading-relaxed: 1.85;

  /* Letter spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.18em;
  --tracking-display:  -0.03em;   /* TI3: loosened from -0.04em — Archivo Black on cream reads heavier and sharper than on dark; +0.01em prevents the headline from feeling crammed (TI1 §1.5) */

  /* Font weights — Fraunces and DM Sans are both variable; values used directly */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── Spacing (8px base, doubling pattern) ────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ─── Layout ──────────────────────────────────────────── */
  --max-width:        1280px;
  --max-width-prose:  64ch;
  --max-width-narrow: 720px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);
  /* TI5C density pass — section padding reduced ~30% from prior values
     (--section-y was clamp(5rem,10vw,8rem); --section-y-large was
     clamp(6rem,14vw,12rem)). Aggregate page-height savings ~400-640px
     on an 8-section page. Lower bounds stay ≥3.5rem so mobile doesn't
     read cramped. */
  --section-y:        clamp(3.5rem, 7vw, 5.5rem);
  --section-y-large:  clamp(4rem, 10vw, 8.5rem);

  /* Section transition gradient — applied between consecutive dark sections
     to give the page subtle "breath" — top of new section slightly darker
     than bottom of previous, creating depth. */
  --section-transition: linear-gradient(180deg, var(--color-onyx-rich) 0%, var(--color-onyx) 100%);
   /* TI2: white-to-cream gradient — subtle "breath" between contained sections on the inverted surface. */

  /* ─── Borders & Radii ─────────────────────────────────── */
  --border-thin:    1px solid var(--color-divider);
  --border-medium:  1px solid var(--color-divider-strong);
  --border-strong:  1px solid var(--chrome-muted);
  --border-accent:  1px solid var(--chrome);

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ─── Glassmorphism ───────────────────────────────────────
     Layered backgrounds with backdrop-filter for premium nav,
     overlays, modals. The blur + saturation creates the "glass"
     effect modern luxury sites use.
     ──────────────────────────────────────────────────────── */
  /* TI3 inversion — glass surfaces flipped to warm-cream rgba so the
     fixed header, mobile bottom nav, section nav tooltip, and other
     glassmorphism layers composite over the cream page rather than
     pinning a near-black wash on top of it. */
  --glass-nav:     rgba(250, 246, 239, 0.85);  /* cream — matches --color-onyx page surface */
  --glass-overlay: rgba(252, 249, 244, 0.85);  /* slightly lifted cream */
  --glass-surface: rgba(255, 255, 255, 0.85);  /* white — for surfaces that need max contrast */
  --glass-input:   rgba(255, 255, 255, 0.92);  /* white input fill */

  --blur-sm: blur(8px) saturate(1.2);
  --blur-md: blur(16px) saturate(1.3);
  --blur-lg: blur(24px) saturate(1.4);

  /* ─── Elevation Shadows ───────────────────────────────────
     TI2: re-tuned for light surfaces — admin precedent values
     applied. Subtle two-layer SaaS elevation, not the heavy
     drama needed on dark cinematic surface.
     ──────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* Glow aliases retained as no-ops so admin.css / components.css
     references don't 404. Removed in TI2 — use --shadow-* for elevation. */
  --glow-chrome-sm: none;
  --glow-chrome-md: none;
  --glow-chrome-lg: none;

  /* ─── Motion ──────────────────────────────────────────────
     Easing curves and durations. Use semantic names
     (--t-fast, --t-base) in components; specific durations
     only when needed.
     ──────────────────────────────────────────────────────── */
  --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast:       0.2s var(--ease-standard);
  --t-base:       0.3s var(--ease-standard);
  --t-smooth:     0.4s var(--ease-out-expo);
  --t-slow:       0.6s var(--ease-out-expo);
  --t-deliberate: 0.9s var(--ease-out-expo);

  /* ─── Z-index Scale ──────────────────────────────────────── */
  --z-banner:  30;
  --z-nav:     40;
  --z-overlay: 50;
  --z-modal:   60;
  --z-toast:   70;
  --z-loader:  100;
}

/* ════════════════════════════════════════════════════════════
   TI2 SCOPED LEGACY-DARK OVERRIDES

   Two contexts deliberately preserve the cinematic dark surface
   after TI2's inversion of the global tokens:

     1. Admin login + password-change pages
        (body.admin-body--login — both pages share this class)
     2. Public site footer (.footer)

   Within these scopes, the legacy dark values are restored so
   the rendered surface, text, dividers, and shadows behave
   exactly as before the inversion. Everything else on the
   public site picks up the new warm-cream tokens.
   ════════════════════════════════════════════════════════════ */

body.admin-body--login,
.footer {
    /* Surface */
    --color-onyx:            #0a0908;
    --color-onyx-deep:       #0f0e0c;
    --color-onyx-rich:       #1a1917;
    --color-onyx-warm:       #211f1c;
    --color-onyx-elevated:   #2a2825;
    --color-onyx-bronze-wash:#100C08;

    /* Text */
    --color-bone:            #f2efe8;
    --color-pearl:           #ffffff;
    --color-steel:           #a8a59d;
    --color-steel-muted:     #7a7872;

    /* Platinum scale (also propagates through --chrome-* aliases) */
    --platinum-bright:       #ebe8de;
    --platinum:              #c5c2b6;
    --platinum-muted:        #908d83;
    --platinum-deep:         #5d5b54;

    /* Dividers */
    --color-divider:         rgba(197, 194, 182, 0.12);
    --color-divider-strong:  rgba(197, 194, 182, 0.20);

    /* Hairline gradients — restore platinum-tinted versions */
    --gradient-hairline-h:   linear-gradient(90deg, transparent 0%, var(--platinum-muted) 50%, transparent 100%);
    --gradient-hairline-v:   linear-gradient(180deg, transparent 0%, var(--platinum-muted) 50%, transparent 100%);

    /* Elevation shadows — restore the heavier dark-cinematic register */
    --shadow-sm:             0 4px  16px  rgba(0, 0, 0, 0.30);
    --shadow-md:             0 8px  32px  rgba(0, 0, 0, 0.42);
    --shadow-lg:             0 20px 60px  rgba(0, 0, 0, 0.50);
    --shadow-xl:             0 40px 100px rgba(0, 0, 0, 0.60);

    /* Glow aliases — restore actual glow values for premium card lift */
    --glow-platinum-sm:      0 0 0 1px rgba(197, 194, 182, 0.08), 0 1px 0 0 rgba(197, 194, 182, 0.06) inset;
    --glow-platinum-md:      0 0 24px rgba(197, 194, 182, 0.06), 0 1px 0 0 rgba(197, 194, 182, 0.10) inset;
    --glow-chrome-sm:        0 0 20px rgba(194, 192, 183, 0.10);
    --glow-chrome-md:        0 0 40px rgba(194, 192, 183, 0.12);
    --glow-chrome-lg:        0 0 80px rgba(194, 192, 183, 0.15);

    /* Section transition — restore the dark-to-darker gradient.
       Footer doesn't use section-transition itself; defined here
       for consistency in case the scoped contexts need it. */
    --section-transition:    linear-gradient(180deg, #0f0e0c 0%, #0a0908 100%);

    /* Glass surfaces — restore the legacy dark rgba values for the
       admin login glassmorphism card and any future use of the
       glass tokens within the dark-scoped contexts. */
    --glass-nav:     rgba(10, 9, 8, 0.85);
    --glass-overlay: rgba(15, 14, 12, 0.72);
    --glass-surface: rgba(22, 21, 27, 0.75);
    --glass-input:   rgba(15, 14, 12, 0.92);
}

/* ════════════════════════════════════════════════════════════
   TI5B BACKDROP SCOPE OVERRIDE — hybrid cinematic.

   Within these five (six with narrative) backdrop scopes the
   text/divider tokens flip back to warm-white so light text
   reads on the dark-overlay-over-photo backdrop. Outside these
   scopes, text tokens stay TI2-inverted (warm-dark on cream).

   Same scope-override pattern as TI2's admin-login dark scope
   (lines 248+). Existing CSS rules that reference --color-pearl /
   --color-bone / --color-steel automatically resolve to the
   warm-white values within these scopes — no per-rule color
   overrides needed.
   ════════════════════════════════════════════════════════════ */

.hero,
.home-quote--backdrop,
.home-banner-manifesto--backdrop,
.home-final--backdrop,
.page-hero--backdrop,
.home-standard--backdrop,
.home-stat-strip,
.sec-appear--text-light {
    /* .sec-appear--text-light (migration 0059) reuses this proven dark-backdrop
       token flip: any section themed dark/photo/video gets warm-white text +
       light dividers automatically, so token-based text in EVERY section reads.
       Surfaces (--color-onyx, --color-onyx-rich) are intentionally NOT flipped
       here — white token-cards (pricing) are handled explicitly in
       section-appearance.css, and chip text using --color-onyx stays light. */
    /* .home-stat-strip joined the dark-surface scope when Moment 3
       switched it from cream-lifted to true dark (background:
       var(--color-pearl)). Without this scope-flip, var(--color-bone)
       inside the stats section resolves to its default warm-dark
       (#1F1B16) and the numbers render dark-on-dark. */
    --color-pearl:           #ffffff;
    --color-bone:            #f2efe8;
    --color-steel:           #a8a59d;
    --color-steel-muted:     #7a7872;
    --platinum-bright:       #ebe8de;
    --platinum:              #c5c2b6;
    --platinum-muted:        #908d83;
    --platinum-deep:         #5d5b54;
    --color-divider:         rgba(197, 194, 182, 0.20);
    --color-divider-strong:  rgba(197, 194, 182, 0.30);
}