/* ============================================================
   FITNESS AREA — Design Tokens
   Fully self-contained. No inheritance from styles/tokens.css
   (Molvern Labs' own brand) — per the isolation rule in
   Campaign/Demo-Platform-Strategy/07-design-system-architecture.md.

   Identity brief (from Campaign/Gym research): energetic but not
   aggressive, credible to a mid-market/general-wellness gym owner —
   not a hardcore CrossFit red, not a spa pastel. Orange = sustained
   encouragement without red's aggression (Gym/09, Orangetheory
   precedent) + a disciplined ink/charcoal base for credibility.

   NOTE on typography: production should self-host a condensed
   display face (Bebas Neue / Oswald-class — see
   Demo-Platform-Strategy research) as a new asset. This placeholder
   pass uses bold system-font stacks so no new font files are
   required yet, and CSP's font-src 'self' stays untouched until a
   real face is added as an asset and this token swapped.
   ============================================================ */

:root {
  /* ── Primitives ─────────────────────────────────────────── */
  --fit-ink-900:      #14110f;
  --fit-ink-800:      #1f1b18;
  --fit-ink-700:      #2b2521;
  --fit-cream-100:    #faf6f1;
  --fit-cream-200:    #f1ebe2;
  --fit-cream-300:    #e4dace;

  --fit-orange-500:   #ff5a1f;
  --fit-orange-600:   #e8480f;
  --fit-orange-400:   #ff8154;
  --fit-orange-glow:  rgba(255, 90, 31, 0.35);
  --fit-orange-subtle:rgba(255, 90, 31, 0.1);

  --fit-gray-400:     #a39c94;
  --fit-gray-500:     #7c766f;
  --fit-gray-600:     #57524c;

  /* ── Semantic layer ─────────────────────────────────────── */
  --sc-color-bg:            var(--fit-ink-900);
  --sc-color-surface:       var(--fit-ink-800);
  --sc-color-surface-alt:   var(--fit-ink-700);
  --sc-color-surface-raise: var(--fit-cream-100);

  --sc-color-text-primary:   var(--fit-cream-100);
  --sc-color-text-secondary: var(--fit-gray-400);
  --sc-color-text-on-raise:  var(--fit-ink-900);
  --sc-color-text-on-raise-secondary: var(--fit-gray-600);

  --sc-color-accent:        var(--fit-orange-500);
  --sc-color-accent-hover:  var(--fit-orange-600);
  --sc-color-accent-light:  var(--fit-orange-400);
  --sc-color-accent-glow:   var(--fit-orange-glow);
  --sc-color-accent-subtle: var(--fit-orange-subtle);

  --sc-color-border:        rgba(250, 246, 241, 0.12);
  --sc-color-border-strong: rgba(250, 246, 241, 0.24);

  /* ── Typography (system-stack placeholder — see note above) */
  --sc-font-display: 'Arial Black', 'Segoe UI Black', system-ui, sans-serif;
  --sc-font-body:    -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --sc-font-label:   -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;

  --sc-display-xl-size: clamp(2.75rem, 5vw + 1rem, 5rem);
  --sc-display-xl-lh:   1.02;
  --sc-display-xl-ls:   -0.01em;
  --sc-display-xl-tt:   uppercase;
  --sc-display-xl-weight: 900;

  --sc-heading-lg-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --sc-heading-lg-lh:   1.1;
  --sc-heading-lg-tt:   uppercase;
  --sc-heading-lg-weight: 800;

  --sc-heading-md-size: 1.5rem;
  --sc-heading-md-lh:   1.2;
  --sc-heading-md-weight: 800;

  --sc-body-lg-size: 1.1875rem;
  --sc-body-lg-lh:   1.6;

  --sc-body-md-size: 1rem;
  --sc-body-md-lh:   1.6;

  --sc-label-size: 0.8125rem;
  --sc-label-ls:   0.08em;
  --sc-label-tt:   uppercase;
  --sc-label-weight: 700;

  /* ── Spacing (own scale, deliberately not the root's) ──────── */
  --sc-space-xs:  0.375rem;
  --sc-space-sm:  0.75rem;
  --sc-space-md:  1.25rem;
  --sc-space-lg:  2rem;
  --sc-space-xl:  3rem;
  --sc-space-2xl: 4.5rem;
  --sc-space-3xl: 6.5rem;
  --sc-space-section: 7rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --sc-container-max: 1240px;
  --sc-container-pad: clamp(1.25rem, 5vw, 3.5rem);

  /* ── Radius ─────────────────────────────────────────────── */
  --sc-radius-sm: 4px;
  --sc-radius-md: 8px;
  --sc-radius-lg: 14px;
  --sc-radius-full: 999px;

  /* ── Shadow / glow (accent-tinted, area-specific) ──────────── */
  --sc-shadow-md:  0 8px 24px rgba(20, 17, 15, 0.35);
  --sc-shadow-glow: 0 0 0 1px var(--sc-color-accent-subtle), 0 12px 32px var(--fit-orange-glow);

  /* ── Motion feel (this area's signature easing —
       distinct from root's; duration values come from engine.css) */
  --sc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --sc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light-mode variant of the Fitness area (same semantic names,
   different primitive mapping — matches the pattern already used
   by the root's [data-theme="light"] in styles/tokens.css). */
[data-theme="light"] {
  --sc-color-bg:            var(--fit-cream-100);
  --sc-color-surface:       var(--fit-cream-200);
  --sc-color-surface-alt:   var(--fit-cream-300);
  --sc-color-surface-raise: var(--fit-ink-900);

  --sc-color-text-primary:   var(--fit-ink-900);
  --sc-color-text-secondary: var(--fit-gray-600);
  --sc-color-text-on-raise:  var(--fit-cream-100);
  --sc-color-text-on-raise-secondary: var(--fit-gray-400);

  --sc-color-border:        rgba(20, 17, 15, 0.1);
  --sc-color-border-strong: rgba(20, 17, 15, 0.2);
}