:root {
  /* 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;

  /* 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: #1A1A18;
    --surface: #242422;
    --muted: #2C2C2A;
    --text: #F5F5F2;
    --text-2: #B4B2A9;
    --text-3: #888780;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.15);
  }
}

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