/**
 * BandaPro - CSS Variables (Design Tokens)
 * Cores, espaçamentos, sombras e transições
 */

:root {
    /* ========== Colors - Light Theme ========== */
    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e2e8f0;
    --bg-hover: #cbd5e1;
    
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    
    --border-color: #cbd5e1;
    --border-hover: #94a3b8;
    
    /* Light theme gradient background */
    --bg-gradient: linear-gradient(-45deg, #e0e7ff, #f3e8ff, #fce7f3, #e0e7ff);
    
    /* BandaPro Theme Colors */
    --primary-purple: #482868;
    --deep-black: #111111;
    --accent-glow: #9d50bb;
    
    /* ========== Brand Colors ========== */
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    
    --fuchsia-400: #e879f9;
    --fuchsia-500: #d946ef;
    --fuchsia-600: #c026d3;
    
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    
    --rose-400: #fb7185;
    --rose-500: #f43f5e;
    --rose-600: #e11d48;
    
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    
    /* ========== Gradients ========== */
    --gradient-primary: linear-gradient(135deg, var(--violet-500), var(--fuchsia-500));
    --gradient-success: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
    --gradient-warning: linear-gradient(135deg, var(--amber-500), var(--amber-600));
    --gradient-danger: linear-gradient(135deg, var(--rose-500), var(--rose-600));
    --gradient-info: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    
    /* ========== Shadows ========== */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* ========== Spacing ========== */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    
    /* ========== Border Radius ========== */
    --radius-sm: 0.375rem;    /* 6px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-xl: 1rem;        /* 16px */
    --radius-2xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;
    
    /* ========== Transitions ========== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== Layout ========== */
    --sidebar-width: 18rem;       /* 288px */
    --sidebar-collapsed: 5rem;    /* 80px */
    --header-height: 5rem;        /* 80px */
    --footer-height: 4rem;        /* 64px */
    
    /* ========== Z-Index ========== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========== Dark Theme (Default) ========== */
html.dark {
    --bg-primary: var(--deep-black);
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-hover: #3a3a3a;
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    
    --border-color: #2a2a2a;
    --border-hover: #3a3a3a;
}

/* ========== Utility Classes ========== */
.gradient-primary { background: var(--gradient-primary); }
.gradient-success { background: var(--gradient-success); }
.gradient-warning { background: var(--gradient-warning); }
.gradient-danger { background: var(--gradient-danger); }

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== Responsive Breakpoints ========== */
/* 
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
*/