:root {
  color-scheme: light; /* 原生表單元件、捲軸跟著主題 */

  /* Colors */
  /* white and black */
  --white: #ffffff;
  --black: #000000;

  /* blue */
  --blue-100: #c7ecf9;
  --blue-200: #a2dbf0;
  --blue-300: #75ccec;
  --blue-400: #56bde2;
  --blue-500: #29a8d6;
  --blue-600: #1383ac;
  --blue-700: #0a5d7b;
  --blue-800: #053b4e;
  --blue-900: #021923;

  /* orange */
  --orange-100: #f9dbc9;
  --orange-200: #f4c0a2;
  --orange-300: #f3a477;
  --orange-400: #eb854a;
  --orange-500: #e26e2b;
  --orange-600: #b0521b;
  --orange-700: #7b3912;
  --orange-800: #4f270f;
  --orange-900: #20120a;

  /* red */
  --red-100: #f9c9c9;
  --red-200: #f4a2a2;
  --red-300: #f37777;
  --red-400: #eb4a4a;
  --red-500: #e22b2b;
  --red-600: #b01b1b;
  --red-700: #7b1212;
  --red-800: #4f0f0f;
  --red-900: #200a0a;

  /* green */
  --green-100: #c8f5ca;
  --green-200: #a3eba6;
  --green-300: #75e37a;
  --green-400: #50d956;
  --green-500: #4caf50;
  --green-600: #388e3c;
  --green-700: #2e7d32;
  --green-800: #1b5e20;
  --green-900: #0d3b12;

  /* gray */
  --gray-50: #f5f5f5;
  --gray-100: #ededed;
  --gray-200: #d3d3d3;
  --gray-300: #b9b9b9;
  --gray-400: #989898;
  --gray-500: #808080;
  --gray-600: #6c6c6c;
  --gray-700: #555555;
  --gray-800: #3c3c3c;
  --gray-900: #262626;
  --gray-950: #151515;

  --gray-color-10: #9e9e9e;
  --gray-color-12: #bdbdbd;
  --gray-color-13: #eeeeee;

  /*
   * 語意變數：元件只使用以下變數，不直接引用上方色票
   * 深色模式只需要覆寫這一段
   */

  /* 背景 */
  --background-color: var(--white);
  --background-secondary: var(--gray-100); /* 按鈕 hover */
  --fill-color: var(
    --gray-color-13
  ); /* 中性填色：hover 底色、標籤、進度條軌道 */
  --fill-strong-color: var(--gray-color-12); /* 中性填色的 hover / 選中 */

  /* 文字 */
  --text-color: #1f1f1f;
  --text-muted-color: var(--gray-color-10); /* 次要說明文字 */
  --text-faint-color: var(--gray-color-12); /* 最淡的提示文字 */
  --text-white: var(--white); /* 彩色底上的文字，深色模式維持白色 */

  /* 前景：黑色透明度階層，疊在任何底色上都成立 */
  --foreground-900: #000000ed;
  --foreground-800: #000000d3;
  --foreground-700: #000000b9;
  --foreground-600: #00000098;
  --foreground-500: #00000080;
  --foreground-400: #0000006c;
  --foreground-300: #00000055;
  --foreground-200: #0000003c;
  --foreground-100: #00000026;

  /* 邊框 */
  --border-color: var(--foreground-100); /* 按鈕、輸入框 */
  --border-hover-color: var(--foreground-200);
  --border-strong-color: var(--gray-color-12);
  --divider-color: var(--gray-color-13); /* 卡片外框、分隔線 */

  /* 主色 */
  --primary-color: var(--blue-500);
  --primary-dark-color: var(--blue-600); /* 實心按鈕的底邊、hover 底色 */
  --primary-darker-color: var(--blue-700); /* 實心按鈕 hover 的底邊 */
  --primary-text-color: var(--blue-600); /* 淺藍底上的文字 */
  --primary-background-color: #c8f0ff; /* 選中狀態的淺藍底 */
  --primary-card-color: var(--white); /* 淺藍底上的卡片 */

  /* 實心綠色按鈕 */
  --success-color: var(--green-500);
  --success-dark-color: var(--green-600);
  --success-darker-color: var(--green-700);

  /* 停用按鈕 */
  --disabled-color: var(--gray-200);
  --disabled-dark-color: var(--gray-300);

  /* 答對 / 答錯 */
  --correct-border-color: #4caf50;
  --correct-background-color: #e8f5e9;
  --correct-text-color: #329535;

  --wrong-border-color: #f44336;
  --wrong-background-color: #ffe5e8;
  --wrong-text-color: #d32f2f;

  /* 歷史紀錄中使用者選錯的選項 */
  --danger-color: var(--red-500);
  --danger-background-color: var(--red-100);
  --danger-text-color: var(--red-600);

  /* 警告 */
  --warning-color: #c8372d;
  --warning-secondary-color: #f4a5a0;
}

/*
 * 深色模式：只覆寫語意變數，色票不變
 * data-theme 由 index.html 的內嵌腳本與 src/utils/theme.ts 依設定（跟隨系統 / 手動）設定
 */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* 背景 */
  --background-color: var(--gray-950);
  --background-secondary: var(--gray-900);
  --fill-color: var(--gray-900);
  --fill-strong-color: var(--gray-800);

  /* 文字 */
  --text-color: var(--gray-100);
  --text-muted-color: var(--gray-500);
  --text-faint-color: var(--gray-700);

  /* 前景：改為白色透明度階層 */
  --foreground-900: #ffffffed;
  --foreground-800: #ffffffd3;
  --foreground-700: #ffffffb9;
  --foreground-600: #ffffff98;
  --foreground-500: #ffffff80;
  --foreground-400: #ffffff6c;
  --foreground-300: #ffffff55;
  --foreground-200: #ffffff3c;
  --foreground-100: #ffffff26;

  /* 邊框 */
  --border-strong-color: var(--gray-700);
  --divider-color: var(--gray-900);

  /* 主色：整組降一階，原色在深色背景上太亮、比淺色模式更搶眼；淺藍底改為深藍底 */
  --primary-color: var(--blue-600);
  --primary-dark-color: var(--blue-700);
  --primary-darker-color: var(--blue-800);
  --primary-text-color: var(--blue-200);
  --primary-background-color: var(--blue-800);
  --primary-card-color: var(
    --gray-900
  ); /* 比背景亮一階，在深藍底上不會顯得太黑 */

  /* 停用按鈕 */
  --disabled-color: var(--gray-800);
  --disabled-dark-color: var(--gray-700);

  /* 答對 / 答錯 */
  --correct-background-color: var(--green-900);
  --correct-text-color: var(--green-500);

  --wrong-background-color: var(--red-800);
  --wrong-text-color: var(--red-400);

  --danger-background-color: var(--red-800);
  --danger-text-color: var(--red-300);

  /* 警告 */
  --warning-color: var(--red-400);
  --warning-secondary-color: var(--red-700);
}