/* 設計 token：由 Docs/design-tokens.json（version 1）轉出。修改 token 時兩邊要一起改。 */
/* 淺色主題「紙張」為預設；系統偏好深色，或 <html data-theme="dark"> 時用深色主題「夜讀」。 */

:root {
  color-scheme: light;
  --surface-000: #f8f4ec;
  --surface-100: #fffcf6;
  --surface-200: #efe9dd;
  --border: #d9d0bf;
  --border-strong: #8f8576;
  --ink: #2b2824;
  --ink-muted: #5c564d;
  --primary: #1d6a66;
  --primary-strong: #14504d;
  --primary-soft: #dcece8;
  --on-primary: #fffcf6;
  --correct: #24618a;
  --correct-soft: #deebf4;
  --wrong: #a8481a;
  --wrong-soft: #f7e3d6;
  --skill-listen: #2f5f8f;
  --skill-speak: #7a4d8a;
  --skill-read: #1d6a66;
  --skill-write: #8a5a12;
  --mastery-0: #e6e0d4;
  --mastery-1: #e8a77d;
  --mastery-2: #ecc98f;
  --mastery-3: #c9d9a8;
  --mastery-4: #86bfae;
  --mastery-5: #2f7f78;
  --shadow-card: 0 1px 2px rgba(60,48,30,0.06), 0 4px 14px rgba(60,48,30,0.06);

  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-word: "Atkinson Hyperlegible", "Noto Sans TC", system-ui, sans-serif;
  --type-word-xl-size: 44px;
  --type-word-xl-line: 52px;
  --type-word-xl-weight: 700;
  --type-word-md-size: 22px;
  --type-word-md-line: 30px;
  --type-word-md-weight: 700;
  --type-sentence-size: 19px;
  --type-sentence-line: 32px;
  --type-sentence-weight: 400;
  --type-h1-size: 28px;
  --type-h1-line: 40px;
  --type-h1-weight: 700;
  --type-h2-size: 21px;
  --type-h2-line: 32px;
  --type-h2-weight: 700;
  --type-body-size: 17px;
  --type-body-line: 30px;
  --type-body-weight: 400;
  --type-meaning-size: 20px;
  --type-meaning-line: 32px;
  --type-meaning-weight: 500;
  --type-label-size: 15px;
  --type-label-line: 24px;
  --type-label-weight: 600;
  --type-caption-size: 13px;
  --type-caption-line: 20px;
  --type-caption-weight: 400;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --tap-min: 48px;
  --measure: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-000: #1b1a18;
    --surface-100: #24221f;
    --surface-200: #2e2b27;
    --border: #423e38;
    --border-strong: #7d766c;
    --ink: #e9e4da;
    --ink-muted: #b3ab9e;
    --primary: #72c2b9;
    --primary-strong: #9ad6ce;
    --primary-soft: #1f3634;
    --on-primary: #10201f;
    --correct: #7fb8e0;
    --correct-soft: #1c2c38;
    --wrong: #f0a070;
    --wrong-soft: #3a241a;
    --skill-listen: #8db6e3;
    --skill-speak: #c9a3d6;
    --skill-read: #72c2b9;
    --skill-write: #e2b46a;
    --mastery-0: #34312c;
    --mastery-1: #9a5a35;
    --mastery-2: #8a6d3a;
    --mastery-3: #5e7146;
    --mastery-4: #3f7f72;
    --mastery-5: #7fd0c4;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-000: #1b1a18;
  --surface-100: #24221f;
  --surface-200: #2e2b27;
  --border: #423e38;
  --border-strong: #7d766c;
  --ink: #e9e4da;
  --ink-muted: #b3ab9e;
  --primary: #72c2b9;
  --primary-strong: #9ad6ce;
  --primary-soft: #1f3634;
  --on-primary: #10201f;
  --correct: #7fb8e0;
  --correct-soft: #1c2c38;
  --wrong: #f0a070;
  --wrong-soft: #3a241a;
  --skill-listen: #8db6e3;
  --skill-speak: #c9a3d6;
  --skill-read: #72c2b9;
  --skill-write: #e2b46a;
  --mastery-0: #34312c;
  --mastery-1: #9a5a35;
  --mastery-2: #8a6d3a;
  --mastery-3: #5e7146;
  --mastery-4: #3f7f72;
  --mastery-5: #7fd0c4;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
}