/*
 * Material 3 设计令牌 —— 自动生成，请勿手改。
 * 生成脚本：build/gen-tokens.mjs    种子色：#6750A4    spec：2021
 *
 * 换肤方式一（构建期）：改脚本里的 SEED，然后 npm run tokens
 * 换肤方式二（运行期）：用 lib/material-color.js 的 SchemeTonalSpot /
 *   MaterialDynamicColors 重新生成变量，见 js/app.js 的 applySeed()
 */

:root {
  color-scheme: light;
  --md-sys-color-background: #fdf7ff;
  --md-sys-color-on-background: #1d1b20;
  --md-sys-color-surface: #fdf7ff;
  --md-sys-color-surface-dim: #ded8e0;
  --md-sys-color-surface-bright: #fdf7ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f8f2fa;
  --md-sys-color-surface-container: #f2ecf4;
  --md-sys-color-surface-container-high: #ece6ee;
  --md-sys-color-surface-container-highest: #e6e0e9;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-on-surface-variant: #49454e;
  --md-sys-color-outline: #7a757f;
  --md-sys-color-outline-variant: #cac4cf;
  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-inverse-on-surface: #f5eff7;
  --md-sys-color-primary: #65558f;
  --md-sys-color-primary-dim: #594982;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e9ddff;
  --md-sys-color-on-primary-container: #4d3d75;
  --md-sys-color-primary-fixed: #e9ddff;
  --md-sys-color-primary-fixed-dim: #cfbdfe;
  --md-sys-color-on-primary-fixed: #201047;
  --md-sys-color-on-primary-fixed-variant: #4d3d75;
  --md-sys-color-inverse-primary: #cfbdfe;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-secondary-dim: #564f64;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #4a4458;
  --md-sys-color-secondary-fixed: #e8def8;
  --md-sys-color-secondary-fixed-dim: #cbc2db;
  --md-sys-color-on-secondary-fixed: #1e192b;
  --md-sys-color-on-secondary-fixed-variant: #4a4458;
  --md-sys-color-tertiary: #7e5260;
  --md-sys-color-tertiary-dim: #704654;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd9e3;
  --md-sys-color-on-tertiary-container: #633b48;
  --md-sys-color-tertiary-fixed: #ffd9e3;
  --md-sys-color-tertiary-fixed-dim: #efb8c8;
  --md-sys-color-on-tertiary-fixed: #31101d;
  --md-sys-color-on-tertiary-fixed-variant: #633b48;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-error-dim: #a80710;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #65558f;
  --md-sys-color-surface-variant: #e6e0e9;
}

/* 暗色：<html data-theme="dark"> 手动切换 */
[data-theme='dark'] {
  color-scheme: dark;
  --md-sys-color-background: #141218;
  --md-sys-color-on-background: #e6e0e9;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3b383e;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f24;
  --md-sys-color-surface-container-high: #2b292f;
  --md-sys-color-surface-container-highest: #36343a;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-on-surface-variant: #cac4cf;
  --md-sys-color-outline: #948f99;
  --md-sys-color-outline-variant: #49454e;
  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-primary: #cfbdfe;
  --md-sys-color-primary-dim: #c7b4f5;
  --md-sys-color-on-primary: #36275d;
  --md-sys-color-primary-container: #4d3d75;
  --md-sys-color-on-primary-container: #e9ddff;
  --md-sys-color-primary-fixed: #e9ddff;
  --md-sys-color-primary-fixed-dim: #cfbdfe;
  --md-sys-color-on-primary-fixed: #201047;
  --md-sys-color-on-primary-fixed-variant: #4d3d75;
  --md-sys-color-inverse-primary: #65558f;
  --md-sys-color-secondary: #cbc2db;
  --md-sys-color-secondary-dim: #e8def8;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;
  --md-sys-color-secondary-fixed: #e8def8;
  --md-sys-color-secondary-fixed-dim: #cbc2db;
  --md-sys-color-on-secondary-fixed: #1e192b;
  --md-sys-color-on-secondary-fixed-variant: #4a4458;
  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-tertiary-dim: #fec5d6;
  --md-sys-color-on-tertiary: #4a2532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd9e3;
  --md-sys-color-tertiary-fixed: #ffd9e3;
  --md-sys-color-tertiary-fixed-dim: #efb8c8;
  --md-sys-color-on-tertiary-fixed: #31101d;
  --md-sys-color-on-tertiary-fixed-variant: #633b48;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-error-dim: #ff554a;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #cfbdfe;
  --md-sys-color-surface-variant: #36343a;
}

