:root {
  /* Test-taking design system */
  --brand-primary: #0F5132;
  --brand-primary-hover: #0A3D24;
  --brand-primary-soft: #E6F0EB;
  --accent: #E97A3C;
  --accent-soft: #FDEDE0;
  --warning: #D97706;
  --danger: #DC2626;
  --success: #059669;
  --neutral-900: #0F172A;
  --neutral-700: #334155;
  --neutral-500: #64748B;
  --neutral-300: #CBD5E1;
  --neutral-100: #F1F5F9;
  --neutral-50: #F8FAFC;
  --white: #FFFFFF;

  --test-font-ui: "Be Vietnam Pro", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --test-font-passage: "Be Vietnam Pro", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --test-display: 700 32px/40px var(--test-font-ui);
  --test-h1: 700 24px/32px var(--test-font-ui);
  --test-h2: 600 20px/28px var(--test-font-ui);
  --test-h3: 600 18px/26px var(--test-font-ui);
  --test-body-lg: 400 16px/24px var(--test-font-ui);
  --test-body: 400 14px/22px var(--test-font-ui);
  --test-caption: 500 12px/18px var(--test-font-ui);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-popover: 0 10px 25px rgba(15,23,42,0.10);

  /* Brand */
  --brand: #085041;
  --brand-hover: #0F6E56;
  --brand-soft: #E1F5EE;
  --brand-dark: #04342C;

  /* Surfaces */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --muted: #F1EFE8;

  /* Text */
  --text: #1A1A18;
  --text-2: #5F5E5A;
  --text-3: #888780;

  /* Border */
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);

  /* Module dots */
  --dot-aptis: #185FA5;
  --dot-vstep: #639922;
  --dot-toeic: #BA7517;
  --dot-ielts: #534AB7;

  /* Status */
  --info-bg: #E6F1FB;     --info-fg: #185FA5;
  --success-bg: #EAF3DE;  --success-fg: #3B6D11;
  --warning-bg: #FAEEDA;  --warning-fg: #854F0B;
  --danger-bg: #FCEBEB;   --danger-fg: #A32D2D;

  /* Shared aliases used by migrated and legacy page CSS. */
  --bg-base: var(--bg);
  --bg-surface: var(--surface);
  --bg-elevated: var(--surface);
  --bg-muted: var(--muted);
  --bg-hover: rgba(0,0,0,0.04);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --text-tertiary: var(--text-3);
  --border-subtle: var(--border);
  --border-default: var(--border-strong);
  --brand-primary-strong: var(--brand-dark);
  --input-bg: var(--surface);
  --input-text: var(--text);
  --input-border: var(--border-strong);
  --focus-ring: var(--ring);
  --warning-text: var(--warning-fg);
  --success-text: var(--success-fg);
  --danger-text: var(--danger-fg);

  /* Motion */
  --t-fast: 150ms;
  --t-base: 250ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-hover: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --ring: 0 0 0 3px rgba(15,110,86,0.18);

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101312;
    --surface: #1D211E;
    --muted: #202721;
    --text: #F4F6F3;
    --text-2: #A9B3AD;
    --text-3: #7F8A84;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --brand-primary: #4FC49E;
    --brand-primary-hover: #66D2AD;
    --brand-primary-strong: #D9F8EA;
    --brand-primary-soft: rgba(79,196,158,0.14);
    --bg-base: var(--bg);
    --bg-surface: var(--surface);
    --bg-elevated: #222923;
    --bg-muted: var(--muted);
    --bg-hover: #263029;
    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --text-muted: var(--text-3);
    --text-tertiary: var(--text-3);
    --border-subtle: var(--border);
    --border-default: var(--border-strong);
    --input-bg: #171D1A;
    --input-text: var(--text);
    --input-border: var(--border-strong);
    --focus-ring: 0 0 0 3px rgba(79,196,158,0.22);
    --info-bg: rgba(114,168,222,0.14);     --info-fg: #B5D4F4;
    --success-bg: rgba(74,222,128,0.13);   --success-fg: #BBF7D0;
    --warning-bg: rgba(250,199,117,0.12);  --warning-fg: #F4C987;
    --danger-bg: rgba(248,113,113,0.13);   --danger-fg: #FECACA;
    --warning-text: var(--warning-fg);
    --success-text: var(--success-fg);
    --danger-text: var(--danger-fg);
  }
}

/* Manual dark mode (overrides prefers-color-scheme).
   Toggle by setting data-theme="dark" on <html> or <body>. */
[data-theme="dark"] {
  --bg: #101312;
  --surface: #1D211E;
  --muted: #202721;
  --text: #F4F6F3;
  --text-2: #A9B3AD;
  --text-3: #7F8A84;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --brand-primary: #4FC49E;
  --brand-primary-hover: #66D2AD;
  --brand-primary-strong: #D9F8EA;
  --brand-soft: rgba(79,196,158,0.14);
  --brand-primary-soft: rgba(79,196,158,0.14);
  --bg-base: var(--bg);
  --bg-surface: var(--surface);
  --bg-elevated: #222923;
  --bg-muted: var(--muted);
  --bg-hover: #263029;
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --text-tertiary: var(--text-3);
  --border-subtle: var(--border);
  --border-default: var(--border-strong);
  --input-bg: #171D1A;
  --input-text: var(--text);
  --input-border: var(--border-strong);
  --focus-ring: 0 0 0 3px rgba(79,196,158,0.22);
  --info-bg: rgba(114,168,222,0.14);     --info-fg: #B5D4F4;
  --success-bg: rgba(74,222,128,0.13);   --success-fg: #BBF7D0;
  --warning-bg: rgba(250,199,117,0.12);  --warning-fg: #F4C987;
  --danger-bg: rgba(248,113,113,0.13);   --danger-fg: #FECACA;
  --warning-text: var(--warning-fg);
  --success-text: var(--success-fg);
  --danger-text: var(--danger-fg);
}

[data-theme="light"] {
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --muted: #F1EFE8;
  --text: #1A1A18;
  --text-2: #5F5E5A;
  --text-3: #888780;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);
  --brand-soft: #E1F5EE;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}