/* =========================================================================
   design-system.css - Colori, Tipografia e Base Variables
   ========================================================================= */

:root {
    /* -- DEFAULT FALLBACKS --
       (Sovrascritti da responsive.css in base al device) */
    --sidebar-width: 0;
    --content-padding: 1rem;
    --header-height: 60px;
    --button-padding: 0.8rem 1.5rem;
    --button-font-size: 1rem;
    --card-padding: 1.5rem;
    --gap-default: 1rem;
    --grid-cols-stat: 2;
    --grid-cols-card: 1;

    /* -- PALETTE COLORI GAMIFICATION -- */
    --primary-color: #00F2FE;
    /* Azzurro Elettrico */
    --secondary-color: #4FACFE;
    /* Gradiente Azzurro/Blu */
    --accent-color: #FF0844;
    /* Rosso Errore / Attenzione */
    --success-color: #10B981;
    /* Verde per Quiz corretti e Streaks */
    --warning-color: #FBBF24;
    /* Giallo per Alert */

    --bg-dark: #0F172A;
    /* Body scuro base in stile "Notte" */
    --surface-dark: #1E293B;
    /* Colore delle Cards */
    --surface-darker: #111827;
    /* Header / Sidebar */

    --text-main: #F8FAFC;
    /* Testo chiaro primario */
    --text-muted: #94A3B8;
    /* Testo secondario scuro */

    /* -- BORDERS & SHADOWS -- */
    --border-radius-xl: 24px;
    --border-radius-md: 16px;
    --border-subtle: 1px solid rgba(255, 255, 255, 0.07);
    --transition-fast: 0.2s ease;

    --glow-primary: 0 0 20px rgba(0, 242, 254, 0.4);
    --glow-success: 0 0 20px rgba(16, 185, 129, 0.4);
    --glow-accent: 0 0 20px rgba(255, 8, 68, 0.4);
    --glass-bg: rgba(30, 41, 59, 0.7);
    --backdrop-blur: blur(12px);
}

/* --- TIPOGRAFIA BASE --- */
body {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.outfit-font {
    font-family: 'Outfit', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

h1 {
    font-size: 2.2rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--secondary-color);
}

.text-muted {
    color: var(--text-muted);
}

.text-center {
    text-align: center;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ═══ CUSTOM THEMES (purchasable via Marketplace) ═══ */

/* Neon City */
body.theme-neon {
    --primary-color: #FF00FF;
    --secondary-color: #00FFFF;
    --accent-color: #FF006E;
    --bg-dark: #0a0015;
    --surface-dark: #1a0033;
    --surface-darker: #0d001a;
    --glow-primary: 0 0 25px rgba(255,0,255,0.5);
}

/* Royal Gold */
body.theme-gold {
    --primary-color: #FFD700;
    --secondary-color: #FFA500;
    --accent-color: #FF4500;
    --bg-dark: #1a1000;
    --surface-dark: #2d1f00;
    --surface-darker: #1a1200;
    --glow-primary: 0 0 25px rgba(255,215,0,0.4);
}

/* Ocean Deep */
body.theme-ocean {
    --primary-color: #00CED1;
    --secondary-color: #0077B6;
    --accent-color: #FF6B6B;
    --bg-dark: #001219;
    --surface-dark: #002233;
    --surface-darker: #001522;
    --glow-primary: 0 0 25px rgba(0,206,209,0.4);
}

/* Forest */
body.theme-forest {
    --primary-color: #00E676;
    --secondary-color: #69F0AE;
    --accent-color: #FF5252;
    --bg-dark: #0a1a0a;
    --surface-dark: #1a2e1a;
    --surface-darker: #0d1f0d;
    --glow-primary: 0 0 25px rgba(0,230,118,0.4);
}

/* Sunset */
body.theme-sunset {
    --primary-color: #FF6B6B;
    --secondary-color: #FFE66D;
    --accent-color: #4ECDC4;
    --bg-dark: #1a0a0a;
    --surface-dark: #2e1a1a;
    --surface-darker: #1f0d0d;
    --glow-primary: 0 0 25px rgba(255,107,107,0.4);
}