/* 暗色：跟随系统（未手动指定 data-theme 时生效） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  --md-sys-color-background: #141218;
  --md-sys-color-on-background: #e6e0e9;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3b383e;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f24;
  --md-sys-color-surface-container-high: #2b292f;
  --md-sys-color-surface-container-highest: #36343a;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-on-surface-variant: #cac4cf;
  --md-sys-color-outline: #948f99;
  --md-sys-color-outline-variant: #49454e;
  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-primary: #cfbdfe;
  --md-sys-color-primary-dim: #c7b4f5;
  --md-sys-color-on-primary: #36275d;
  --md-sys-color-primary-container: #4d3d75;
  --md-sys-color-on-primary-container: #e9ddff;
  --md-sys-color-primary-fixed: #e9ddff;
  --md-sys-color-primary-fixed-dim: #cfbdfe;
  --md-sys-color-on-primary-fixed: #201047;
  --md-sys-color-on-primary-fixed-variant: #4d3d75;
  --md-sys-color-inverse-primary: #65558f;
  --md-sys-color-secondary: #cbc2db;
  --md-sys-color-secondary-dim: #e8def8;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;
  --md-sys-color-secondary-fixed: #e8def8;
  --md-sys-color-secondary-fixed-dim: #cbc2db;
  --md-sys-color-on-secondary-fixed: #1e192b;
  --md-sys-color-on-secondary-fixed-variant: #4a4458;
  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-tertiary-dim: #fec5d6;
  --md-sys-color-on-tertiary: #4a2532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd9e3;
  --md-sys-color-tertiary-fixed: #ffd9e3;
  --md-sys-color-tertiary-fixed-dim: #efb8c8;
  --md-sys-color-on-tertiary-fixed: #31101d;
  --md-sys-color-on-tertiary-fixed-variant: #633b48;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-error-dim: #ff554a;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #cfbdfe;
  --md-sys-color-surface-variant: #36343a;
  }
}

/* ===== 规范补充令牌（@material/web 组件会用到，官方令牌表未导出）===== */
:root {
  --md-sys-state-pressed-state-layer-opacity: 0.12;
  --md-sys-state-focus-indicator-thickness: 3px;
  --md-sys-state-focus-indicator-outer-offset: -3px;
  --md-sys-state-focus-indicator-inner-offset: -5px;

  /* 阴影：M3 elevation levels（给不用 md-elevation 的普通元素用） */
  --md-sys-elevation-shadow-0: none;
  --md-sys-elevation-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.30), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --md-sys-elevation-shadow-2: 0 1px 2px 0 rgb(0 0 0 / 0.30), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --md-sys-elevation-shadow-3: 0 1px 3px 0 rgb(0 0 0 / 0.30), 0 4px 8px 3px rgb(0 0 0 / 0.15);
  --md-sys-elevation-shadow-4: 0 2px 3px 0 rgb(0 0 0 / 0.30), 0 6px 10px 4px rgb(0 0 0 / 0.15);
  --md-sys-elevation-shadow-5: 0 4px 4px 0 rgb(0 0 0 / 0.30), 0 8px 12px 6px rgb(0 0 0 / 0.15);
}

/* ===== 本地字体（离线可用，不依赖 Google Fonts CDN）===== */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2');
}

/* Material Symbols 图标字体（outlined） */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 字体族令牌指向本地字体 */
:root {
  --md-ref-typeface-brand: 'Roboto', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Roboto', system-ui, sans-serif;
  --md-ref-typeface-mono: ui-monospace, monospace;
  --md-icon-font: 'Material Symbols Outlined';
}

