/* Токены дизайна Soft Media РКО (Дизайн-спека §3). Единственный файл, где разрешены цвета литералами.
   Две темы: тёмная (по умолчанию, блок :root) и светлая (блок :root[data-theme="light"] ниже, переопределяет только цвета, тени и подложки).
   Какая тема включена, решает атрибут data-theme на <html>: его ставит js/theme-init.js ещё до первой отрисовки (выбор лежит в localStorage,
   положение «Как на устройстве» сверяется с системной настройкой). Всё остальное в css/ берёт значения только отсюда через var(). */
:root {
  color-scheme: dark;

  /* Поверхности: чёрная база без чистого чёрного, ступени светлее по глубине */
  --bg: #0c0c0e;
  --surface: #151517;
  --surface-2: #1c1c1f;
  --raised: #242428;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-strong: #7a7a83;

  /* Текст */
  --text: #f4f1ee;
  --text-2: #c4c1bd;
  --mute: #9a9aa3;
  --disabled: #6a6a72;

  /* Акцент: один оранжевый */
  --accent: #ff6b1a;
  --accent-text: #ff8a47; /* оранжевый для текста, ссылок и значков на поверхности (в светлой теме темнее, чтобы читался) */
  --accent-hi: #ff8a47; /* верх градиента кнопки: одинаков в обеих темах */
  --accent-fill: #ff6b1a; /* середина градиента кнопки: одинакова в обеих темах */
  --accent-lo: #e4540e;
  --accent-ink: #1a0a02;
  --accent-soft: rgba(255, 107, 26, 0.12);
  --accent-line: rgba(255, 107, 26, 0.45);

  /* Большая оранжевая карточка */
  --hero-1: #f5651a;
  --hero-2: #e4540e;
  --hero-3: #c9420a;
  --hero-text: #ffffff;
  --hero-chip: rgba(26, 10, 2, 0.5);
  --hero-ring: rgba(255, 255, 255, 0.14);
  --hero-track: rgba(255, 255, 255, 0.28);
  --hero-dial: rgba(26, 10, 2, 0.3); /* тёмная дорожка кольца на главном экране */
  --hero-arc-b: #ffe3cf; /* конец градиента дуги кольца */
  --hero-glint: rgba(255, 255, 255, 0.2); /* тонкая внутренняя линия кольца */
  --hero-text-2: rgba(255, 255, 255, 0.88); /* вторая строка на тёмной плашке оранжевой карточки */
  --wait-a: rgba(255, 107, 26, 0.2); /* плашка «Ждём целевое действие»: градиент от тёплого к спокойному */
  --wait-b: rgba(255, 107, 26, 0.06);
  --glow-wait: 0 16px 32px -20px rgba(255, 107, 26, 0.7);
  --glow-arc: rgba(255, 107, 26, 0.6); /* свечение яркой дуги кольца */

  /* Статусы: только по смыслу, всегда с иконкой или словом */
  --ok: #4cd58a;
  --ok-soft: rgba(76, 213, 138, 0.12);
  --ok-quiet: #5b9279; /* приглушённая зелёная часть кольца «заработано» */
  --warn: #ffb52e;
  --warn-soft: rgba(255, 181, 46, 0.14);
  --stop: #ff5470;
  --stop-soft: rgba(255, 84, 112, 0.14);
  --stop-line: rgba(255, 84, 112, 0.5);
  --stop-text: #ff8aa0;

  --quiet-label: var(--disabled); /* подпись самой неприметной плашки «За всё время» на главном (принято в тёмной теме) */
  --edge: transparent; /* тонкий контур у кнопок пин-пада и серых плашек: в тёмной теме не нужен, их отделяет ступень цвета */
  --hatch: var(--line-2); /* штриховка нерабочих часов в календаре */
  --strip-bg: transparent; /* тонкие строки «перенесён» и «отменён» в календаре: в тёмной теме без подложки */
  --ring-track: rgba(255, 255, 255, 0.1); /* дорожка кольца видна на любом фоне, в том числе на выбранной строке */
  --scrim: rgba(6, 6, 8, 0.72);
  --scrim-tour: rgba(6, 6, 8, 0.72); /* затемнение обучения: в тёмной теме то же */
  --shadow-tour: var(--shadow-raised); /* тень подсказки обучения: в тёмной теме как у поднятых слоёв */
  --on-stop: #0c0c0e;

  /* Тени и свечение (на тёмном глубину даёт ступень цвета и контур) */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-raised: 0 24px 64px -16px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glow-hero: 0 28px 70px -24px rgba(255, 107, 26, 0.55);
  --glow-btn: 0 12px 28px -12px rgba(255, 107, 26, 0.6);
  --glow-pop: 0 8px 24px -8px rgba(255, 107, 26, 0.5);
  --btn-fill: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent-fill) 38%, var(--accent-lo) 100%);
  --hero-fill: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%);
  --ring-fill-a: #ff8a47;
  --ring-fill-b: #ff6b1a;
  --spot: radial-gradient(closest-side, rgba(255, 107, 26, 0.14), rgba(255, 107, 26, 0));
  --skel: linear-gradient(90deg, var(--surface-2) 0%, var(--raised) 50%, var(--surface-2) 100%);

  /* Шрифты: свои, с нашего сервера (CSP font-src 'self'); запасные на случай сбоя загрузки */
  --f-display: "RKO Display", "DIN Condensed", "Arial Narrow", Impact, sans-serif;
  --f-text: "RKO Text", -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --f-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  /* Шкала типографики (телефон; на компьютере переопределена ниже) */
  --t-hero: 4rem;
  --t-sum: 4.5rem;
  --t-h1: 2.25rem;
  --t-num-l: 2.5rem;
  --t-num-m: 1.875rem;
  --t-num-s: 1.375rem;
  --t-h2: 1.25rem;
  --t-lh-h2: 1.625rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.75rem;
  --t-caps-warn: 1.0625rem;
  --t-btn: 1.0625rem;

  /* Отступы (база 4 px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 2rem;
  --s-8: 2.5rem;
  --s-9: 3.5rem;
  --s-10: 4.5rem;
  --gutter: 1rem;
  --gap: 0.75rem;
  --pad: 1rem;
  --pad-hero: 1.5rem;

  /* Скругления: одна шкала на всё приложение */
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Высоты */
  --h-btn: 52px;
  --h-btn-call: 60px;
  --h-field: 52px;
  --h-topbar: 56px;
  --h-tabbar: 64px;
  --w-side: 248px;

  /* Движение */
  --dur-press: 120ms;
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-sheet: 300ms;
  --dur-count: 600ms;
  --dur-ring: 900ms;
  --dur-pop: 1400ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Слои */
  --z-sticky: 10;
  --z-dock: 20;
  --z-sheet: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-pop: 60;
  --z-lock: 100;
}

