/* ============================================
   ZIEN FIT — Design Tokens
   Dark Luxury / Mafia-Precision Theme
   ============================================ */

:root {
  /* ── Backgrounds ── */
  --bg-void:        #080808;
  --bg-surface:     #0F0F0F;
  --bg-elevated:    #171717;
  --bg-overlay:     #1E1E1E;

  /* ── Accent: Gold ── */
  --gold-primary:   #C9A84C;
  --gold-light:     #E8C97A;
  --gold-dark:      #7A5F22;
  --gold-ghost:     rgba(201,168,76,0.09);

  /* ── Signal Colors ── */
  --signal-red:     #D94040;
  --signal-cyan:    #00D9FF;
  --signal-green:   #3DCC7A;
  --signal-amber:   #F5A623;

  /* ── Muscle / Body ── */
  --muscle-active:  #FF6B35;
  --muscle-weak:    rgba(217,64,64,0.67);
  --fat-layer:      rgba(255,215,0,0.27);

  /* ── Typography Colors ── */
  --text-primary:   #EFEFEF;
  --text-secondary: #8A8A8A;
  --text-muted:     #404040;
  --text-gold:      #C9A84C;

  /* ── Borders & Structure ── */
  --border-subtle:  #1E1E1E;
  --border-visible: #2E2E2E;
  --border-gold:    rgba(201,168,76,0.25);
  --divider:        #1A1A1A;

  /* ── Gradients ── */
  --grad-gold:      linear-gradient(135deg, #C9A84C 0%, #7A5F22 100%);
  --grad-dark:      linear-gradient(180deg, #0F0F0F 0%, #080808 100%);
  --grad-glow-gold: radial-gradient(ellipse at center, rgba(201,168,76,0.13) 0%, transparent 70%);
  --grad-glow-cyan: radial-gradient(ellipse at center, rgba(0,217,255,0.09) 0%, transparent 70%);

  /* ── Shadows ── */
  --shadow-card:    0 4px 32px rgba(0,0,0,0.6);
  --shadow-gold:    0 0 24px rgba(201,168,76,0.25);
  --shadow-cyan:    0 0 20px rgba(0,217,255,0.2);
  --shadow-muscle:  0 0 16px rgba(255,107,53,0.4);

  /* ── Typography Families ── */
  --font-display:   'Bebas Neue', 'Rajdhani', sans-serif;
  --font-heading:   'Rajdhani', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* ── Typography Scale (responsive clamp) ── */
  --text-hero:       clamp(52px, 8vw, 120px);
  --text-section:    clamp(28px, 4vw, 56px);
  --text-card-title: clamp(18px, 2vw, 26px);
  --text-body:       clamp(14px, 1.2vw, 16px);
  --text-label:      clamp(11px, 1vw, 13px);
  --text-data:       clamp(22px, 2.5vw, 36px);

  /* ── Letter Spacing ── */
  --ls-display:     0.08em;
  --ls-label:       0.15em;
  --ls-body:        0.01em;

  /* ── Easing Functions ── */
  --ease-snap:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drift:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-brutal:    cubic-bezier(0.9, 0, 0.1, 1);

  /* ── Durations ── */
  --dur-instant:    80ms;
  --dur-fast:       150ms;
  --dur-medium:     300ms;
  --dur-slow:       600ms;
  --dur-cinematic:  1200ms;

  /* ── Spacing Scale ── */
  --space-micro:    4px;
  --space-tight:    8px;
  --space-sm:       12px;
  --space-base:     16px;
  --space-md:       24px;
  --space-lg:       32px;
  --space-xl:       48px;
  --space-2xl:      64px;
  --space-3xl:      96px;
  --space-hero:     128px;

  /* ── Layout ── */
  --nav-height:     64px;
  --nav-height-mobile: 56px;
  --sidebar-width:  280px;
  --bottom-nav-height: 60px;
  --max-width:      1440px;
}