:root {
  --md-sys-typescale-body-large: 400 1rem / 1.5rem Roboto;
  --md-sys-typescale-body-large-font: Roboto;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-tracking: 0.03125rem;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-medium: 400 0.875rem / 1.25rem Roboto;
  --md-sys-typescale-body-medium-font: Roboto;
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-body-medium-tracking: 0.015625rem;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-small: 400 0.75rem / 1rem Roboto;
  --md-sys-typescale-body-small-font: Roboto;
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-size: 0.75rem;
  --md-sys-typescale-body-small-tracking: 0.025rem;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-display-large: 400 3.5625rem / 4rem Roboto;
  --md-sys-typescale-display-large-font: Roboto;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-size: 3.5625rem;
  --md-sys-typescale-display-large-tracking: -0.015625rem;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-medium: 400 2.8125rem / 3.25rem Roboto;
  --md-sys-typescale-display-medium-font: Roboto;
  --md-sys-typescale-display-medium-line-height: 3.25rem;
  --md-sys-typescale-display-medium-size: 2.8125rem;
  --md-sys-typescale-display-medium-tracking: 0rem;
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-small: 400 2.25rem / 2.75rem Roboto;
  --md-sys-typescale-display-small-font: Roboto;
  --md-sys-typescale-display-small-line-height: 2.75rem;
  --md-sys-typescale-display-small-size: 2.25rem;
  --md-sys-typescale-display-small-tracking: 0rem;
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-headline-large: 400 2rem / 2.5rem Roboto;
  --md-sys-typescale-headline-large-font: Roboto;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-tracking: 0rem;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-medium: 400 1.75rem / 2.25rem Roboto;
  --md-sys-typescale-headline-medium-font: Roboto;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-medium-tracking: 0rem;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-small: 400 1.5rem / 2rem Roboto;
  --md-sys-typescale-headline-small-font: Roboto;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-size: 1.5rem;
  --md-sys-typescale-headline-small-tracking: 0rem;
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-label-large: 500 0.875rem / 1.25rem Roboto;
  --md-sys-typescale-label-large-font: Roboto;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-tracking: 0.00625rem;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-weight-prominent: 700;
  --md-sys-typescale-label-medium: 500 0.75rem / 1rem Roboto;
  --md-sys-typescale-label-medium-font: Roboto;
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-medium-tracking: 0.03125rem;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-weight-prominent: 700;
  --md-sys-typescale-label-small: 500 0.6875rem / 1rem Roboto;
  --md-sys-typescale-label-small-font: Roboto;
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-size: 0.6875rem;
  --md-sys-typescale-label-small-tracking: 0.03125rem;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-title-large: 400 1.375rem / 1.75rem Roboto;
  --md-sys-typescale-title-large-font: Roboto;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-large-tracking: 0rem;
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-medium: 500 1rem / 1.5rem Roboto;
  --md-sys-typescale-title-medium-font: Roboto;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-medium-tracking: 0.009375rem;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-small: 500 0.875rem / 1.25rem Roboto;
  --md-sys-typescale-title-small-font: Roboto;
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-size: 0.875rem;
  --md-sys-typescale-title-small-tracking: 0.00625rem;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-top: 28px 28px 0px 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;
  --md-sys-shape-corner-full: 9999px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-end: 0px 16px 16px 0px;
  --md-sys-shape-corner-large-start: 16px 0px 0px 16px;
  --md-sys-shape-corner-large-top: 16px 16px 0px 0px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-elevation-level0: 0;
  --md-sys-elevation-level1: 1;
  --md-sys-elevation-level2: 3;
  --md-sys-elevation-level3: 6;
  --md-sys-elevation-level4: 8;
  --md-sys-elevation-level5: 12;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-path: ;
  --md-sys-state-dragged-state-layer-opacity: 0.16;
  --md-sys-state-focus-state-layer-opacity: 0.12;
  --md-sys-state-hover-state-layer-opacity: 0.08;
  --md-sys-state-pressed-state-layer-opacity: 0.12;
}