/* MD3 紫色基线（Material Theme Builder: seed #6750A4），全部走 --md-sys-* 令牌 */
:root {
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;

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

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

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

  --md-sys-color-surface: #fef7ff;
  --md-sys-color-on-surface: #1d1b20;
  --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;
  --md-sys-color-surface-dim: #ded8e1;
  --md-sys-color-surface-bright: #fef7ff;

  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;

  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-inverse-on-surface: #f5eff7;
  --md-sys-color-inverse-primary: #d0bcff;

  --md-sys-typescale-font: 'Roboto Flex', 'Roboto', 'Noto Sans SC', 'PingFang SC',
    'Microsoft YaHei', system-ui, sans-serif;

  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-xl: 28px;
  --md-sys-shape-corner-full: 9999px;

  --md-sys-elevation-1: 0 1px 2px rgba(29, 27, 32, 0.3), 0 1px 3px 1px rgba(29, 27, 32, 0.15);
  --md-sys-elevation-2: 0 1px 2px rgba(29, 27, 32, 0.3), 0 2px 6px 2px rgba(29, 27, 32, 0.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(29, 27, 32, 0.15), 0 1px 3px rgba(29, 27, 32, 0.3);

  --md-sys-motion-emphasized: 500ms cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-standard: 300ms cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-decelerate: 250ms cubic-bezier(0.05, 0.7, 0.1, 1);
}

:root[data-theme='dark'] {
  color-scheme: 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-surface: #141218;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-surface-variant: #49454f;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-surface-container-lowest: #0f0d13;
    --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-surface-dim: #141218;
    --md-sys-color-surface-bright: #3b383e;

    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;

    --md-sys-color-inverse-surface: #e6e0e9;
    --md-sys-color-inverse-on-surface: #322f35;
    --md-sys-color-inverse-primary: #6750a4;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-font);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--md-sys-motion-standard),
    color var(--md-sys-motion-standard);
}

#root {
  min-height: 100vh;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  }
  :root:not([data-theme='light']):not([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-surface: #141218;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-surface-variant: #49454f;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-surface-container-lowest: #0f0d13;
    --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-surface-dim: #141218;
    --md-sys-color-surface-bright: #3b383e;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;
    --md-sys-color-inverse-surface: #e6e0e9;
    --md-sys-color-inverse-on-surface: #322f35;
    --md-sys-color-inverse-primary: #6750a4;
  }
}