/* ═══════════════════════════════════════════════════════════════════════════
   Тема «Графит и золото» — Санкт-Петербург, SPB CAPITAL.

   Включается настройкой site_theme=graphite: на <body> появляется класс
   t-graphite, и этот файл переопределяет переменные app.css. Москва файл не
   подключает и остаётся светло-жёлтой — разметка у городов одна.

   Почти всё делается переменными: в app.css цвет поверхностей вынесен в
   --glass и --glass-veil. Ниже правятся только те места, где цвет несёт
   смысл (жёлтая подсказка, тёмная кнопка) и переменной его не достать.
   ═══════════════════════════════════════════════════════════════════════════ */

body.t-graphite {
  /* Поле — ночной графит. Карточки светлее фона, чтобы читались слои */
  --bg:          #14161B;
  --bg-2:        #1A1D23;
  --bg-3:        #23272F;
  --line:        rgba(255, 255, 255, .10);
  --line-2:      rgba(255, 255, 255, .18);

  /* Золото шпиля вместо такси-жёлтого */
  --sun:         #C9A227;
  --sun-2:       #E0BC4A;
  --sun-deep:    #8E7012;
  --sun-glow:    rgba(201, 162, 39, .30);

  /* Белая ночь: не чистый белый — он на графите режет глаз */
  --ink:         #F0F2F5;
  --ink-2:       #A9B0BB;
  /* Мелкий текст: #7B838F давал на карточке контраст 4.27 — ниже порога
     читаемости 4.5. #8A919D держит 4.7–6.0 на всех поверхностях темы. */
  --ink-3:       #8A919D;

  /* Те же смыслы, но ярче: на тёмном пастель тонет */
  --ok:          #2BBE7B;
  --warn:        #E3A13A;
  --bad:         #F0605C;
  --info:        #5B8CFF;

  /* Поверхности */
  --glass:       #1C2026;
  --glass-2:     #23272F;
  --glass-veil:  rgba(20, 22, 27, .90);

  --shadow:      0 2px 14px rgba(0, 0, 0, .40);
  --shadow-lg:   0 18px 48px rgba(0, 0, 0, .55);
  --shadow-sun:  0 8px 22px rgba(201, 162, 39, .26);

  background: var(--bg);
  color: var(--ink);
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

/* На золоте читается только графитовый текст */
.t-graphite .btn--sun { color: #14161B; }
.t-graphite .btn--sun:hover { box-shadow: 0 16px 40px rgba(201, 162, 39, .26); }

/* Тёмная кнопка в тёмной теме невидима — делаем её «поверхностью» */
.t-graphite .btn--dark {
  background: var(--bg-3); color: var(--ink); border: 1px solid var(--line-2);
}
.t-graphite .btn--dark:hover { background: #2C313A; }
.t-graphite .btn--dark:active,
.t-graphite .btn--dark:hover:active { background: #1E222A; }

/* ── Выбранное ─────────────────────────────────────────────────────────────
   В светлой теме «выбрано» — это графитовая плашка с белым текстом
   (background: var(--ink)). На графите она становится белым по белому,
   поэтому здесь выбранное — золотое. */

.t-graphite .chip.on,
.t-graphite .chip.on:hover,
.t-graphite .svc-chip--all,
.t-graphite .radio-row input:checked + label,
.t-graphite .radio-row input:checked + label:hover {
  background: var(--sun); border-color: var(--sun); color: #14161B;
}

/* ── Жёлтые подсказки: кремовый фон оставил бы на странице белые дыры ──── */

.t-graphite .card--sun,
.t-graphite .svcf--sun {
  background: rgba(201, 162, 39, .10);
  border-color: rgba(201, 162, 39, .38);
}
.t-graphite .svcf--sun .svcf__ico { background: rgba(201, 162, 39, .16); }
.t-graphite .svcf--sun .svcf__tag { background: rgba(201, 162, 39, .16); border-color: rgba(201, 162, 39, .45); }
.t-graphite .alert--sun {
  background: rgba(201, 162, 39, .12);
  border-color: rgba(201, 162, 39, .34);
  color: #E8D79A;
}
.t-graphite .hold {
  background: rgba(201, 162, 39, .10);
  border-color: rgba(201, 162, 39, .30);
}
.t-graphite .ref-band,
.t-graphite .ref-hero {
  background: linear-gradient(100deg, #23201A 0%, #2B2619 100%);
  border: 1px solid rgba(201, 162, 39, .28);
}
.t-graphite .tag--buyout {
  color: #E8D79A; background: rgba(201, 162, 39, .14);
  border-color: rgba(201, 162, 39, .45);
}

/* ── Цветные плашки состояний: пастель на графите выглядит выцветшей ───── */

.t-graphite .pill--free   { color: #6FE3A6; background: rgba(43, 190, 123, .14); border-color: rgba(43, 190, 123, .40); }
.t-graphite .pill--booked { color: #F0C27A; background: rgba(227, 161, 58, .14); border-color: rgba(227, 161, 58, .40); }
.t-graphite .pill--soon   { color: #9DB8FF; background: rgba(91, 140, 255, .14); border-color: rgba(91, 140, 255, .40); }
.t-graphite .svcf__tag--ok { color: #6FE3A6; background: rgba(43, 190, 123, .14); border-color: rgba(43, 190, 123, .40); }
.t-graphite .alert--ok   { background: rgba(43, 190, 123, .12); border-color: rgba(43, 190, 123, .34); color: #6FE3A6; }
.t-graphite .alert--bad  { background: rgba(240, 96, 92, .12); border-color: rgba(240, 96, 92, .34); color: #F5938F; }
.t-graphite .alert--info { background: rgba(91, 140, 255, .12); border-color: rgba(91, 140, 255, .34); color: #9DB8FF; }
.t-graphite .btn--danger { background: rgba(240, 96, 92, .12); border-color: rgba(240, 96, 92, .38); color: #F5938F; }
.t-graphite .btn--danger:hover { background: rgba(240, 96, 92, .20); }
.t-graphite .hold.is-over { background: rgba(240, 96, 92, .12); border-color: rgba(240, 96, 92, .34); }

/* ── Подвал: ещё темнее страницы, иначе сливается ──────────────────────── */

.t-graphite .ftr { background: #0E1014; }
.t-graphite .ftr .note,
.t-graphite .ftr__bottom { color: var(--ink-3); }
.t-graphite .ftr a { color: var(--ink-2); }

/* ── Госномер остаётся белым ───────────────────────────────────────────────
   На машине он белый, и водитель узнаёт свой именно таким. Снимаем только
   внутренний блик: на тёмном он читается как грязь. */
.t-graphite .plate { box-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

/* Фотографии на графите кажутся ярче, чем есть */
.t-graphite .shots__i img { filter: brightness(.96); }