/* ==========================================================================
   base.css —— 基础层：重置、字体、排版工具类
   依赖 css/tokens.css（先引入）。只放“每个页面都要用”的东西。
   ========================================================================== */

/* ---- 字体族：Roboto 打头，中文回落到系统无衬线 ---- */
:root {
  --font-cjk: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans',
    'Source Han Sans SC', sans-serif;
  --md-ref-typeface-brand: 'Roboto', var(--font-cjk);
  --md-ref-typeface-plain: 'Roboto', var(--font-cjk);

  /* 让组件的 typescale 字体也带上中文回落，避免中文掉到 Times */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: 400;
  letter-spacing: -0.01em;
}

a {
  color: var(--md-sys-color-primary);
  text-underline-offset: 3px;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

code, pre {
  font-family: var(--md-ref-typeface-mono);
}

::selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 排版工具类（直接对应 M3 typescale 令牌）---- */
.md-display-large {
  font: var(--md-sys-typescale-display-large);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}
.md-display-medium {
  font: var(--md-sys-typescale-display-medium);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
}
.md-headline-large {
  font: var(--md-sys-typescale-headline-large);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}
.md-headline-medium {
  font: var(--md-sys-typescale-headline-medium);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}
.md-headline-small {
  font: var(--md-sys-typescale-headline-small);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}
.md-title-large {
  font: var(--md-sys-typescale-title-large);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
}
.md-title-medium {
  font: var(--md-sys-typescale-title-medium);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.md-title-small {
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
}
.md-body-large {
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
.md-body-medium {
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.md-body-small {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.md-label-large {
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.md-label-medium {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}