/* ==========================================
O ÚLTIMO BRASILEIRO - CSS Variables
Design System Premium - Cyberpunk Brasileiro
========================================== */

:root {
    /* Cores Principais - Tema Pós-Apocalíptico Brasileiro */
    --primary: #e94560;
    --primary-dark: #c23152;
    --primary-light: #ff6b81;
    --primary-glow: rgba(233, 69, 96, 0.6);

    --secondary: #00d4ff;
    --secondary-dark: #0099cc;
    --secondary-light: #66e3ff;
    --secondary-glow: rgba(0, 212, 255, 0.5);

    --accent: #ffd700;
    --accent-glow: rgba(255, 215, 0, 0.5);

    /* Novas cores de destaque */
    --purple: #a855f7;
    --purple-glow: rgba(168, 85, 247, 0.4);
    --green-neon: #22ff88;
    --green-glow: rgba(34, 255, 136, 0.3);

    /* Fundos */
    --bg-dark: #0a0a14;
    --bg-darker: #05050d;
    --bg-card: rgba(18, 18, 40, 0.85);
    --bg-glass: rgba(12, 12, 30, 0.7);
    --bg-card-light: rgba(22, 22, 48, 0.88);
    --bg-card-hover: rgba(30, 30, 60, 0.92);

    /* Texto */
    --text-primary: #ffffff;
    --text-secondary: #b0b0c8;
    --text-muted: #6e6e8a;
    --text-card: #e8e8f0;
    --text-glow: rgba(255, 255, 255, 0.1);

    /* Bordas & Sombras */
    --border-glow: rgba(233, 69, 96, 0.35);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-neon: linear-gradient(135deg, var(--primary), var(--secondary), var(--purple));
    --border-cyan: rgba(0, 212, 255, 0.4);
    --border-gold: rgba(255, 215, 0, 0.3);

    /* Sombras multi-camadas */
    --shadow-card: 0 12px 48px rgba(0, 0, 0, 0.6);
    --shadow-card-2d: 0 4px 12px rgba(0, 0, 0, 0.3), 0 12px 48px rgba(0, 0, 0, 0.5);
    --shadow-card-3d: 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4), 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-glow-primary: 0 0 25px rgba(233, 69, 96, 0.3);
    --shadow-glow-secondary: 0 0 25px rgba(0, 212, 255, 0.3);
    --shadow-glow-purple: 0 0 25px rgba(168, 85, 247, 0.2);
    --shadow-glow-gold: 0 0 25px rgba(255, 215, 0, 0.2);
    --shadow-neon-multicolor: 0 0 15px rgba(233, 69, 96, 0.15), 0 0 30px rgba(0, 212, 255, 0.1), 0 0 45px rgba(168, 85, 247, 0.08);
    --shadow-inset-glass: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-inset-deep: inset 0 2px 4px rgba(0, 0, 0, 0.3);

    /* Dimensões */
    --nav-height: 72px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;

    /* Tipografia */
    --font-main: 'Inter', 'Montserrat', sans-serif;
    --font-display: 'Cinzel', 'Cormorant Garamond', 'Playfair Display', serif;

    /* Letter-spacing tokens */
    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.16em;

    /* Transições */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}