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

:root {
    /* ========== Colors - Light Theme (SaaS Style) ========== */
    --bg-primary: #f0ecf7;   /* Surface 0 - Background lavanda suave */
    --bg-secondary: #ffffff; /* Surface 1 - Cards */
    --bg-tertiary: #f5f0fb;  /* Surface 2 - Internal areas */
    --bg-hover: rgba(150, 76, 180, 0.05);
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    
    --border-color: rgba(150, 76, 180, 0.12);
    --border-hover: rgba(150, 76, 180, 0.25);
    
    /* Light theme gradient background */
    --bg-gradient: linear-gradient(-45deg, #e0e7ff, #f3e8ff, #fce7f3, #e0e7ff);
    
    /* BandaPro Theme Colors */
    --primary-purple: #964cb4;
    --primary-dark: #4f2b6f;
    --primary-soft: rgba(150, 76, 180, 0.08); /* Modern soft accent */
    --deep-black: #07050e;
    --accent-glow: #9d50bb;
    --bg-dark-lp: #0d0a14;
    --bg-card-lp: #120d1e;
    --border-lp: #2a1a3e;
    --text-gray-lp: #9d8fb0;
    
    /* ========== 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 (SaaS Modern) ========== */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08);
    --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;

    /* ========== Semantic Form Tokens (Light) ========== */
    --form-bg: var(--bg-secondary);
    --form-border: var(--border-color);
    --form-border-focus: var(--primary-purple);
    --form-text: var(--text-primary);
    --form-text-placeholder: var(--text-tertiary);
    --form-ring: rgba(72, 40, 104, 0.15);
}

/* ========== Dark Theme (Default) ========== */
html.dark {
    --bg-primary: var(--deep-black);
    --bg-secondary: var(--bg-card-lp);
    --bg-tertiary: var(--bg-dark-lp);
    --bg-hover: #1a122e;
    
    --text-primary: #f1f5f9;
    --text-secondary: var(--text-gray-lp);
    --text-tertiary: #64748b;
    
    --border-color: var(--border-lp);
    --border-hover: #3a2a4a;

    /* ========== Semantic Form Tokens (Dark) ========== */
    --form-bg: rgba(0, 0, 0, 0.3);
    --form-border: rgba(150, 76, 180, 0.3);
    --form-border-focus: var(--primary-purple);
    --form-text: var(--text-primary);
    --form-text-placeholder: var(--text-tertiary);
    --form-ring: rgba(150, 76, 180, 0.3);
}

/* ========== 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
*/