/* 设计令牌（纯 CSS，无外部依赖）。视觉方向 A「苹果式产品展示」：克制——黑白灰加一个蓝，半粗字重，浅灰底上放白卡片。
   亮 / 暗两套：theme.js 在 <html> 上写 data-theme（用户选的，或跟随系统），下面 :root[data-theme="dark"] 覆盖亮色。
   令牌沿用 --md-sys-* 的名字（组件早就按这些角色写好了），值换成新方向的；组件里只写变量，不写十六进制；颜色成对使用（X 配 on-X）。 */

:root {
  color-scheme: light;

  /* ───── 颜色角色（亮）───── */
  --md-sys-color-primary: #0b57d0;                /* 唯一的强调色：主按钮、链接、当前项 */
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e9f0fd;
  --md-sys-color-on-primary-container: #0a3a8c;

  --md-sys-color-secondary: #0b57d0;              /* 焦点环 */
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8e8ed;    /* 次要按钮、选中的筛选项底色：苹果式灰 */
  --md-sys-color-on-secondary-container: #1d1d1f;

  --md-sys-color-tertiary: #157a3e;               /* 在本产品里用作「答对」 */
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e6f5ec;
  --md-sys-color-on-tertiary-container: #0f5a2e;

  --md-sys-color-error: #c2322a;                  /* 「答错」 */
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fdecea;
  --md-sys-color-on-error-container: #8a1f17;

  --md-sys-color-surface: #f5f5f7;                /* 页面底：浅灰 */
  --md-sys-color-on-surface: #1d1d1f;
  --md-sys-color-on-surface-variant: #5c5c61;
  --md-sys-color-surface-dim: #e3e3e8;
  --md-sys-color-surface-bright: #fbfbfd;
  --md-sys-color-surface-container-lowest: #ffffff; /* 卡片：白 */
  --md-sys-color-surface-container-low: #ffffff;
  --md-sys-color-surface-container: #efeff2;
  --md-sys-color-surface-container-high: #e8e8ed;
  --md-sys-color-surface-container-highest: #dedee3;

  --md-sys-color-outline: #86868b;
  --md-sys-color-outline-variant: #d2d2d7;        /* 细分隔线 */

  --md-sys-color-inverse-surface: #1d1d1f;
  --md-sys-color-inverse-on-surface: #f5f5f7;
  --md-sys-color-inverse-primary: #8ab4ff;

  --md-sys-color-scrim: rgb(0 0 0 / 0.36);

  /* 扩展色：标记待检查 / AI 补全答案 */
  --md-ext-color-flag: #8a5d00;
  --md-ext-color-on-flag: #ffffff;
  --md-ext-color-flag-container: #fff1d1;
  --md-ext-color-on-flag-container: #4a3200;

  /* 扩展：深色主卡（开始模拟、成绩），白卡片的投影，毛玻璃顶栏 */
  --md-ext-hero: #1d1d1f;
  --md-ext-on-hero: #f5f5f7;
  --md-ext-on-hero-variant: #a1a1a6;
  --md-ext-card-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 2px 10px -4px rgb(0 0 0 / .06);
  --md-ext-glass: rgb(245 245 247 / .78);

  /* ───── 字体：中文优先用系统字体（苹方、鸿蒙黑体、小米 MiSans、微软雅黑），国内打开不依赖任何外部字体 ───── */
  --md-ref-typeface-brand: "SF Pro Display", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-ref-typeface-plain: "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 字阶：font 简写 = 字重 字号/行高 字体。标题用半粗（600），不用特粗 */
  --md-sys-typescale-display-large: 600 3.5rem/1.07 var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium: 600 2.75rem/1.09 var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small: 600 2.25rem/1.11 var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large: 600 2rem/1.2 var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium: 600 1.75rem/1.22 var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small: 600 1.375rem/1.27 var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large: 600 1.25rem/1.3 var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium: 600 1.0625rem/1.41 var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small: 600 0.9375rem/1.33 var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large: 400 1.0625rem/1.53 var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 0.9375rem/1.47 var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 0.8125rem/1.38 var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large: 500 0.9375rem/1.33 var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 500 0.8125rem/1.23 var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small: 500 0.75rem/1.33 var(--md-ref-typeface-plain);
  /* 题干与阅读材料：长文本需要更大的字号与行高 */
  --md-ext-typescale-reading: 400 1.125rem/1.85 var(--md-ref-typeface-plain);

  /* ───── 形状：卡片 20、选项 14、小控件 10，按钮一律胶囊 ───── */
  --md-sys-shape-corner-extra-small: 6px;
  --md-sys-shape-corner-small: 10px;
  --md-sys-shape-corner-medium: 14px;
  --md-sys-shape-corner-large: 20px;
  --md-sys-shape-corner-extra-large: 24px;
  --md-sys-shape-corner-full: 9999px;

  /* ───── 阴影（只给浮层）───── */
  --md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / .08), 0 2px 8px rgb(0 0 0 / .06);
  --md-sys-elevation-2: 0 4px 14px rgb(0 0 0 / .1), 0 1px 3px rgb(0 0 0 / .06);
  --md-sys-elevation-3: 0 24px 60px -12px rgb(0 0 0 / .3), 0 6px 16px rgb(0 0 0 / .08);

  /* ───── 动效 ───── */
  --md-sys-motion-easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium4: 450ms;

  /* ───── 状态层（hover / focus / pressed 的叠加透明度）───── */
  --md-sys-state-hover: 0.05;
  --md-sys-state-focus: 0.08;
  --md-sys-state-pressed: 0.1;

  /* ───── 间距（8 的倍数，4 为半步）与触控目标 ───── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --tap: 48px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --md-sys-color-primary: #8ab4ff;
  --md-sys-color-on-primary: #04245c;
  --md-sys-color-primary-container: #12305f;
  --md-sys-color-on-primary-container: #d6e3ff;

  --md-sys-color-secondary: #8ab4ff;
  --md-sys-color-on-secondary: #04245c;
  --md-sys-color-secondary-container: #2c2c2e;
  --md-sys-color-on-secondary-container: #f5f5f7;

  --md-sys-color-tertiary: #4fd282;
  --md-sys-color-on-tertiary: #00391a;
  --md-sys-color-tertiary-container: #10301d;
  --md-sys-color-on-tertiary-container: #b9f0cf;

  --md-sys-color-error: #ff7b72;
  --md-sys-color-on-error: #410e0b;
  --md-sys-color-error-container: #3d1512;
  --md-sys-color-on-error-container: #ffdad6;

  --md-sys-color-surface: #000000;
  --md-sys-color-on-surface: #f5f5f7;
  --md-sys-color-on-surface-variant: #aeaeb3;
  --md-sys-color-surface-dim: #000000;
  --md-sys-color-surface-bright: #2c2c2e;
  --md-sys-color-surface-container-lowest: #1c1c1e;
  --md-sys-color-surface-container-low: #1c1c1e;
  --md-sys-color-surface-container: #242426;
  --md-sys-color-surface-container-high: #2c2c2e;
  --md-sys-color-surface-container-highest: #3a3a3c;

  --md-sys-color-outline: #8e8e93;
  --md-sys-color-outline-variant: #38383a;

  --md-sys-color-inverse-surface: #f5f5f7;
  --md-sys-color-inverse-on-surface: #1d1d1f;
  --md-sys-color-inverse-primary: #0b57d0;

  --md-sys-color-scrim: rgb(0 0 0 / 0.6);

  --md-ext-color-flag: #f4bf48;
  --md-ext-color-on-flag: #402d00;
  --md-ext-color-flag-container: #3d2e00;
  --md-ext-color-on-flag-container: #ffdf9e;

  --md-ext-hero: #1c1c1e;
  --md-ext-on-hero: #f5f5f7;
  --md-ext-on-hero-variant: #a1a1a6;
  --md-ext-card-shadow: none;
  --md-ext-glass: rgb(0 0 0 / .72);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--md-sys-color-surface);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  font: var(--md-sys-typescale-body-large);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1 { font: var(--md-sys-typescale-headline-large); letter-spacing: -.025em; text-wrap: balance; }
h2 { font: var(--md-sys-typescale-title-large); letter-spacing: -.02em; text-wrap: balance; }
h3 { font: var(--md-sys-typescale-title-medium); }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }

/* 浏览器自带的部分也属于设计：选中色、光标、焦点环、滚动条 */
::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
input, textarea { caret-color: var(--md-sys-color-primary); }
:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-extra-small); }
* { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: 8px; border: 2px solid var(--md-sys-color-surface); }

.icon { width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}