:root {
  --bg: #f8f9fa;
  --surface: #ffffff;
  --text: #1a1a2e;
  --text-secondary: #4a4a6a;
  --text-muted: #8a8aa3;
  --border: #e2e4ea;
  --border-light: #eef0f4;
  --primary: #2563eb;
  --primary-light: #eff6ff;
  --primary-hover: #1d4ed8;
  --reading: #2563eb;
  --listening: #7c3aed;
  --writing: #ea580c;
  --speaking: #16a34a;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-sm: 8px;
}

[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #1a1d23;
  --text: #e8e8ef;
  --text-secondary: #a0a0b8;
  --text-muted: #6a6a85;
  --border: #2a2d35;
  --border-light: #22252d;
  --primary: #3b82f6;
  --primary-light: #1e293b;
  --primary-hover: #60a5fa;
  --reading: #3b82f6;
  --listening: #8b5cf6;
  --writing: #f97316;
  --speaking: #22c55e;
}