:root {
    --royal-blue: #020617;
    --royal-blue-dark: #06b6d4;
    
    /* Novas cores - Paleta aprimorada */
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-900-40: rgba(15, 23, 42, 0.4);
    --slate-900-30: rgba(15, 23, 42, 0.3);
    --slate-900-50: rgba(15, 23, 42, 0.5);
    --cyan-400: #22d3ee;
    --emerald-400: #34d399;
    
    /* Cores de texto e UI */
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;

    /* Gradientes */
    --gradient-royal: linear-gradient(90deg, var(--royal-blue) 0%, var(--royal-blue-dark) 100%);
    --gradient-cyan: linear-gradient(45deg, var(--cyan-400) 0%, var(--royal-blue) 100%);
    --gradient-card-hover: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(16, 185, 129, 0.06) 100%);
    --gradient-btn-cta: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
    --gradient-btn-cta-hover: linear-gradient(135deg, var(--cyan-400) 0%, var(--emerald-400) 100%);
    --gradient-text-highlight: linear-gradient(90deg, var(--cyan-400) 0%, var(--emerald-400) 50%, var(--cyan-400) 100%);
}

/* Classes utilitárias usando as variáveis */
.bg-gradient-royal {
    background: var(--gradient-royal);
}

.bg-gradient-cyan {
    background: var(--gradient-cyan);
}

.text-primary-royal {
    color: var(--royal-blue);
}

.text-accent-cyan {
    color: var(--cyan);
}

.border-accent-cyan {
    border-color: var(--cyan);
}

/* Efeitos especiais */
.glow-cyan {
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.glow-cyan:hover {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

/* Classes utilitárias para cards */
.bg-slate-900-40 {
    background: var(--slate-900-40);
}

.bg-slate-900-30 {
    background: var(--slate-900-30);
}

.border-slate-800 {
    border-color: var(--slate-800);
}