/* ═══════════════════════════════════════════════════
logIELTS — Shared Design System
Purple + Teal brand · Space Grotesk · Dark/Light
═══════════════════════════════════════════════════ */
/* Google Fonts loaded via +
in each page's (faster on mobile than @import). See MOBILE_AUDIT_fe7d1fa.md H2. */
/* ═══ DARK MODE (default) ═══ */
:root{
--bg:#090E1A;
--surf:#0F1729;
--surf2:#162040;
--surf3:#1E2D4A;
--border:#1E2D4A;
--border2:#2A3E6A;
--text:#E8E0FF;
--text2:#c5c9d8;
--dim:#A89ACC;
--dimmer:#4A3880;
--accent:#7C5CBF;
--accent-hover:#9470D4;
--accent2:#5B3FA0;
--teal:#20B9B9;
--teal-dark:#0D7D6A;
--coral:#E07856;
--green:#22c55e;
--red:#ef4444;
--yellow:#f59e0b;
--r:14px;
--r2:10px;
--shadow:0 8px 32px rgba(0,0,0,.4);
--grad:linear-gradient(135deg,#7C5CBF,#5B3FA0);
--grad-accent:linear-gradient(135deg,#7C5CBF,#20B9B9);
--hdr-bg:rgba(9,14,26,.9);
--nav-bg:rgba(9,14,26,.95);
--overlay-bg:rgba(9,14,26,.85);
--stat-learning-bg:rgba(224,120,86,.1);
--stat-learning-border:rgba(224,120,86,.3);
--stat-learning-text:#E07856;
--stat-mastered-bg:rgba(32,185,185,.1);
--stat-mastered-border:rgba(32,185,185,.3);
--stat-mastered-text:#20B9B9;
--stat-new-bg:rgba(124,92,191,.1);
--stat-new-border:rgba(124,92,191,.3);
--stat-new-text:#7C5CBF;
}
/* ═══ LIGHT MODE ═══
Bg is a cool off-white with a faint purple tint (~3% saturation) — pairs
with brand purple, harmonizes with the existing --surf2/--surf3 lavender
surfaces, and leaves enough contrast for white cards (#FFF) to read as
elevated. Previous bg #EDE6D4 (warm cream/sand) made the whole UI feel
too "earthy" against the cool dark theme; this version reads modern. */
[data-theme="light"]{
--bg:#F3F2F8;
--surf:#FFFFFF;
--surf2:#F0EAFF;
--surf3:#E8E0F8;
--border:#c8c2d8;
--border2:#b0a8cc;
--text:#1a1a2e;
--text2:#2e2e42;
--dim:#475569;
--dimmer:#6b7280;
--accent:#5B3FA0;
--accent-hover:#7C5CBF;
--accent2:#7C5CBF;
--teal:#0D7D6A;
--coral:#C06820;
--shadow:0 8px 32px rgba(0,0,0,.12);
--grad:linear-gradient(135deg,#5B3FA0,#7C5CBF);
--grad-accent:linear-gradient(135deg,#5B3FA0,#0D7D6A);
--hdr-bg:rgba(243,242,248,.95);
--nav-bg:rgba(243,242,248,.98);
--overlay-bg:rgba(232,224,248,.75);
--stat-learning-bg:#FFF4EC;
--stat-learning-border:#ddb99a;
--stat-learning-text:#a0520a;
--stat-mastered-bg:#E8FAF6;
--stat-mastered-border:#7dd8c5;
--stat-mastered-text:#0a6054;
--stat-new-bg:#EDE8FF;
--stat-new-border:#b0a0e0;
--stat-new-text:#4a2d8a;
}
/* ═══ THEME TRANSITION ═══ */
body,header,.hdr{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
/* ═══ LIGHT MODE — card lift ═══ */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .kpi,
[data-theme="light"] .qcard,
[data-theme="light"] .plan-card,
[data-theme="light"] .checkout,
[data-theme="light"] .status-card,
[data-theme="light"] .vocab-section,
[data-theme="light"] .simp-panel,
[data-theme="light"] .stats-bar,
[data-theme="light"] .guide-card,
[data-theme="light"] .footer-guide{
box-shadow:0 1px 4px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
}
[data-theme="light"] .card,
[data-theme="light"] .kpi,
[data-theme="light"] .panel,
[data-theme="light"] .qcard,
[data-theme="light"] .plan-card,
[data-theme="light"] .checkout,
[data-theme="light"] .status-card{
border-color:#c8c2d8;
}
/* Dividers */
[data-theme="light"] .sdivider{background:#c8c2d8}
/* Button defaults */
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-sec{border-color:#b8b2c8}
[data-theme="light"] .btn-home{border-color:#b8b2c8}
/* ═══ LOGO ═══ */
.logo-lockup{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.logo-svg{width:28px;height:28px;flex-shrink:0}
.wordmark{font-family:'Space Grotesk',sans-serif;font-size:17px;letter-spacing:-.02em;line-height:1}
.wordmark-logi{font-weight:700;color:var(--text)}
.wordmark-elts{font-weight:400;color:#20B9B9}
[data-theme="light"] .wordmark-logi{color:#1E1438}
/* ═══ HUB BUTTON ═══ */
.btn-home{
background:none;border:1px solid var(--border);border-radius:8px;
padding:5px 11px;font-family:'Space Grotesk',sans-serif;font-size:.75rem;color:var(--dim);
cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
transition:color .2s,border-color .2s;
}
.btn-home:hover{color:var(--text);border-color:var(--accent)}
/* ═══ THEME TOGGLE ═══ */
.theme-toggle{
width:32px;height:32px;
border-radius:8px;
border:.5px solid var(--border);
background:var(--surf2);
color:var(--dim);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:.9rem;
transition:all .2s;
flex-shrink:0;
padding:0;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--text)}
/* ═══ MOBILE TAP TARGETS (≤600 px) ═══ */
@media (max-width:600px){
.theme-toggle{width:40px;height:40px;font-size:1rem}
.btn-home{padding:9px 14px;min-height:36px;font-size:.82rem}
.btn-sec,.btn-ghost{min-height:36px}
}