Глассморфизм и неоморфизм: стекло и мягкий интерфейс, которые читаются

.glass {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  color: #FFFFFF;
  background: rgb(23 24 23 / 0.55);              /* тёмная тонировка держит белый текст читаемым */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

/* Нет размытия — нет и стекла: вместо прозрачной панели непрозрачная */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(23 24 23 / 0.92); }
}

/* Для тех, кто попросил систему о большем контрасте */
@media (prefers-contrast: more) {
  .glass { background: #171817; backdrop-filter: none; }
}

:root {
  --soft-bg: #D0D7CB;
  --soft-light: #E6ECE3;
  --soft-dark: #A8ABA3;
}

.soft-button {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--soft-bg);
  color: #171817;
  box-shadow:
    inset 0 0 0 1.5px #434541,                 /* рамка даёт контраст 3:1 */
    5px 5px 10px var(--soft-dark),
    -5px -5px 10px var(--soft-light);
}

.soft-button:active {
  box-shadow:
    inset 0 0 0 1.5px #434541,
    inset 4px 4px 8px var(--soft-dark),
    inset -4px -4px 8px var(--soft-light);
}

/* «Включено» показано цветом и словом, а не одной тенью */
.soft-button[aria-pressed="true"] {
  background: #171817;
  color: #E4FF4E;
}

.soft-button:focus-visible { outline: 2px solid #171817; outline-offset: 3px; }