/* Material 3 — дизайн-токены (baseline purple). Меняя цвета здесь, меняется вся тема.
   Тема: html[data-theme="light" | "dark"] задаётся вручную, без атрибута — по системе. */
:root {
  color-scheme: light;

  /* Цвета (light) */
  --md-primary: #6750a4;
  --md-on-primary: #ffffff;
  --md-primary-container: #eaddff;
  --md-on-primary-container: #21005d;
  --md-secondary-container: #e8def8;
  --md-on-secondary-container: #1d192b;
  --md-tertiary-container: #ffd8e4;
  --md-on-tertiary-container: #31111d;
  --md-surface: #fef7ff;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f7f2fa;
  --md-surface-container: #f3edf7;
  --md-surface-container-high: #ece6f0;
  --md-surface-container-highest: #e6e0e9;
  --md-on-surface: #1d1b20;
  --md-on-surface-variant: #49454f;
  --md-outline: #79747e;
  --md-outline-variant: #cac4d0;
  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-success: #146c2e;
  --md-warm: #ffb74d;
  --md-on-warm: #3e2700;
  --md-inverse-surface: #322f35;
  --md-inverse-on-surface: #f5eff7;
  --md-scrim: #00000052;

  /* Форма */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* Elevation */
  --md-elev-1: 0 1px 2px #0000004d, 0 1px 3px 1px #00000026;
  --md-elev-2: 0 1px 2px #0000004d, 0 2px 6px 2px #00000026;
  --md-elev-3: 0 4px 8px 3px #00000026, 0 1px 3px #0000004d;

  /* Типографика */
  --md-font: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Движение */
  --md-ease: cubic-bezier(.2, 0, 0, 1);
  --md-dur: 200ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --md-primary: #d0bcff;
  --md-on-primary: #381e72;
  --md-primary-container: #4f378b;
  --md-on-primary-container: #eaddff;
  --md-secondary-container: #4a4458;
  --md-on-secondary-container: #e8def8;
  --md-tertiary-container: #633b48;
  --md-on-tertiary-container: #ffd8e4;
  --md-surface: #141218;
  --md-surface-container-lowest: #0f0d13;
  --md-surface-container-low: #1d1b20;
  --md-surface-container: #211f26;
  --md-surface-container-high: #2b2930;
  --md-surface-container-highest: #36343b;
  --md-on-surface: #e6e0e9;
  --md-on-surface-variant: #cac4d0;
  --md-outline: #938f99;
  --md-outline-variant: #49454f;
  --md-error: #f2b8b5;
  --md-on-error: #601410;
  --md-error-container: #8c1d18;
  --md-on-error-container: #f9dedc;
  --md-success: #6dd58c;
  --md-warm: #ffcc80;
  --md-inverse-surface: #e6e0e9;
  --md-inverse-on-surface: #322f35;
  --md-scrim: #0000008a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-primary: #d0bcff;
    --md-on-primary: #381e72;
    --md-primary-container: #4f378b;
    --md-on-primary-container: #eaddff;
    --md-secondary-container: #4a4458;
    --md-on-secondary-container: #e8def8;
    --md-tertiary-container: #633b48;
    --md-on-tertiary-container: #ffd8e4;
    --md-surface: #141218;
    --md-surface-container-lowest: #0f0d13;
    --md-surface-container-low: #1d1b20;
    --md-surface-container: #211f26;
    --md-surface-container-high: #2b2930;
    --md-surface-container-highest: #36343b;
    --md-on-surface: #e6e0e9;
    --md-on-surface-variant: #cac4d0;
    --md-outline: #938f99;
    --md-outline-variant: #49454f;
    --md-error: #f2b8b5;
    --md-on-error: #601410;
    --md-error-container: #8c1d18;
    --md-on-error-container: #f9dedc;
    --md-success: #6dd58c;
    --md-warm: #ffcc80;
    --md-inverse-surface: #e6e0e9;
    --md-inverse-on-surface: #322f35;
    --md-scrim: #0000008a;
  }
}