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

:root {
    /* Colors */
    --primary: #6C5CE7;
    --primary-light: #A29BFE;
    --primary-dark: #5A4BD1;
    --secondary: #00CEC9;
    --accent: #FD79A8;
    --success: #00B894;
    --warning: #FDCB6E;
    --danger: #E17055;
    
    /* Background */
    --bg-primary: #F8F9FE;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    
    /* Text */
    --text-primary: #2D3436;
    --text-secondary: #636E72;
    --text-muted: #B2BEC3;
    
    /* Border & Shadow */
    --border: #E8ECF4;
    --shadow-sm: 0 2px 8px rgba(108, 92, 231, 0.08);
    --shadow-md: 0 4px 20px rgba(108, 92, 231, 0.12);
    --shadow-lg: 0 8px 40px rgba(108, 92, 231, 0.16);
    
    /* Layout */
    --sidebar-width: 80px;
    --sidebar-hover-width: 220px;
    --topbar-height: 60px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}