/* =========================================================
   Material Design 3 — Design Tokens
   完全按 MD3 规范：color role / type scale / shape /
   elevation(tonal) / state layer / motion
   ========================================================= */

:root {
  /* ---------- Color: Tonal Palette (Purple seed #6750A4) ---------- */
  /* Primary */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;

  /* Secondary */
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;

  /* Tertiary */
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #31111d;

  /* Error */
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;

  /* Background / Surface */
  --md-sys-color-background: #fffbfe;
  --md-sys-color-on-background: #1c1b1f;
  --md-sys-color-surface: #fffbfe;
  --md-sys-color-on-surface: #1c1b1f;
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;

  /* Outline */
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #f4eff4;
  --md-sys-color-inverse-primary: #d0bcff;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* ---------- Type Scale (MD3 baseline, 15 roles) ---------- */
  --md-sys-typescale-display-large-font: 57px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-tracking: -0.25px;

  --md-sys-typescale-display-medium-font: 45px;
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-line-height: 52px;

  --md-sys-typescale-display-small-font: 36px;
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-line-height: 44px;

  --md-sys-typescale-headline-large-font: 32px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-line-height: 40px;

  --md-sys-typescale-headline-medium-font: 28px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-line-height: 36px;

  --md-sys-typescale-headline-small-font: 24px;
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-line-height: 32px;

  --md-sys-typescale-title-large-font: 22px;
  --md-sys-typescale-title-large-weight: 500;
  --md-sys-typescale-title-large-line-height: 28px;

  --md-sys-typescale-title-medium-font: 16px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-tracking: 0.15px;

  --md-sys-typescale-title-small-font: 14px;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-tracking: 0.1px;

  --md-sys-typescale-body-large-font: 16px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-tracking: 0.5px;

  --md-sys-typescale-body-medium-font: 14px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-tracking: 0.25px;

  --md-sys-typescale-body-small-font: 12px;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-tracking: 0.4px;

  --md-sys-typescale-label-large-font: 14px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-tracking: 0.1px;

  --md-sys-typescale-label-medium-font: 12px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-tracking: 0.5px;

  --md-sys-typescale-label-small-font: 11px;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-tracking: 0.5px;

  /* ---------- Shape (7 级圆角) ---------- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* ---------- Component 约定 ---------- */
  --md-comp-radius-component: var(--md-sys-shape-corner-medium);   /* 12dp */
  --md-comp-radius-surface: var(--md-sys-shape-corner-large);      /* 16dp */
  --md-comp-button-height: 40px;
  --md-comp-icon-button-size: 40px;
  --md-comp-icon-size: 24px;
  --md-comp-fab-size: 56px;
  --md-comp-fab-large-size: 96px;
  --md-comp-textfield-height: 56px;
  --md-comp-touch-target: 48px;
  --md-comp-card-padding: 16px;

  /* ---------- State Layer 透明度 ---------- */
  --md-state-hover-opacity: 0.08;
  --md-state-focus-opacity: 0.10;
  --md-state-pressed-opacity: 0.10;
  --md-state-dragged-opacity: 0.16;
  --md-state-disabled-container-opacity: 0.12;
  --md-state-disabled-content-opacity: 0.38;

  /* ---------- Motion (Easing tokens) ---------- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  --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-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-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;

  /* ---------- Layout ---------- */
  --md-layout-max-width: 1280px;
  --md-layout-gutter: 24px;
  --md-top-app-bar-height: 64px;
}

/* ---------- Dark Theme (tonal palette 切换) ---------- */
[data-theme="dark"] {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;

  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;

  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd8e4;

  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #f9dedc;

  --md-sys-color-background: #1c1b1f;
  --md-sys-color-on-background: #e6e1e5;
  --md-sys-color-surface: #1c1b1f;
  --md-sys-color-on-surface: #e6e1e5;
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-surface-container-lowest: #141216;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;

  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
  --md-sys-color-inverse-surface: #e6e1e5;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-inverse-primary: #6750a4;
}

/* ---------- 响应式断点 (MD3 Window Size Classes) ---------- */
/* Compact <600px | Medium 600-839px | Expanded >=840px */
@media (max-width: 599px) {
  :root { --md-layout-gutter: 16px; }
}
@media (min-width: 600px) and (max-width: 839px) {
  :root { --md-layout-gutter: 24px; }
}
@media (min-width: 840px) {
  :root { --md-layout-gutter: 24px; }
}