/* ============================================================
   M3 · 取自 LHT02/m3-material-zh（m3.material.io 官方站点快照）
   官方亮色 / 暗色角色，Expressive 形态与字体刻度
   ============================================================ */

:root,
html[data-theme] {
  /* 品牌角色 · 官方紫 */
  --md-primary: #6442d6;
  --md-on-primary: #ffffff;
  --md-primary-container: #9f86ff;
  --md-on-primary-container: #1e0060;
  --md-secondary: #5d5d74;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #dcdaf5;
  --md-on-secondary-container: #21182b;
  --md-tertiary: #7d4e8a;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #f1d3f9;
  --md-on-tertiary-container: #271430;

  /* 语义角色 */
  --md-error: #c6281f;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410002;
  --md-warning: #e37402;

  /* 表面刻度（官方 surface-0…5） */
  --md-background: #fefbff;
  --md-on-background: #1c1b1d;
  --md-surface: #fefbff;
  --md-surface-dim: #e6e1e3;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f8f1f6;
  --md-surface-container: #f2ecee;
  --md-surface-container-high: #ece7e9;
  --md-surface-container-highest: #e6e1e3;
  --md-surface-variant: #e8e0e8;
  --md-on-surface: #1c1b1d;
  --md-on-surface-variant: #4d4256;
  --md-outline: #787579;
  --md-outline-variant: #cac5c7;
  --md-inverse-surface: #303030;
  --md-inverse-on-surface: #f5eff1;
  --md-inverse-primary: #cbbeff;
  --md-scrim: rgb(0 0 0 / 32%);
  --md-shadow: rgb(0 0 0 / 15%);

  /* 形态 · Expressive */
  --shape-xs: 8px;
  --shape-sm: 12px;
  --shape-md: 16px;
  --shape-lg: 24px;
  --shape-xl: 28px;
  --shape-xxl: 32px;
  --shape-full: 999px;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* 动效 · Expressive easing */
  --motion-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
  --motion-normal: 250ms cubic-bezier(0.2, 0, 0, 1);
  --motion-emphasized: 400ms cubic-bezier(0.05, 0.7, 0.1, 1);

  /* 海拔 */
  --elev-1: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --elev-2: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --elev-3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
  --elev-4: 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px 0 rgb(0 0 0 / 30%);

  --state-hover: .08;
  --state-focus: .12;
  --state-press: .12;

  /* 字体 · Expressive 刻度 */
  --font-brand: "MiSans", "MiSans Demibold", "HarmonyOS Sans SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --type-display-l: 700 57px/64px var(--font-brand);
  --type-display-m: 700 45px/52px var(--font-brand);
  --type-display-s: 700 36px/44px var(--font-brand);
  --type-headline-l: 600 32px/40px var(--font-brand);
  --type-headline-m: 600 28px/36px var(--font-brand);
  --type-headline-s: 600 24px/32px var(--font-brand);
  --type-title-l: 600 22px/28px var(--font-brand);
  --type-title-m: 600 16px/24px var(--font-brand);
  --type-title-s: 600 14px/20px var(--font-brand);
  --type-body-l: 400 16px/24px var(--font-body);
  --type-body-m: 400 14px/20px var(--font-body);
  --type-body-s: 400 12px/16px var(--font-body);
  --type-label-l: 500 14px/20px var(--font-body);
  --type-label-m: 500 12px/16px var(--font-body);
  --type-label-s: 500 11px/16px var(--font-body);

  --max-content: 1200px;
}

