/* =============================================================================
   Fitness Coach Pro — 01: Design Tokens
   =============================================================================
   Single source of truth for all design values.
   Every other CSS file uses var() — NO hardcoded values anywhere else.
   ============================================================================= */

:root {

    /* ─── Gold (Primary Brand Accent) ─────────────────────────────────────── */
    --gold:          #C5A059;
    --gold-dark:     #A68042;
    --gold-shadow:   #8c6a1c;
    --gold-glow:     rgba(197, 160, 89, 0.25);
    --gold-subtle:   rgba(197, 160, 89, 0.08);
    --gold-faint:    rgba(197, 160, 89, 0.04);

    /* ─── Surfaces — Light Mode ────────────────────────────────────────────── */
    --bg:             #FDFBF7;
    --surface:        #ffffff;
    --surface-raised: #f3f3f4;
    --surface-muted:  #f9f7f3;

    /* ─── Text — Light Mode ─────────────────────────────────────────────────── */
    --text:           #111111;
    --text-muted:     #7f7667;
    --text-subtle:    #9e9589;
    --text-on-gold:   #ffffff;
    --text-on-dark:   #FDFBF7;

    /* ─── Borders ────────────────────────────────────────────────────────────── */
    --border-faint:   rgba(197, 160, 89, 0.12);
    --border-subtle:  rgba(197, 160, 89, 0.25);
    --border-medium:  rgba(197, 160, 89, 0.40);
    --border-strong:  #C5A059;

    /* ─── Typography ─────────────────────────────────────────────────────────── */
    --font-ui:      'Outfit', 'Cairo', sans-serif;
    --font-display: 'Playfair Display', 'EB Garamond', serif;
    --font-mono:    'Courier New', monospace;
    --font-icons:   'Material Symbols Outlined';

    /* ─── Spacing Scale (4 px base) ─────────────────────────────────────────── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ─── Border Radius ──────────────────────────────────────────────────────── */
    --r-xs:   2px;
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-2xl:  24px;
    --r-pill: 9999px;

    /* ─── Shadows ────────────────────────────────────────────────────────────── */
    --shadow-xs: 0 2px 6px rgba(197, 160, 89, 0.04);
    --shadow-sm: 0 4px 10px rgba(197, 160, 89, 0.06);
    --shadow-md: 0 10px 30px -5px rgba(197, 160, 89, 0.10);
    --shadow-lg: 0 20px 40px -10px rgba(197, 160, 89, 0.14);

    /* ─── Transitions ────────────────────────────────────────────────────────── */
    --t-fast:   all 0.2s ease-in-out;
    --t-normal: all 0.3s ease-in-out;
    --t-slow:   all 0.7s ease-in-out;

    /* ─── Z-Index Scale ──────────────────────────────────────────────────────── */
    --z-base:    1;
    --z-raised:  10;
    --z-overlay: 20;
    --z-sticky:  40;
    --z-modal:   100;
    --z-top:     200;

    /* ─── Legacy aliases (backward compatibility with theme.css) ─────────────── */
    --accent-gold:   var(--gold);
    --bg-color:      var(--bg);
    --card-bg:       var(--surface);
    --text-primary:  var(--text);
    --card-border:   var(--border-subtle);
    --border-stroke: var(--border-faint);
    --accent-green:  var(--gold);
    --accent-blue:   var(--gold);
    --accent-orange: var(--gold);
    --accent-yellow: var(--gold);
    --accent-red:    var(--gold);
    --accent-purple: var(--gold);
    --radar-bg:      var(--gold);
    --radar-glow:    var(--gold-glow);
    --btn-radius:    var(--r-md);
    --card-radius:   var(--r-lg);
}

/* ─── Dark Mode Overrides ─────────────────────────────────────────────────── */
.dark-theme {
    --bg:             #0F0E0D;
    --surface:        #191816;
    --surface-raised: #222120;
    --surface-muted:  #1c1b19;
    --text:           #FDFBF7;
    --text-muted:     #a6a5a2;
    --text-subtle:    #7e7c79;
    --border-faint:   rgba(197, 160, 89, 0.08);
    --border-subtle:  rgba(197, 160, 89, 0.15);
    --border-medium:  rgba(197, 160, 89, 0.25);
    --shadow-sm:      0 4px 10px rgba(0, 0, 0, 0.30);
    --shadow-md:      0 10px 30px -5px rgba(0, 0, 0, 0.40);
    --shadow-lg:      0 20px 40px -10px rgba(0, 0, 0, 0.50);

    /* Legacy aliases */
    --bg-color:      var(--bg);
    --card-bg:       var(--surface);
    --text-primary:  var(--text);
    --card-border:   var(--border-subtle);
    --border-stroke: var(--border-faint);
    --radar-glow:    rgba(197, 160, 89, 0.45);
}