/* 设计令牌：颜色 / 圆角 / 阴影 / 字体只在这里定义，组件一律引用变量（designTokenLiteralGuard.test.ts 守门）。
   色彩取自 French Dojo 九宫格 VI：米白纸底 + 暖墨黑承担重量 + 一个 Dojo 蓝（App 图标、播放键、选中 tab、链接）。
   暖白底是用户明确要求，覆盖通用准则的冷灰默认，所以灰阶整套都是暖调；三色旗的蓝 / 红只出现在字标里，界面里不用。
   彩色只有三处：Dojo 蓝（选中、链接、播放、朗读位置）、琥珀（等你动手 / 后备来源）、红（真出错）。 */
:root, [data-theme='light'] {
  color-scheme: light;
  --surface-page: #fbf9f5;
  --surface-panel: #fffefb;
  --surface-sunken: #f3f0ea;
  --surface-hover: #ebe6de;
  --line-hairline: #e7e1d7;
  --line-strong: #d2cabd;
  --ink: #1d1812;
  --ink-secondary: #5f574d;
  --ink-placeholder: #8a8178;
  --ink-on-ink: #fbf9f5;

  /* Dojo 蓝：品牌强调色。--accent 是可读文字档（米白底上 7.7:1），--brand-solid 是实底（播放键圆盘、进度），上面放 --ink-on-brand */
  --accent: #2b5376;
  --accent-tint: #d4e1ec;
  --brand-solid: #2b5376;
  --brand-solid-hover: #234664;
  --ink-on-brand: #fbf9f5;
  /* 朗读位置用蓝色浅底（VI 里正文高亮词就是这一档）；选中词同色系更深一档 + 2px 蓝底线，靠形状区分 */
  --speaking-tint: #dde7f0;
  --current-sentence-tint: #eef3f7;
  --saved-word-underline: #6c90b0;

  --success: #3d7a55;
  --danger-text: #a8322b;
  --pending-text: #8a5a14;
  --pending-tint: #f6ead2;
  --focus-ring: rgb(43 83 118 / 0.3);
  --overlay-scrim: rgb(29 24 18 / 0.3);

  /* 反相面：暂停时的译文卡片（亮色主题墨底、暗色主题纸底），卡片内把这组映射回普通 token */
  --inverse-surface: #1d1812;
  --inverse-surface-sunken: #2c261f;
  --inverse-surface-hover: #362f27;
  --inverse-line: #3a332a;
  --inverse-ink: #ece6db;
  --inverse-ink-secondary: #a99f92;
  --inverse-speaking-tint: #2f4a63;

  --radius-control: 6px;
  --radius-card: 10px;
  --radius-drawer: 14px;
  --shadow-control: 0 1px 2px rgb(40 30 20 / 0.08);
  --shadow-float: 0 1px 2px rgb(40 30 20 / 0.05), 0 8px 24px rgb(40 30 20 / 0.08);
  --shadow-drawer: 0 -8px 28px rgb(40 30 20 / 0.12);

  /* 标题用 VI 字标同族的粗软衬线（Fraunces SOFT 100），只给内容标题与页面标题；正文仍是 Literata，界面是 Instrument Sans */
  --font-display: 'Fraunces', 'Literata', Georgia, 'Songti SC', serif;
  --font-reading: 'Literata', Georgia, 'Songti SC', serif;
  --font-ui: 'Instrument Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --sidebar-width: 220px;
  --sidebar-collapsed-width: 60px;
  --dictionary-panel-width: 350px;
  --reading-column-max-width: 760px;
  /* 复述视图的内容宽：第 1 层提示逐句左右两栏，比正文宽 */
  --recitation-column-max-width: 1120px;
}

/* 暗色 = VI 里的深色名片：暖墨黑底、纸白字、提亮的 Dojo 蓝 */
:root[data-theme='dark'], [data-theme='dark'] {
  color-scheme: dark;
  --surface-page: #1c1813;
  --surface-panel: #231e18;
  --surface-sunken: #2b251e;
  --surface-hover: #352e26;
  --line-hairline: #3a322a;
  --line-strong: #4e453a;
  --ink: #f2ede5;
  --ink-secondary: #b5aa9c;
  --ink-placeholder: #8a8073;
  --ink-on-ink: #1c1813;

  --accent: #7fb0d8;
  --accent-tint: #2f4a63;
  --brand-solid: #7fb0d8;
  --brand-solid-hover: #96bfe0;
  --ink-on-brand: #1c1813;
  --speaking-tint: #2a3f53;
  --current-sentence-tint: #212a32;
  --saved-word-underline: #6f9cc2;

  --success: #7cc29a;
  --danger-text: #e8857a;
  --pending-text: #e0b468;
  --pending-tint: #3d3020;
  --focus-ring: rgb(127 176 216 / 0.4);
  --overlay-scrim: rgb(0 0 0 / 0.5);

  --inverse-surface: #ece6db;
  --inverse-surface-sunken: #ddd5c8;
  --inverse-surface-hover: #d3cabc;
  --inverse-line: #cbc1b2;
  --inverse-ink: #2a241d;
  --inverse-ink-secondary: #5f574d;
  --inverse-speaking-tint: #bcd2e5;

  --shadow-control: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-drawer: 0 -8px 28px rgb(0 0 0 / 0.4);
}