/* ==========================================================================
   SHADOW FITNESS — DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --bg: #0a0908;
  --bg-elevated: #0d0c0b;
  --surface: #141311;
  --surface-light: #1c1a17;
  --surface-border: rgba(255, 255, 255, 0.07);
  --surface-border-strong: rgba(255, 255, 255, 0.14);

  /* ---- Color: text ---- */
  --text: #f3efe8;
  --text-dim: #c9c2b6;
  --muted: #8a8378;
  --muted-dark: #5c564c;

  /* ---- Color: accent (Shadow Fitness gold) ---- */
  --accent: #e8b84b;
  --accent-bright: #ffd36a;
  --accent-dim: #a9842f;
  --accent-ink: #1a1304;
  --accent-glow: rgba(232, 184, 75, 0.35);

  /* ---- Gradients ---- */
  --grad-fade-up: linear-gradient(180deg, rgba(10, 9, 8, 0) 0%, rgba(10, 9, 8, 0.85) 70%, #0a0908 100%);
  --grad-fade-down: linear-gradient(0deg, rgba(10, 9, 8, 0) 0%, rgba(10, 9, 8, 0.85) 70%, #0a0908 100%);
  --grad-side: linear-gradient(90deg, #0a0908 0%, rgba(10, 9, 8, 0.55) 45%, rgba(10, 9, 8, 0) 100%);
  --grad-metal: linear-gradient(135deg, #2a2722 0%, #141311 60%);
  --grad-gold-sheen: linear-gradient(115deg, transparent 20%, rgba(232, 184, 75, 0.5) 48%, transparent 76%);

  /* ---- Structure ---- */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;
  --container: 1360px;
  --container-narrow: 920px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Typography ---- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-power3: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur: 0.45s;
  --dur-slow: 0.8s;

  /* ---- Z ---- */
  --z-cursor: 9999;
  --z-loader: 9998;
  --z-nav: 500;
  --z-modal: 900;
  --z-progress: 600;
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}