/**
 * Variáveis CSS - Zelo
 * TEMA: Black Premium Industrial
 * Accent: Branco Gelo + Dourado sutil para conquistas
 */

:root {
    /* ============================================
       FONTES
       ============================================ */
    --font-main: 'Rajdhani', sans-serif;
    --font-display: 'Teko', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    --font-sketch: 'Caveat', cursive;
    --font-rust: 'Teko', sans-serif;
    --font-rust-body: 'Rajdhani', sans-serif;
    --font-rust-mono: 'Share Tech Mono', monospace;

    /* ============================================
       PALETA BLACK PREMIUM
       ============================================ */
    
    /* Blacks (base) */
    --bg-void: #000000;
    --bg-primary: #0A0A0A;
    --bg-secondary: #0F0F0F;
    --bg-card: #141414;
    --bg-card-solid: #141414;
    --bg-elevated: #1A1A1A;
    --bg-input: #0F0F0F;
    
    /* Metais */
    --metal-dark: #1A1A1A;
    --metal: #2A2A2A;
    --metal-light: #3A3A3A;
    --metal-bright: #4A4A4A;
    
    /* Textos */
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8B8;
    --text-tertiary: #808080;
    --text-muted: #555555;
    
    /* Accent Principal: Branco Gelo (premium) */
    --accent: #E5E5E5;
    --accent-light: #FFFFFF;
    --accent-dark: #B0B0B0;
    --accent-soft: rgba(229, 229, 229, 0.08);
    --accent-border: rgba(229, 229, 229, 0.25);
    --accent-glow: rgba(229, 229, 229, 0.3);
    
    /* Accent Secundário: Dourado (conquistas/marcos) */
    --gold: #C9A961;
    --gold-light: #E5C988;
    --gold-dark: #8B7340;
    --gold-glow: rgba(201, 169, 97, 0.4);
    
    /* Cores Semânticas */
    --success: #4ADE80;
    --success-glow: rgba(74, 222, 128, 0.3);
    --warning: #FBBF24;
    --warning-glow: rgba(251, 191, 36, 0.3);
    --danger: #EF4444;
    --danger-glow: rgba(239, 68, 68, 0.3);
    --info: #60A5FA;
    --info-glow: rgba(96, 165, 250, 0.3);
    
    /* Borders */
    --border-subtle: #1F1F1F;
    --border-default: #2A2A2A;
    --border-strong: #3A3A3A;
    --border-focus: rgba(229, 229, 229, 0.6);
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
    
    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 30px var(--accent-glow);
    --shadow-gold-glow: 0 0 30px var(--gold-glow);
    
    /* ============================================
       BLUR
       ============================================ */
    --blur-sm: blur(8px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ============================================
       Z-INDEX
       ============================================ */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 500;
    --z-modal: 600;
    --z-toast: 700;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01s;
        --transition-normal: 0.01s;
        --transition-slow: 0.01s;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Classes utilitárias do tema */
.rust-font-title {
    font-family: var(--font-rust);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rust-font-body {
    font-family: var(--font-rust-body);
}

.rust-font-mono {
    font-family: var(--font-rust-mono);
    letter-spacing: 0.1em;
}

/* Cantos chanfrados reutilizáveis */
.rust-clip-sm {
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.rust-clip-md {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.rust-clip-lg {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}