/* Дизайн-система Sfera — набор значений (SFR-0949, навык skills/interface, шаг 2). Один на всю платформу:
   витрина, кабинеты отеля, водителя, клиента, диспетчер, калькулятор. Экран числа не пишет — берёт отсюда.
   Стиль «Камень и лагуна» (выбор 18.10.2026, обоснование — docs/dizajn-sistema/CLAUDE.md): фон — светлый истрийский камень
   венецианских набережных, текст — глубокая вода лагуны, акцент — синий Венеции. Красный, жёлтый и зелёный —
   только состояния (SFR-0953): акцент отстоит от каждого из них по оттенку больше чем на 40°, это держит тест.

   Слои — атрибутами на <html>:
     data-role    = client (по умолчанию) | staff | partner | hotel | driver   — только то, чем роли отличаются (SFR-0950)
     data-density = phone (по умолчанию) | desk | hall                         — плотность одного содержимого (SFR-0954)
     data-theme   = light (по умолчанию) | dark | sun                          — тёмная тема и экран на солнце (SFR-0955)
   Тёмная тема включается и сама — по теме устройства, если data-theme не задан.

   Точки перелома (в @media пишутся эти же числа — сослаться на значение набора в условии медиа-запроса нельзя):
     --bp-sm 600px · --bp-md 900px · --bp-lg 1200px; для скриптов — window.SferaDS.bp (ds.js). */

