/* ==========================================================================
   MUSCLE STATION (ARTI BESIN) - DESIGN SYSTEM TOKENS & VARIABLES
   ========================================================================== */

:root {
    /* Color Palette - Light Theme (Crisp Athletic White, Ice Slate & Royal Blue) */
    --color-bg: #F8FAFC;
    --color-bg-alt: #F1F5F9;
    --color-surface: #FFFFFF;
    --color-surface-translucent: rgba(255, 255, 255, 0.82);
    --color-surface-hover: #F9FAFB;
    --color-border: rgba(15, 23, 42, 0.08);
    --color-border-hover: rgba(16, 46, 138, 0.35);

    /* Text Colors */
    --color-text-primary: #0F172A;
    --color-text-secondary: #475569;
    --color-text-muted: #64748B;
    --color-text-inverse: #FFFFFF;

    /* Brand Accents - Muscle Station Bold Energy */
    --color-primary: #102E8A;          /* Royal Athletic Blue */
    --color-primary-light: #2563EB;    /* Electric Cobalt */
    --color-primary-dark: #0B1E5B;     /* Deep Navy Midnight */
    --color-primary-glow: rgba(16, 46, 138, 0.28);

    --color-accent-red: #E11D2A;       /* Muscle Station Red Swoop */
    --color-accent-red-glow: rgba(225, 29, 42, 0.3);

    --color-accent-gold: #F59E0B;      /* Crunchy Gold / Premium Whey */
    --color-accent-cyan: #06B6D4;      /* BCAA Refreshing Citrus */
    --color-accent-emerald: #10B981;   /* Vegan & Prebiotic Fiber */

    --color-dark-navy: #0A1124;        /* Deep Athletic Navy */
    --color-footer-bg: #070B16;        /* High-Contrast Athletic Footer */

    /* Glassmorphism & Effects */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-blur: blur(20px);
    --glass-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08);

    /* Elevation & Shadows */
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 50px -12px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 35px 70px -15px rgba(15, 23, 42, 0.16);
    --shadow-glow: 0 0 40px rgba(16, 46, 138, 0.22);

    /* Typography */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout & Dimensions */
    --max-width: 1340px;
    --header-height: 86px;
    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-pill: 9999px;

    /* Transitions & Curves */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.2s var(--ease-smooth);
    --transition-normal: 0.35s var(--ease-spring);
    --transition-slow: 0.6s var(--ease-spring);

    /* Z-Index Hierarchy */
    --z-base: 1;
    --z-sticky: 100;
    --z-header: 500;
    --z-drawer: 800;
    --z-modal: 1000;
    --z-toast: 1100;
}

/* Dark Theme Overrides - High Performance Carbon / Gym Dark Mode */
[data-theme="dark"] {
    --color-bg: #090D16;
    --color-bg-alt: #0F1523;
    --color-surface: #141C2E;
    --color-surface-translucent: rgba(20, 28, 46, 0.88);
    --color-surface-hover: #1B253D;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(37, 99, 235, 0.5);

    --color-text-primary: #F8FAFC;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;
    --color-text-inverse: #090D16;

    --glass-bg: rgba(15, 21, 35, 0.85);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.6);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 35px 70px -15px rgba(0, 0, 0, 0.85);
    --shadow-glow: 0 0 45px rgba(37, 99, 235, 0.35);
}