/* =========================================
   ENGLISH ACADEMY RVN — Design System
   variables.css — 10 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;
    --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);
}

/* ── TEMA 6: Oro Negro ───────────────────── */
[data-theme="oro-negro"] {
    --primary: #FFD700;
    --primary-light: #FFE44D;
    --primary-glow: rgba(255, 215, 0, 0.10);
    --bg-dark: #1a1600;
    --bg-darker: #0f0e00;
    --bg-input: rgba(15, 14, 0, 0.7);
    --text-primary: #FFFFFF;
    --text-secondary: #e8d88a;
    --text-muted: #8a7a30;
    --border: rgba(255, 215, 0, 0.15);
    --border-hover: rgba(255, 215, 0, 0.45);
    --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(255, 215, 0, 0.30);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(255, 215, 0, 0.30);
}

/* ── TEMA 7: Lima Ácido ──────────────────── */
[data-theme="lima-acido"] {
    --primary: #a3e635;
    --primary-light: #bef264;
    --primary-glow: rgba(163, 230, 53, 0.10);
    --bg-dark: #141a0a;
    --bg-darker: #0c1005;
    --bg-input: rgba(12, 16, 5, 0.7);
    --text-primary: #FFFFFF;
    --text-secondary: #c8e88a;
    --text-muted: #6a8a30;
    --border: rgba(163, 230, 53, 0.15);
    --border-hover: rgba(163, 230, 53, 0.45);
    --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(163, 230, 53, 0.30);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(163, 230, 53, 0.30);
}

/* ── TEMA 8: Púrpura Oscuro ──────────────── */
[data-theme="purpura-oscuro"] {
    --primary: #c084fc;
    --primary-light: #d8a4ff;
    --primary-glow: rgba(192, 132, 252, 0.10);
    --bg-dark: #1a0f2e;
    --bg-darker: #10071f;
    --bg-input: rgba(16, 7, 31, 0.7);
    --text-primary: #FFFFFF;
    --text-secondary: #d4b8f0;
    --text-muted: #7a5a9a;
    --border: rgba(192, 132, 252, 0.15);
    --border-hover: rgba(192, 132, 252, 0.45);
    --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(192, 132, 252, 0.30);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(192, 132, 252, 0.30);
}

/* ── TEMA 9: Rojo Carbón ─────────────────── */
[data-theme="rojo-carbon"] {
    --primary: #f43f5e;
    --primary-light: #fb7185;
    --primary-glow: rgba(244, 63, 94, 0.10);
    --bg-dark: #1f0f12;
    --bg-darker: #130008;
    --bg-input: rgba(19, 0, 8, 0.7);
    --text-primary: #FFFFFF;
    --text-secondary: #f0a8b4;
    --text-muted: #8a3a4a;
    --border: rgba(244, 63, 94, 0.15);
    --border-hover: rgba(244, 63, 94, 0.45);
    --success: #4CAF50;
    --error: #ff6b6b;
    --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(244, 63, 94, 0.30);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(244, 63, 94, 0.30);
}

/* ── TEMA 10: Cian Profundo ──────────────── */
[data-theme="cian-profundo"] {
    --primary: #06b6d4;
    --primary-light: #22d3ee;
    --primary-glow: rgba(6, 182, 212, 0.10);
    --bg-dark: #071a1f;
    --bg-darker: #040f14;
    --bg-input: rgba(4, 15, 20, 0.7);
    --text-primary: #FFFFFF;
    --text-secondary: #8ae8f5;
    --text-muted: #3a7a8a;
    --border: rgba(6, 182, 212, 0.15);
    --border-hover: rgba(6, 182, 212, 0.45);
    --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(6, 182, 212, 0.30);
    --transition: 0.3s ease;
    --shadow-blue: 0 4px 20px rgba(6, 182, 212, 0.30);
}

/* ── Niveles CEFR (globales, no cambian) ─── */
:root {
    --a1: #4CAF50;
    --a2: #8BC34A;
    --b1: #FF9800;
    --b2: #2196F3;
    --c1: #E53935;
    --c2: #9C27B0;
    --premium-gold: #FFD700;
}

/* ── FONT SIZE SCALE ── */
:root,
html[data-font="mediana"] { font-size: 16px; }
html[data-font="chica"]   { font-size: 13px; }
html[data-font="grande"]  { font-size: 19px; }