:root {
  /* ── Цвет: основа ─────────────────────────────────────────── */
  --paper: #f1eee8;          /* фон страницы — истрийский камень */
  --surface: #ffffff;        /* карточки, листы, поля */
  --surface-2: #f8f6f2;      /* приглушённая подложка внутри карточки */
  --surface-3: #e9e5dd;      /* скелет ожидания, пустая картинка */
  --ink: #13262f;            /* основной текст — вода лагуны */
  --ink-2: #2e434d;          /* второй уровень текста */
  --muted: #4a5a62;          /* подписи — не светлее 6 : 1: аудитория курортов 45+ (docs/dizajn-sistema/printsipy.md) */
  --faint: #5f6b72;          /* самое тихое, что ещё читается (4,5 : 1 на фоне) */
  --line: #dcd6cc;           /* разделители */
  --line-strong: #c6beb1;    /* рамки карточек и чипов */
  --field-line: #7d878d;     /* рамка поля ввода — 3 : 1 к фону поля */
  --accent: #1f4e9c;         /* синий Венеции: главный шаг, ссылка, выбранное */
  --accent-hover: #183f80;
  --accent-ink: #ffffff;     /* текст на акценте */
  --accent-soft: #e5ebf5;    /* выбранный чип, подсветка */
  --accent-soft-ink: #163b77;
  --focus: #1f4e9c;
  --focus-halo: #ffffff;
  --on-photo: #ffffff;       /* текст поверх фото */
  --on-photo-muted: #e8edf0;
  --photo-shade: linear-gradient(180deg, rgba(8, 22, 30, 0) 28%, rgba(8, 22, 30, .42) 58%, rgba(8, 22, 30, .86) 100%);
  --photo-chip: rgba(255, 255, 255, .94);
  --photo-chip-ink: #13262f;
  --scrim: rgba(13, 28, 36, .52);   /* затемнение под листом */
  --bar-bg: rgba(241, 238, 232, .9);
  --print-bg: #ffffff;      /* QR-код и печать — белое в любой теме */
  --print-ink: #000000;
  --plate-band: #003399;    /* синие поля итальянского номера (sf-plate--it) — цвет знака ЕС, не акцент */
  --plate-band-ink: #ffffff;

  /* ── Цвет: состояния (SFR-0953) — всегда со значком или словом ── */
  --ok: #1d6e47;   --ok-soft: #e3f1e9;   --ok-ink: #14532f;
  --warn: #8a5a00; --warn-soft: #fbf0d6; --warn-ink: #6b4500;
  --bad: #b3261e;  --bad-soft: #fbe8e6;  --bad-ink: #8c1d17;
  /* учебная запись (SFR-0744): полосы, которые нельзя спутать с состоянием */
  --training-a: rgba(19, 38, 47, .07);
  --training-b: transparent;
  --training-ink: #13262f;

  /* ── Шрифт ──────────────────────────────────────────────── */
  --font-display: "Sfera Display", "Cormorant Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --font-text: "Sfera Text", Jost, "Futura PT", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-num: "Sfera Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* шкала — малая терция от основы, крупные ступени текут от ширины окна */
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .9375rem;   /* 15 */
  --fs-md: 1.0625rem;  /* 17 — основа текста клиента */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.25rem);   /* 28–36 заголовок раздела */
  --fs-3xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);   /* 34–52 заголовок страницы */
  --fs-4xl: clamp(2.75rem, 1.9rem + 4.2vw, 5rem);       /* 44–80 первый экран */
  --fs-body: var(--fs-md);
  --lh-tight: 1.04;
  --lh-head: 1.14;
  --lh-text: 1.55;
  --lh-serif: 1.62;
  --fw-text: 400;
  --fw-strong: 560;
  --fw-display: 600;
  --track-display: -.012em;
  --track-tight: -.005em;
  --track-plate: .06em;
  --fs-input-min: 1rem;     /* поле не мельче 16 — иначе iPhone увеличивает страницу */
  --underline-offset: .2em;
  --measure: 38em;           /* длина строки текста — меньше 80 знаков */

  /* ── Отступы ────────────────────────────────────────────── */
  --space-1: .25rem;   /* 4 */
  --space-2: .5rem;    /* 8 */
  --space-3: .75rem;   /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --gutter: var(--space-4);
  --section: var(--space-7);
  --wrap: 75rem;       /* 1200 — самая широкая колонка */
  --wrap-text: 46rem;

  /* ── Формы ──────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;   /* карточка */
  --radius-lg: 24px;   /* лист */
  --radius-pill: 999px;
  --line-w: 1px;
  --line-w-2: 2px;
  --focus-w: 3px;
  --frame-inset: 10px;                          /* паспарту на фото — рамка картин из брошюры */
  --frame-line: 1px solid rgba(255, 255, 255, .72);
  --ctl-h: 3rem;       /* высота кнопки и поля: 48 — цель касания */
  --ctl-h-sm: 2.5rem;
  --tap: 3rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --ratio-card: 4 / 3;
  --ratio-hero: 3 / 4;
  --ratio-wide: 16 / 9;

  /* ── Тени и слои ────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(19, 38, 47, .06), 0 1px 1px rgba(19, 38, 47, .04);
  --shadow-2: 0 1px 2px rgba(19, 38, 47, .05), 0 10px 28px rgba(19, 38, 47, .09);
  --shadow-3: 0 -2px 6px rgba(19, 38, 47, .05), 0 24px 60px rgba(19, 38, 47, .22);
  --z-bar: 20;
  --z-actionbar: 30;
  --z-sheet: 60;
  --z-toast: 80;
  --blur: 12px;

  /* ── Движение: одно на действие, без украшательства ─────── */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-reveal: 700ms;
  --dur-shimmer: 1400ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .3, 1);
  --rise: 12px;        /* на сколько поднимается появляющееся */

  /* ── Безопасная зона (вырез, полоса жестов) ─────────────── */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

/* ── Палец, а не мышь: малая кнопка — та же цель касания 48 (SFR-0954; проверка доступности витрины 18.10.2026).
   Слой «desk» (стойка с мышью) остаётся компактным: его правило ниже сильнее. ── */
@media (pointer: coarse) {
  :root { --ctl-h-sm: var(--tap); }
}

/* ── Плотность ─────────────────────────────────────────────── */
@media (min-width: 900px) {
  :root { --gutter: var(--space-6); --section: var(--space-8); }
}
/* стойка — плотность для мыши на широком экране; на телефоне тот же экран — с целью касания 48 (SFR-1140, как доска диспетчера) */
@media (min-width: 900px) {
  :root[data-density="desk"] {
    --fs-body: var(--fs-sm);
    --ctl-h: 2.25rem;
    --ctl-h-sm: 2rem;
    --tap: 2.25rem;
    --section: var(--space-6);
    --lh-text: 1.45;
  }
}
:root[data-density="hall"] {
  --fs-body: 2rem;
  --fs-sm: 1.5rem;
  --fs-xs: 1.25rem;
  --section: var(--space-8);
}

/* ── Роль: только отличия (SFR-0950) ───────────────────────── */
:root[data-role="staff"], :root[data-role="partner"], :root[data-role="hotel"] {
  --fs-body: var(--fs-sm);
  --section: var(--space-6);
  --radius-md: 12px;
  --radius-lg: 18px;
  --fw-display: 600;
}
:root[data-role="driver"] {
  --fs-body: 1.125rem;
  --ctl-h: 3.5rem;
  --tap: 3.5rem;
}

/* ── Тема ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #0e1922; --surface: #15222d; --surface-2: #1a2935; --surface-3: #22333f;
    --ink: #e8edf1; --ink-2: #c9d3da; --muted: #a3b0ba; --faint: #8d9aa5;
    --line: #273846; --line-strong: #344857; --field-line: #7f909d;
    --accent: #8db0f2; --accent-hover: #a9c3f6; --accent-ink: #0b1a2c; --accent-soft: #1d3150; --accent-soft-ink: #cfdcf8;
    --focus: #8db0f2; --focus-halo: #0e1922;
    --photo-chip: rgba(14, 25, 34, .9); --photo-chip-ink: #e8edf1;
    --scrim: rgba(0, 0, 0, .6); --bar-bg: rgba(14, 25, 34, .88);
    --ok: #6fcf9c; --ok-soft: #133224; --ok-ink: #a5e6c2;
    --warn: #e7b85a; --warn-soft: #33270f; --warn-ink: #f2d391;
    --bad: #f08a80; --bad-soft: #3a1a18; --bad-ink: #f7b8b1;
    --training-a: rgba(255, 255, 255, .07); --training-ink: #e8edf1;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 10px 28px rgba(0, 0, 0, .38); --shadow-3: 0 24px 60px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1922; --surface: #15222d; --surface-2: #1a2935; --surface-3: #22333f;
  --ink: #e8edf1; --ink-2: #c9d3da; --muted: #a3b0ba; --faint: #8d9aa5;
  --line: #273846; --line-strong: #344857; --field-line: #7f909d;
  --accent: #8db0f2; --accent-hover: #a9c3f6; --accent-ink: #0b1a2c; --accent-soft: #1d3150; --accent-soft-ink: #cfdcf8;
  --focus: #8db0f2; --focus-halo: #0e1922;
  --photo-chip: rgba(14, 25, 34, .9); --photo-chip-ink: #e8edf1;
  --scrim: rgba(0, 0, 0, .6); --bar-bg: rgba(14, 25, 34, .88);
  --ok: #6fcf9c; --ok-soft: #133224; --ok-ink: #a5e6c2;
  --warn: #e7b85a; --warn-soft: #33270f; --warn-ink: #f2d391;
  --bad: #f08a80; --bad-soft: #3a1a18; --bad-ink: #f7b8b1;
  --training-a: rgba(255, 255, 255, .07); --training-ink: #e8edf1;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 10px 28px rgba(0, 0, 0, .38); --shadow-3: 0 24px 60px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
/* солнце: весь текст не ниже 12 : 1 — экран водителя и клиента у выхода на ярком свету (SFR-0955; заявка #582 п. 2–3) */
:root[data-theme="sun"] {
  --paper: #ffffff; --surface: #ffffff; --surface-2: #f4f4f2; --surface-3: #e6e6e3;
  --ink: #000c12; --ink-2: #0f2029; --muted: #1c2a31; --faint: #26343b;
  --line: #9aa3a8; --line-strong: #5d686e; --field-line: #2b3a42;
  --accent: #0b2c63; --accent-hover: #082250; --accent-soft: #e8eef8; --accent-soft-ink: #082250;
  --ok: #06301a; --ok-soft: #eef7f1; --ok-ink: #06301a;
  --warn: #3d2800; --warn-soft: #fdf6e6; --warn-ink: #332100;
  --bad: #5c0f0a; --bad-soft: #fdf1ef; --bad-ink: #4f0c08;
  --focus-w: 4px;
}

/* ── Цвет по роли (решение владельца 22.10.2026 18:50, ЖИ-089 «да»; обоснование и расчёт контраста —
   work/proposals/2026-10-22-cveta-po-roli/README.md). Водитель днём — «солнце» без изменений. Тема устройства
   по-прежнему главная: светлые схемы персонала и отеля — только при светлой теме устройства или data-theme="light".
   Красный, жёлтый и зелёный — только состояния (SFR-0953), акценты — синий Венеции 218–220°. */

/* Водитель, ночь: тёмная дорога без бликов. Текст не белый (13 : 1 — меньше ореола букв на тёмном),
   залитая кнопка приглушена: в темноте салона яркая заливка слепит сильнее всего. Ночь водителя — data-theme="dark" (voditel.js). */
:root[data-role="driver"][data-theme="dark"], :root[data-role="driver"][data-theme="night"] {
  --paper: #0c1216; --surface: #131b20; --surface-2: #182228; --surface-3: #1f2a31;
  --ink: #dde3e6; --ink-2: #c2cbd0; --muted: #a7b2b9; --faint: #8e9aa2;
  --line: #24313a; --line-strong: #37454f; --field-line: #7b8a94;
  --accent: #7d9bd0; --accent-hover: #93acd8; --accent-ink: #0c1216; --accent-soft: #1b2b44; --accent-soft-ink: #c9d7f0;
  --focus: #9db4de; --focus-halo: #0c1216;
  --bar-bg: rgba(12, 18, 22, .94); --scrim: rgba(0, 0, 0, .66);
  --ok: #67c095; --ok-soft: #12291e; --ok-ink: #9fdcbd;
  --warn: #d9ad57; --warn-soft: #2c220e; --warn-ink: #ecd196;
  --bad: #e5857b; --bad-soft: #321816; --bad-ink: #f2b3ac;
  --shadow-1: none; --shadow-2: 0 0 0 1px var(--line); --shadow-3: 0 0 0 1px var(--line-strong);
  color-scheme: dark;
}

/* Персонал и диспетчер, день: холодный нейтральный камень вместо тёплого. Весь день у монитора: меньше жёлтого отлива
   на большой площади, текст 14 : 1 — чётко, но без резкости чёрного по белому; рабочий экран отличается от клиентского (SFR-0950). */
:root[data-role="staff"][data-theme="light"] {
  --paper: #e9ecec; --surface: #f9faf9; --surface-2: #f1f3f3; --surface-3: #dfe3e3;
  --ink: #1c2a31; --ink-2: #33434b; --muted: #4b5960; --faint: #5d6a70;
  --line: #d3d9da; --line-strong: #bcc4c6; --field-line: #7a868b;
  --accent: #2a5297; --accent-hover: #21437e; --accent-soft: #e2e9f3; --accent-soft-ink: #1c3c72;
  --bar-bg: rgba(233, 236, 236, .94);
  --shadow-1: 0 1px 0 rgba(28, 42, 49, .06); --shadow-2: 0 1px 2px rgba(28, 42, 49, .06), 0 6px 16px rgba(28, 42, 49, .06);
}
/* Персонал, вечер: та же схема тёмной, контраст 12 : 1 — дома вечером без «фонаря» в лицо. */
:root[data-role="staff"][data-theme="dark"] {
  --paper: #111a20; --surface: #172229; --surface-2: #1c2830; --surface-3: #233039;
  --ink: #d5dde1; --ink-2: #bcc7cd; --muted: #9fabb3; --faint: #87949c;
  --line: #26343d; --line-strong: #364650; --field-line: #7a8a94;
  --accent: #86a6dc; --accent-hover: #9db7e3; --accent-ink: #0f1a22; --accent-soft: #1c2d47; --accent-soft-ink: #cddaf1;
  --bar-bg: rgba(17, 26, 32, .92);
}

/* Отель: «палаццо» — холодный мрамор, тёмные чернила, глубокий синий Венеции; строгая форма (малые радиусы, линии вместо теней).
   Лицо Sfera перед отелем четырёх-пяти звёзд: сдержанно и дорого, без украшений. Телефон — та же схема. Форма — при любой теме, цвет — при светлой. */
:root[data-role="hotel"] {
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --fw-display: 500; --track-display: .004em;
}
:root[data-role="hotel"][data-theme="light"] {
  --paper: #eef0f2; --surface: #ffffff; --surface-2: #f6f7f8; --surface-3: #e4e7ea;
  --ink: #161c28; --ink-2: #2c3444; --muted: #4c5563; --faint: #5e6775;
  --line: #dde1e6; --line-strong: #c3c9d1; --field-line: #7b8492;
  --accent: #203358; --accent-hover: #172744; --accent-soft: #e6eaf1; --accent-soft-ink: #1a2a49;
  --bar-bg: rgba(255, 255, 255, .96);
  --shadow-1: 0 0 0 1px var(--line); --shadow-2: 0 0 0 1px var(--line), 0 8px 24px rgba(22, 28, 40, .06);
}

/* Без data-theme — по теме устройства: светлая — схемы выше, тёмная — вечер персонала (у отеля — общая тёмная). */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  :root[data-role="staff"]:not([data-theme]) {
    --paper: #e9ecec; --surface: #f9faf9; --surface-2: #f1f3f3; --surface-3: #dfe3e3;
    --ink: #1c2a31; --ink-2: #33434b; --muted: #4b5960; --faint: #5d6a70;
    --line: #d3d9da; --line-strong: #bcc4c6; --field-line: #7a868b;
    --accent: #2a5297; --accent-hover: #21437e; --accent-soft: #e2e9f3; --accent-soft-ink: #1c3c72;
    --bar-bg: rgba(233, 236, 236, .94);
    --shadow-1: 0 1px 0 rgba(28, 42, 49, .06); --shadow-2: 0 1px 2px rgba(28, 42, 49, .06), 0 6px 16px rgba(28, 42, 49, .06);
  }
  :root[data-role="hotel"]:not([data-theme]) {
    --paper: #eef0f2; --surface: #ffffff; --surface-2: #f6f7f8; --surface-3: #e4e7ea;
    --ink: #161c28; --ink-2: #2c3444; --muted: #4c5563; --faint: #5e6775;
    --line: #dde1e6; --line-strong: #c3c9d1; --field-line: #7b8492;
    --accent: #203358; --accent-hover: #172744; --accent-soft: #e6eaf1; --accent-soft-ink: #1a2a49;
    --bar-bg: rgba(255, 255, 255, .96);
    --shadow-1: 0 0 0 1px var(--line); --shadow-2: 0 0 0 1px var(--line), 0 8px 24px rgba(22, 28, 40, .06);
  }
}
@media (prefers-color-scheme: dark) {
  :root[data-role="staff"]:not([data-theme]) {
    --paper: #111a20; --surface: #172229; --surface-2: #1c2830; --surface-3: #233039;
    --ink: #d5dde1; --ink-2: #bcc7cd; --muted: #9fabb3; --faint: #87949c;
    --line: #26343d; --line-strong: #364650; --field-line: #7a8a94;
    --accent: #86a6dc; --accent-hover: #9db7e3; --accent-ink: #0f1a22; --accent-soft: #1c2d47; --accent-soft-ink: #cddaf1;
    --bar-bg: rgba(17, 26, 32, .92);
  }
}

/* ── Движение по просьбе системы ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-reveal: 0ms; --rise: 0px; }
}