/* ========================================
   COLOR VARIABLES - Workshop Sem Bloqueios
   Arquivo centralizado apenas de cores
   ========================================*/

:root {
    /* ========================================
       CORES PRINCIPAIS
       ========================================*/
    
    /* Paleta Primária */
    --color-purple: #a855f7;
    --color-yellow: #facc15;
    --color-yellow-dark: #eab308;
    --color-yellow-light: #fbbf24;
    --color-yellow-lighter: #f59e0b;
    --color-blue: #3b82f6;
    --color-blue-dark: #1d4ed8;
    --color-blue-light: #2563eb;
    --color-blue-lighter: #1e40af;
    --color-red: #ef4444;
    
    /* Cores Básicas */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* ========================================
       TONS DE CINZA
       ========================================*/
    
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    
    /* ========================================
       CORES DE TEXTO
       ========================================*/
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-light: #e2e8f0;
    --text-muted: #94a3b8;
    --text-white: #ffffff;
    
    /* ========================================
       GRADIENTES
       ========================================*/
    
    /* Gradiente Principal (Fundo Escuro) */
    --gradient-dark: #0c1b2e; /*linear-gradient(135deg, #1e293b 0%, #334155 25%, #475569 50%, #1e293b 100%);*/
    
    /* Gradientes Amarelos (CTAs) */
    --gradient-yellow: linear-gradient(135deg, #facc15 0%, #eab308 100%);
    --gradient-yellow-hover: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    
    /* Gradientes Azuis */
    --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --gradient-blue-hover: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    
    /* Gradiente Branco para Escuro (About Section) */
    --gradient-white-to-dark: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, var(--gradient-dark) 50%, var(--gradient-dark) 100%);
    
    /* Gradientes para Elementos */
    --gradient-monitor-frame: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    --gradient-monitor-stand: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    --gradient-monitor-screen: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --gradient-placeholder: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    
    /* ========================================
       CORES COM TRANSPARÊNCIA
       ========================================*/
    
    /* Branco Transparente */
    --white-05: rgba(255, 255, 255, 0.05);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-80: rgba(255, 255, 255, 0.8);
    
    /* Preto Transparente */
    --black-05: rgba(0, 0, 0, 0.05);
    --black-10: rgba(0, 0, 0, 0.1);
    --black-15: rgba(0, 0, 0, 0.15);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-40: rgba(0, 0, 0, 0.4);
    
    /* Roxo Transparente */
    --purple-10: rgba(168, 85, 247, 0.1);
    --purple-30: rgba(168, 85, 247, 0.3);
    --purple-50: rgba(168, 85, 247, 0.5);
    
    /* Amarelo Transparente (para sombras) */
    --yellow-30: rgba(250, 204, 21, 0.3);
    --yellow-40: rgba(250, 204, 21, 0.4);
    --yellow-50: rgba(250, 204, 21, 0.5);
    
    /* Azul Transparente (para sombras) */
    --blue-30: rgba(59, 130, 246, 0.3);
    --blue-40: rgba(59, 130, 246, 0.4);
    --blue-50: rgba(59, 130, 246, 0.5);
    
    /* ========================================
       CORES PARA ELEMENTOS ESPECÍFICOS
       ========================================*/
    
    /* Bordas */
    --border-light: rgba(148, 163, 184, 0.1);
    --border-medium: rgba(148, 163, 184, 0.2);
    --border-gray: #e2e8f0;
    --border-gray-dark: #cbd5e1;
    
    /* Backgrounds de Cards */
    --bg-card-light: rgba(255, 255, 255, 0.05);
    --bg-card-medium: rgba(255, 255, 255, 0.1);
    --bg-card-dark: rgba(0, 0, 0, 0.2);
    
    /* Placeholder Colors */
    --placeholder-text: #9ca3af;
    --placeholder-icon: #94a3b8;
}