/* Светлая тема: тёплая бумага, а не белая простыня. Те же правила, что у тёмной: один оранжевый акцент, крупные цифры Fira Sans Extra Condensed,
   большие скругления. Глубину даёт ступень цвета и мягкая тёплая тень (в тёмной глубину давал контур). Текст на поверхностях не ниже 4,5:1,
   оранжевый текст темнее экранного акцента, чтобы не «выгорал». Оранжевая карточка, кнопки и всё, что лежит на оранжевом, одинаковы в обеих темах. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #efeae1;
  --surface: #f8f5ef;
  --surface-2: #f1ece3;
  --raised: #fdfbf7;
  --line: rgba(74, 52, 28, 0.11);
  --line-2: rgba(74, 52, 28, 0.19);
  --line-strong: #857e72;

  --text: #1f1a15;
  --text-2: #463f37;
  --mute: #665f55;
  --disabled: #8c8579;

  --accent: #e6540a;
  --accent-text: #9c3200;
  --accent-soft: rgba(230, 84, 10, 0.11);
  --accent-line: rgba(230, 84, 10, 0.5);

  --wait-a: rgba(230, 84, 10, 0.17);
  --wait-b: rgba(230, 84, 10, 0.05);
  --glow-wait: 0 14px 28px -20px rgba(230, 84, 10, 0.55);
  --glow-arc: rgba(230, 84, 10, 0.35);

  --ok: #126b3b;
  --ok-soft: rgba(18, 107, 59, 0.11);
  --ok-quiet: #4f8d70;
  --warn: #7e4a00;
  --warn-soft: rgba(176, 106, 0, 0.13);
  --stop: #d4234a;
  --stop-soft: rgba(212, 35, 74, 0.1);
  --stop-line: rgba(212, 35, 74, 0.5);
  --stop-text: #b01638;

  --quiet-label: var(--mute); /* на бумаге --disabled слишком бледный для подписи: берём --mute, плашка всё равно самая тихая (без заливки, мелкая цифра) */
  --edge: rgba(74, 52, 28, 0.2); /* на бумаге светло-кремовая кнопка или плашка на кремовом фоне сливается: нужен тонкий тёплый контур */
  --hatch: rgba(74, 52, 28, 0.085); /* штриховка бледнее, чтобы не шумела под карточками */
  --strip-bg: var(--surface); /* под текстом строки не должна просвечивать штриховка нерабочих часов */
  --ring-track: rgba(74, 52, 28, 0.12);
  --scrim: rgba(38, 28, 18, 0.46);
  --scrim-tour: rgba(52, 32, 12, 0.36); /* обучение: тёплое коричневое, чуть темнее прежних 28 % (проверка 12.11: при 28 % экран выглядел мутным, подсказка сливалась) */
  --shadow-tour: 0 0 0 1px rgba(52, 32, 12, 0.16), 0 20px 44px -14px rgba(52, 32, 12, 0.5), 0 3px 8px rgba(52, 32, 12, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); /* подсказка на светлом затемнении: чёткий тёплый контур и тень */
  --on-stop: #ffffff;

  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(74, 52, 28, 0.06), 0 10px 24px -16px rgba(74, 52, 28, 0.2);
  --shadow-raised: 0 28px 64px -20px rgba(74, 52, 28, 0.34), 0 2px 8px rgba(74, 52, 28, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glow-hero: 0 24px 52px -26px rgba(230, 84, 10, 0.5);
  --glow-btn: 0 10px 24px -12px rgba(230, 84, 10, 0.55);
  --glow-pop: 0 8px 22px -8px rgba(230, 84, 10, 0.4);
  --ring-fill-a: #f4742a;
  --ring-fill-b: #e6540a;
  --spot: radial-gradient(closest-side, rgba(230, 84, 10, 0.1), rgba(230, 84, 10, 0));
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
    --gap: 1rem;
    --pad: 1.25rem;
    --pad-hero: 1.75rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
    --gap: 1.5rem;
    --pad: 1.5rem;
    --pad-hero: 2rem;
    --t-hero: 7rem;
    --t-sum: 6rem;
    --t-h1: 3.5rem;
    --t-num-l: 3rem;
    --t-num-m: 2.125rem;
    --t-num-s: 1.5rem;
    --t-h2: 1.375rem;
    --t-lh-h2: 1.75rem;
    --t-caps-warn: 1.25rem;
    --t-btn: 1rem;
  }
}