/* 暗色 · 官方 dark-mode 角色 */
html[data-dark="true"],
html[data-theme][data-dark="true"] {
  --md-primary: #9f86ff;
  --md-on-primary: #1a0056;
  --md-primary-container: #4b21bd;
  --md-on-primary-container: #e7deff;
  --md-secondary: #a1a1ba;
  --md-on-secondary: #151629;
  --md-secondary-container: #45455a;
  --md-on-secondary-container: #e2e0fb;
  --md-tertiary: #f1d3f9;
  --md-on-tertiary: #3c1f47;
  --md-tertiary-container: #553f5d;
  --md-on-tertiary-container: #f7d8ff;
  --md-error: #ff6e4e;
  --md-on-error: #490909;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;
  --md-warning: #ffb951;

  --md-background: #141314;
  --md-on-background: #e6e1e3;
  --md-surface: #141314;
  --md-surface-dim: #0f0e0f;
  --md-surface-container-lowest: #0f0e0f;
  --md-surface-container-low: #1c1b1d;
  --md-surface-container: #211f21;
  --md-surface-container-high: #2b292b;
  --md-surface-container-highest: #363436;
  --md-surface-variant: #4d4256;
  --md-on-surface: #e6e1e3;
  --md-on-surface-variant: #cbc4cc;
  --md-outline: #928f94;
  --md-outline-variant: #4d4256;
  --md-inverse-surface: #e6e1e3;
  --md-inverse-on-surface: #303030;
  --md-inverse-primary: #6442d6;
  --md-scrim: rgb(0 0 0 / 48%);
  --md-shadow: rgb(0 0 0 / 45%);

  --elev-1: 0 1px 2px 0 rgb(0 0 0 / 50%), 0 1px 3px 1px rgb(0 0 0 / 35%);
  --elev-2: 0 1px 2px 0 rgb(0 0 0 / 50%), 0 2px 6px 2px rgb(0 0 0 / 35%);
  --elev-3: 0 4px 8px 3px rgb(0 0 0 / 35%), 0 1px 3px 0 rgb(0 0 0 / 50%);
  --elev-4: 0 6px 10px 4px rgb(0 0 0 / 35%), 0 2px 3px 0 rgb(0 0 0 / 50%);
}

/* ============================================================
   主题色 · 额外内置配色（data-accent）
   保持官方 M3 角色关系，只替换 primary 系列
   ============================================================ */
html[data-accent="teal"]{
  --md-primary:#00696b;--md-on-primary:#ffffff;
  --md-primary-container:#9cf0f2;--md-on-primary-container:#00201e;
  --md-inverse-primary:#82d4d6;
}
html[data-accent="teal"][data-dark="true"]{
  --md-primary:#82d4d6;--md-on-primary:#003737;
  --md-primary-container:#004f50;--md-on-primary-container:#9cf0f2;
  --md-inverse-primary:#00696b;
}
html[data-accent="blue"]{
  --md-primary:#2563eb;--md-on-primary:#ffffff;
  --md-primary-container:#d8e2ff;--md-on-primary-container:#001a41;
  --md-inverse-primary:#adc6ff;
}
html[data-accent="blue"][data-dark="true"]{
  --md-primary:#adc6ff;--md-on-primary:#002e69;
  --md-primary-container:#004494;--md-on-primary-container:#d8e2ff;
  --md-inverse-primary:#2563eb;
}
html[data-accent="green"]{
  --md-primary:#386a20;--md-on-primary:#ffffff;
  --md-primary-container:#b8f397;--md-on-primary-container:#042100;
  --md-inverse-primary:#9dd67d;
}
html[data-accent="green"][data-dark="true"]{
  --md-primary:#9dd67d;--md-on-primary:#0a3900;
  --md-primary-container:#235000;--md-on-primary-container:#b8f397;
  --md-inverse-primary:#386a20;
}
html[data-accent="orange"]{
  --md-primary:#b45309;--md-on-primary:#ffffff;
  --md-primary-container:#ffdcc2;--md-on-primary-container:#2d1600;
  --md-inverse-primary:#ffb86b;
}
html[data-accent="orange"][data-dark="true"]{
  --md-primary:#ffb86b;--md-on-primary:#4a2800;
  --md-primary-container:#6a3c00;--md-on-primary-container:#ffdcc2;
  --md-inverse-primary:#b45309;
}
html[data-accent="pink"]{
  --md-primary:#be185d;--md-on-primary:#ffffff;
  --md-primary-container:#ffd9e2;--md-on-primary-container:#3e001d;
  --md-inverse-primary:#ffb1c8;
}
html[data-accent="pink"][data-dark="true"]{
  --md-primary:#ffb1c8;--md-on-primary:#5e1133;
  --md-primary-container:#8c0050;--md-on-primary-container:#ffd9e2;
  --md-inverse-primary:#be185d;
}