:root {
  --mm-accent: #f2a33b;
  --mm-accent-hover: #df8d1e;

  --mm-radius-xl: 28px 15px 30px 13px;
  --mm-radius-lg: 22px 12px 24px 10px;
  --mm-radius-md: 15px 9px 17px 8px;
  --mm-radius-sm: 10px 6px 11px 5px;
}


/* ============================================================
   SHOWROOM
   ============================================================ */

html[data-mm-theme="showroom"] {
  color-scheme: light;

  --mm-page: #f5f5f4;
  --mm-page-secondary: #ffffff;

  --mm-surface: #ffffff;
  --mm-surface-secondary: #f8f8f7;
  --mm-surface-raised: #ffffff;

  --mm-field: #f0f0ef;
  --mm-field-hover: #e9e9e8;

  --mm-text-primary: #171717;
  --mm-text-secondary: #555555;
  --mm-text-muted: #888888;

  --mm-icon: #666666;
  --mm-icon-hover: #171717;

  --mm-border: rgba(15, 15, 15, .07);
  --mm-border-strong: rgba(15, 15, 15, .12);

  --mm-shadow:
    0 18px 55px
    rgba(20, 20, 20, .07);

  --mm-shadow-floating:
    0 28px 80px
    rgba(20, 20, 20, .13);

  --mm-inset:
    inset 0 1px 0
    rgba(255, 255, 255, .96);

  --mm-stage: #ffffff;
  --mm-stage-edge: #eeeeec;
}


/* ============================================================
   GARAGE
   ============================================================ */

html[data-mm-theme="garage"] {
  color-scheme: dark;

  --mm-page: #090909;
  --mm-page-secondary: #0d0d0d;

  --mm-surface: #151515;
  --mm-surface-secondary: #1a1a1a;
  --mm-surface-raised: #202020;

  --mm-field: #242424;
  --mm-field-hover: #2c2c2c;

  --mm-text-primary: #f2f2f2;
  --mm-text-secondary: #bdbdbd;
  --mm-text-muted: #7e7e7e;

  --mm-icon: #c5c5c5;
  --mm-icon-hover: #ffffff;

  --mm-border: rgba(255, 255, 255, .05);
  --mm-border-strong: rgba(255, 255, 255, .09);

  --mm-shadow:
    0 24px 70px
    rgba(0, 0, 0, .38);

  --mm-shadow-floating:
    0 34px 96px
    rgba(0, 0, 0, .52);

  --mm-inset:
    inset 0 1px 0
    rgba(255, 255, 255, .035);

  --mm-stage: #f3f3f1;
  --mm-stage-edge: #d9d9d6;
}


/* ============================================================
   PAGE
   ============================================================ */

html,
body {
  background:
    var(--mm-page);

  color:
    var(--mm-text-primary);
}

body {
  transition:
    background-color .22s ease,
    color .22s ease;
}


/* Старые декоративные цветные пятна отключаем */

.bg-glow {
  display: none !important;
}


/* ============================================================
   GLOBAL TEXT
   ============================================================ */

body,
button,
input,
select,
textarea {
  color:
    var(--mm-text-primary);
}

.stage__title,
.result__title,
.vehicle-picker__title,
.catalog-section__title,
.service-dashboard__title,
.recommended-oils__title,
.oil-choice__title,
.filter-choice__title,
.catalog-calculator__title,
.booking-dialog__title {
  color:
    var(--mm-text-primary);
}

.stage__subtitle,
.vehicle-picker__hint,
.vehicle-picker__note,
.catalog-section__subtitle,
.service-dashboard__subtitle,
.recommended-oils__subtitle,
.oil-choice__hint,
.filter-choice__hint,
.catalog-calculator__subtitle,
.booking-dialog__notice {
  color:
    var(--mm-text-muted);
}


/* ============================================================
   BASIC SURFACES
   Только общий материал. Внутренняя геометрия не меняется.
   ============================================================ */

.vehicle-picker,
.result,
.service-dashboard,
.catalog-section,
.recommended-oils,
.oil-choice,
.filter-choice,
.catalog-calculator {
  border-color:
    var(--mm-border);

  background:
    var(--mm-surface);

  color:
    var(--mm-text-primary);

  box-shadow:
    var(--mm-shadow),
    var(--mm-inset);
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {
  background:
    rgba(242, 163, 59, .28);

  color:
    var(--mm-text-primary);
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline:
    2px solid
    var(--mm-accent);

  outline-offset:
    2px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}


/* ============================================================
   THEME SWITCH
   ============================================================ */

.mm-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;

  margin-left: auto;
  padding: 3px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 999px;

  background:
    var(--mm-surface);

  box-shadow:
    var(--mm-inset);
}

.mm-theme-switch button {
  min-height: 30px;

  padding:
    0 12px;

  border: 0;
  border-radius: 999px;

  background:
    transparent;

  color:
    var(--mm-text-muted);

  font: inherit;
  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}

.mm-theme-switch button:hover {
  color:
    var(--mm-text-primary);
}

.mm-theme-switch button[
  aria-pressed="true"
] {
  background:
    var(--mm-field);

  color:
    var(--mm-text-primary);
}

html[data-mm-theme="garage"]
.mm-theme-switch button[
  data-mm-theme-option="garage"
][aria-pressed="true"] {
  color:
    var(--mm-accent);
}


@media (max-width: 620px) {
  .mm-theme-switch {
    position: fixed;
    right:
      max(
        12px,
        env(safe-area-inset-right)
      );
    bottom:
      max(
        12px,
        env(safe-area-inset-bottom)
      );

    z-index: 9000;

    margin: 0;

    box-shadow:
      0 12px 35px
      rgba(0, 0, 0, .18),
      var(--mm-inset);
  }

  .mm-theme-switch button {
    min-height: 34px;
    padding-inline: 11px;
  }
}