/* ============================================
   CSS Variables - Design Tokens
   ============================================ */

:root {
    /* Colors */
    --primary: #695BF8;
    --primary-light: #8B7FFA;
    
    /* Backgrounds */
    --bg: #0a0a0f;
    --bg-elevated: #12121a;
    --card-bg: #16161f;
    
    /* Text */
    --text: #f5f5f7;
    --text-secondary: #a1a1aa;
    --muted: #71717a;
    
    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    
    /* Radius */
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    
    /* Effects */
    --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.4);
    --transition: 200ms ease;
}