/*
 * Палитра: почти белый + графит + красный.
 * Подключение: <link rel="stylesheet" href="palette.css">
 * Эти переменные задают цвета, не меняя оформление элементов страницы.
 */
:root {
  /* Светлые поверхности */
  --color-background: #F6F5F3;
  --color-surface: #FFFFFF;
  --color-surface-alt: #ECEAEB;

  /* Текст на светлых поверхностях */
  --color-text: #242427;
  --color-text-muted: #65636B;

  /* Кнопки, ссылки и смысловые акценты */
  --color-accent: #C02C3A;
  --color-accent-hover: #A51F2C;
  --color-accent-active: #8C1724;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #FBE9EB;
  --color-on-accent-soft: #A51F2C;

  /* Тёмная карточка эксперта */
  --color-surface-dark: #252428;
  --color-on-dark: #FAF9F6;
  --color-on-dark-muted: #C7C1CB;

  /*
   * Светлая граница — для декоративных разделителей.
   * Граница поля — для белых полей на основном фоне.
   * Фокус: outline: 3px solid var(--color-focus); outline-offset: 3px.
   * На тёмной поверхности использовать --color-focus-on-dark.
   */
  --color-border: #E0DCE0;
  --color-input-border: #8F8590;
  --color-focus: #C02C3A;
  --color-focus-on-dark: #FAF9F6;

  /* Недоступные элементы: состояние дополнительно задаётся атрибутом disabled. */
  --color-disabled-background: #ECEAEB;
  --color-disabled-text: #65636B;

  /*
   * Ошибка отличается от основного акцента; указывать её также текстом.
   * Успех использовать для подтверждения действия, не как второй акцент.
   */
  --color-error: #B42318;
  --color-error-soft: #FDECE9;
  --color-success: #2F6B4F;
  --color-success-soft: #EAF3ED;
}

/*
 * Рассчитанный контраст:
 * --color-on-accent / --color-accent: 5.73:1.
 * --color-text / --color-background: 14.21:1.
 * --color-text-muted / --color-background: 5.43:1.
 * --color-input-border / --color-surface: 3.54:1.
 * --color-input-border / --color-background: 3.25:1.
 */