/* ==========================================================================
   DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */
:root {
    /* Color Palette - Obsidian Obsidian Theme with Emerald Accents */
    --bg-primary: #080b11;
    --bg-secondary: #0d131f;
    --bg-card: rgba(17, 24, 39, 0.45);
    --bg-card-hover: rgba(31, 41, 55, 0.6);
    
    --accent-emerald: #10b981;
    --accent-mint: #34d399;
    --accent-glow: rgba(16, 185, 129, 0.15);
    --accent-glow-strong: rgba(16, 185, 129, 0.3);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --border-color: rgba(16, 185, 129, 0.12);
    --border-color-strong: rgba(16, 185, 129, 0.25);
    --border-glow: rgba(16, 185, 129, 0.35);
    
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Micro-interactions & Spring Curves */
    --transition-fast: all 0.15s ease;
    --transition-spring: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-spring-bouncy: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.1);
    
    /* Spacing Grid (8pt system) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
}