/* Общие токены сайта и админки. Тёмная тема включается сама по настройке устройства */
:root {
  --page: #F4F3F0;
  --surface: #FFFFFF;
  --ink: #17171B;
  --ink-soft: #45454D;
  --muted: #6B6B73;
  --line: #E5E3DE;
  --busy: #EEECE7;
  --busy-ink: #A9A7A1;
  --on-ink: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(20, 20, 30, .05), 0 14px 34px -18px rgba(20, 20, 30, .25);
  --block-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -4px 0 rgba(0, 0, 0, .05), 0 12px 24px -12px rgba(20, 20, 30, .35);
  --lift-shadow: 0 10px 18px -10px rgba(0, 0, 0, .55);
  --tint-mix: 0%;

  /* статусы */
  --st-new: #F7E7D2;       --st-new-ink: #7A4A0E;    --st-new-line: #E2B97F;
  --st-conf: #D6E4F5;      --st-conf-ink: #1E3E63;
  --st-done: #D3EBDF;      --st-done-ink: #1F5A3E;
  --st-noshow: #F3D9D9;    --st-noshow-ink: #7E2B2B;
  --st-cancel-line: #D9D7D1;
  --good: #3E9C6B;
  --warn: #D9822B;
  --danger: #B3261E;

  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo: 'Unbounded', 'Onest', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #111113;
    --surface: #1B1B1F;
    --ink: #F3F2EF;
    --ink-soft: #D2D1CC;
    --muted: #A2A1A8;
    --line: #2E2E34;
    --busy: #26262B;
    --busy-ink: #6E6D74;
    --on-ink: #17171B;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .9);
    --block-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -4px 0 rgba(0, 0, 0, .28), 0 12px 24px -12px rgba(0, 0, 0, .9);
    --lift-shadow: 0 10px 18px -10px rgba(0, 0, 0, .9);
    --tint-mix: 62%;

    --st-new: #3F2F1C;       --st-new-ink: #F2C894;    --st-new-line: #8A6533;
    --st-conf: #22324A;      --st-conf-ink: #B7D0F0;
    --st-done: #1F3A2C;      --st-done-ink: #A9DCC0;
    --st-noshow: #452526;    --st-noshow-ink: #F0B5B5;
    --st-cancel-line: #45454D;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }

/* Пастельный цвет услуги: --svc задаётся на элементе; в тёмной теме цвет приглушается */
.tint { background: color-mix(in oklab, var(--svc, #EEECE7), var(--surface) var(--tint-mix)); }

.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--on-ink); font-family: var(--font-logo); font-weight: 600;
}
.logo-img { object-fit: contain; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }