/* Variáveis CSS - SaaS YouTube Automation - Design Moderno */

:root {
    /* Cores Primárias - Turquesa/Ciano */
    --primary: #00BFA5;
    --primary-hover: #00897B;
    --primary-light: #B2DFDB;
    --primary-dark: #00695C;
    
    /* Cores Secundárias */
    --secondary: #FFA726;
    --secondary-hover: #FB8C00;
    --secondary-light: #FFE0B2;
    
    /* Cores de Status */
    --success: #66BB6A;
    --danger: #EF5350;
    --warning: #FFA726;
    --info: #29B6F6;
    --purple: #AB47BC;
    
    /* Cores de Texto */
    --text-primary: #2C3E50;
    --text-secondary: #546E7A;
    --text-light: #90A4AE;
    --text-dark: #1A252F;
    --text-white: #FFFFFF;
    
    /* Backgrounds */
    --bg-main: #F5F7FA;
    --bg-card: #FFFFFF;
    --bg-light: #FAFBFC;
    --surface: #FFFFFF;
    --surface-hover: #F5F7FA;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Borders */
    --border-color: #E1E8ED;
    --border-light: #ECEFF1;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;
    
    /* Sombras - Mais suaves e modernas */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.16);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
    
    /* Transições */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    
    /* Layout */
    --sidebar-bg: #1E293B;
    --sidebar-text: #E2E8F0;
    --sidebar-hover: #334155;
    --sidebar-active: var(--primary);
    --sidebar-width: 250px;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #00BFA5 0%, #00897B 100%);
    --gradient-secondary: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
    --gradient-danger: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
}

[data-theme="dark"] {
    --text-primary: #ECEFF1;
    --text-secondary: #B0BEC5;
    --text-dark: #FFFFFF;
    
    --bg-main: #1a202c;
    --bg-card: #2d3748;
    --bg-light: #374151;
    --surface: #2d3748;
    --surface-hover: #374151;
    
    --border-color: rgba(255, 255, 255, 0.1);
    --sidebar-bg: #1a202c;
}