:root {
  color-scheme: light;

  /* Metis design tokens: quiet, tactile, and readable on a teaching desk. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --bg: #f4f8f7;
  --surface: #ffffff;
  --surface-muted: #eef7f5;
  --surface-raised: #ffffff;
  --text: #17302d;
  --muted: #647773;
  --primary: #167d73;
  --primary-strong: #0f665f;
  --primary-on: #ffffff;
  --accent: #e99616;
  --border: #d9e6e3;
  --border-strong: #b7d8d2;
  --focus-ring: rgb(22 125 115 / 42%);
  --overlay: rgb(10 36 33 / 48%);

  --success-surface: #eaf8f1;
  --success-text: #067647;
  --success-border: #b7ddd0;
  --warning-surface: #fff4e5;
  --warning-text: #8a5000;
  --warning-border: #f4d29f;
  --info-surface: #eef4ff;
  --info-text: #2949a6;
  --info-border: #c9d7fa;
  --danger-surface: #fff0ee;
  --danger-text: #a92a20;
  --danger-border: #f2c8c2;
  --danger: var(--danger-text);

  --shadow-resting: 0 8px 24px rgb(19 66 59 / 8%);
  --shadow-raised: 0 16px 44px rgb(10 45 41 / 20%);
  --shadow: var(--shadow-resting);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1b1a;
    --surface: #172625;
    --surface-muted: #203532;
    --surface-raised: #1c2e2c;
    --text: #e8f1ef;
    --muted: #a8bab6;
    --primary: #61bcb0;
    --primary-strong: #8bd3ca;
    --primary-on: #092521;
    --accent: #ffc35a;
    --border: #324744;
    --border-strong: #49645f;
    --focus-ring: rgb(97 188 176 / 58%);
    --overlay: rgb(0 0 0 / 68%);

    --success-surface: #153b2d;
    --success-text: #8ee0b7;
    --success-border: #286044;
    --warning-surface: #3d2b13;
    --warning-text: #f8c673;
    --warning-border: #6b4b1d;
    --info-surface: #1d2d54;
    --info-text: #b8cafa;
    --info-border: #354b81;
    --danger-surface: #44221f;
    --danger-text: #ffb4ac;
    --danger-border: #743832;

    --shadow-resting: 0 8px 24px rgb(0 0 0 / 20%);
    --shadow-raised: 0 18px 48px rgb(0 0 0 / 42%);
  }
}