/* =========================================
   ENGLISH ACADEMY RVN — Design System
   variables.css — 5 temas de color
   ========================================= */

/* ── TEMA 1: Azul Noche (default) ───────── */
:root,
[data-theme="azul-noche"] {
    --primary: #4A90D9;
    --primary-light: #5BA3E8;
    --primary-glow: rgba(74, 144, 217, 0.10);
    --bg-dark: #1a2332;
    --bg-darker: #0f1923;
    --bg-input: rgba(15, 25, 35, 0.7);
    --text-primary: #FFFFFF;
    --text-secondary: #B0C4D8;
    --text-muted: #6B8299;
    --border: rgba(74, 144, 217, 0.15);
    --border-hover: rgba(74, 144, 217, 0.40);
    --success: #4CAF50;
    --error: #E53935;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 20px rgba(74, 144, 217, 0.35);
    --transition: 0.3s ease;
    /* compatibilidad legacy */
    --shadow-blue: 0 4px 20px rgba(74, 144, 217, 0.35);
}

/* ── TEMA 2: Verde Esmeralda ─────────────── */
[data-theme="verde-esmeralda"] {
    --primary: #2ecc71;
    --primary-light: #4dd989;
    --primary-glow: rgba(46, 204, 113, 0.10);
    --bg-dark: #132b24;
    --bg-darker: #0d1f1a;
    --bg-input: rgba(13, 31, 26, 0.7);
    --text-primary: #FFFFFF;
    --text-secondary: #a8d8b9;
    --text-muted: #5a9a74;
    --border: rgba(46, 204, 113, 0.15);
    --border-hover: rgba(46, 204, 113, 0.40);
    --success: #4CAF50;
    --error: #E53935;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 20px rgba(46, 204, 113, 0.35);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(46, 204, 113, 0.35);
}

/* ── TEMA 3: Acero Metálico ──────────────── */
[data-theme="acero-metalico"] {
    --primary: #7ec8e3;
    --primary-light: #9dd8ef;
    --primary-glow: rgba(126, 200, 227, 0.10);
    --bg-dark: #1c2333;
    --bg-darker: #0e1117;
    --bg-input: rgba(14, 17, 23, 0.7);
    --text-primary: #e8edf2;
    --text-secondary: #8fa8b8;
    --text-muted: #5a7080;
    --border: rgba(126, 200, 227, 0.15);
    --border-hover: rgba(126, 200, 227, 0.40);
    --success: #4CAF50;
    --error: #E53935;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 4px 20px rgba(126, 200, 227, 0.30);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(126, 200, 227, 0.30);
}

/* ── TEMA 4: Naranja Volcán ──────────────── */
[data-theme="naranja-volcan"] {
    --primary: #f97316;
    --primary-light: #fb923c;
    --primary-glow: rgba(249, 115, 22, 0.10);
    --bg-dark: #231a0f;
    --bg-darker: #15100a;
    --bg-input: rgba(21, 16, 10, 0.7);
    --text-primary: #FFFFFF;
    --text-secondary: #f5c49a;
    --text-muted: #9a6a3a;
    --border: rgba(249, 115, 22, 0.15);
    --border-hover: rgba(249, 115, 22, 0.40);
    --success: #4CAF50;
    --error: #E53935;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 20px rgba(249, 115, 22, 0.35);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(249, 115, 22, 0.35);
}

/* ── TEMA 5: Claro Profesional ───────────── */
[data-theme="claro-profesional"] {
    --primary: #4A90D9;
    --primary-light: #5BA3E8;
    --primary-glow: rgba(74, 144, 217, 0.10);
    --bg-dark: #ffffff;
    --bg-darker: #f0f4f8;
    --bg-input: rgba(240, 244, 248, 0.9);
    --text-primary: #1a2332;
    --text-secondary: #4a6070;
    --text-muted: #8aa0b0;
    --border: rgba(74, 144, 217, 0.20);
    --border-hover: rgba(74, 144, 217, 0.50);
    --success: #4CAF50;
    --error: #E53935;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 4px 20px rgba(74, 144, 217, 0.25);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(74, 144, 217, 0.25);
}

/* ── Niveles CEFR (globales, no cambian) ─── */
:root {
    --a1: #4CAF50;
    --a2: #8BC34A;
    --b1: #FF9800;
    --b2: #2196F3;
    --c1: #E53935;
    --c2: #9C27B0;
    --premium-gold: #FFD700;
}
/* ── FONT SIZE SCALE (rem base) ── */
/* El truco: cambiamos font-size en html y todo lo que use rem escala solo */
:root,
html[data-font="mediana"] {
    font-size: 16px;
}

html[data-font="chica"] {
    font-size: 13px;
}

html[data-font="grande"] {
    font-size: 19px;
}