/* Дизайн-токены.
 *
 * Источник — UI-кит из docs/driver-app/ui-kit (файл «UI Kit.dc.html»), светлая
 * тема — из макета «СВЕТЛАЯ ТЕМА · РЕЖИМ A» в «Главный экран.dc.html».
 *
 * Палитра общая с приложениями: те же значения продублированы в
 * apps/driver-ios (DesignSystem/Theme.swift) и apps/driver-android
 * (designsystem/Theme.kt), на них же смотрит лендинг. Расхождение цветов между
 * сайтом и приложением человек замечает сразу, поэтому правка цвета здесь —
 * повод свериться с теми двумя файлами.
 *
 * Правило именования: токены семантические, а не «цветные». Компонент просит
 * --surface-card и --positive, а не «тёмно-серый» и «зелёный», иначе светлая
 * тема снова превратится в инверсию.
 */

:root {
  /* ── Поверхности ──
   * Пять ступеней вместо четырёх случайных серых. Глубина набирается слоями и
   * тенью, а не рамкой в 1px: canvas → card → inset → control.
   */
  --surface-canvas: #07080a;
  --surface-card: #14171a;
  --surface-inset: #1b1f23;
  --surface-control: #23282d;
  --surface-hairline: #2e343a;

  /* ── Текст ── три уровня, ниже опускаться некуда без потери контраста */
  --text-hi: #f2f5f7;
  --text-mid: #a3adb5;
  --text-low: #6c777f;
  --text-disabled: #5a646b;

  /* ── Бренд ──
   * Жёлтый — единственный акцент и появляется на экране один раз: либо на
   * главной сумме, либо на главной кнопке.
   */
  --brand: #ffd426;
  --brand-hi: #ffe680;
  --brand-soft: #4a3c00;
  --brand-on-soft: #ffe680;
  --brand-ink: #171a05;

  /* Главная кнопка вынесена отдельной парой: в светлой теме она переворачивается
   * (чернильный фон с жёлтой типографикой), потому что жёлтый на белом теряет
   * контраст. Компонентам об этом знать не нужно. */
  --cta-bg: var(--brand);
  --cta-fg: var(--brand-ink);
  --cta-bg-hover: #ffdd4d;

  /* ── Семантика ──
   * Тройками: заливка, мягкий фон, текст поверх мягкого фона. Цвет несёт смысл,
   * а не украшает: статус читается и без цвета, по иконке и подписи.
   */
  --positive: #2abf6e; /* пополнение, заработок, успех */
  --positive-soft: #10301f;
  --positive-on-soft: #57d68f;

  --warning: #e8952a; /* низкий баланс, близкий срок */
  --warning-soft: #3a2607;
  --warning-on-soft: #f6b65e;

  --negative: #e2564f; /* минус, ошибка, штраф */
  --negative-soft: #3a1614;
  --negative-on-soft: #ff8b85;

  --info: #4c8df6; /* в процессе, оценка, нейтральное */
  --info-soft: #10233f;
  --info-on-soft: #7fb1ff;

  /* Отдельный акцент для вывода денег себе: сильнее обычного positive, потому
   * что это единственная операция, где деньги уходят водителю, а не парку. */
  --payout: #4de896;
  --payout-soft: #0e3d24;
  --payout-on-soft: #9bf3c4;

  /* ── Тени ──
   * rest — без тени, card — обычная карточка, overlay — модалки и шиты.
   */
  --elev-card: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --elev-overlay: 0 18px 44px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --elev-sheet: 0 -18px 44px rgba(0, 0, 0, 0.7);
  --scrim: rgba(4, 5, 6, 0.74);

  /* ── Радиусы ── четыре ступени вместо семи */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-sheet: 28px;
  --r-pill: 999px;

  /* ── Типографика ──
   * Manrope для интерфейса, JetBrains Mono для всего, что цифры: суммы, часы,
   * госномера, УИН, время. tabular-nums обязателен — иначе таймер до списания
   * дёргает соседние элементы на каждой смене цифры.
   */
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --text-money-hero: 58px; /* героическая сумма на «Смене» */
  --text-money-xl: 36px;
  --text-money-lg: 28px;
  --text-money-md: 20px;
  --text-money-sm: 16px;

  --text-title-xl: 26px;
  --text-title-lg: 21px;
  --text-title-md: 17px;
  --text-title-sm: 15px;
  --text-body: 15px;
  --text-caption: 13px;
  --text-label: 11px;

  /* ── Размеры управления ── тач-цели для руки за рулём */
  --control-h-lg: 52px;
  --control-h-md: 44px;
  --control-h-sm: 34px;
  --tabbar-h: 78px;

  /* ── Движение ── */
  --dur-fast: 120ms;
  --dur-normal: 180ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  color-scheme: dark;
}

/* Светлая тема.
 *
 * Намеренная, а не инверсия. Три отличия, которые нельзя получить простым
 * переворотом: главная кнопка становится чернильной с жёлтой типографикой
 * (жёлтый на белом не даёт контраста), жёлтый уходит в бейдж уровня, зелёный
 * темнеет ради читаемости на солнце — водитель смотрит экран в машине днём.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --surface-canvas: #f4f5f7;
    --surface-card: #ffffff;
    --surface-inset: #f4f5f7;
    --surface-control: #ebedf0;
    --surface-hairline: #e3e6e9;

    --text-hi: #14171a;
    --text-mid: #3d464c;
    --text-low: #7b858c;
    --text-disabled: #9aa4ab;

    --brand: #e8b400;
    --brand-hi: #c99b00;
    --brand-soft: #fff1b8;
    --brand-on-soft: #6b5300;

    --cta-bg: #171a05;
    --cta-fg: #ffd426;
    --cta-bg-hover: #23281a;

    --positive: #14874f;
    --positive-soft: #e4f3ea;
    --positive-on-soft: #0f6b3e;

    --warning: #b26a00;
    --warning-soft: #fdf0dc;
    --warning-on-soft: #8a5100;

    --negative: #c8352d;
    --negative-soft: #fceceb;
    --negative-on-soft: #a52820;

    --info: #2c6fd6;
    --info-soft: #e8f0fd;
    --info-on-soft: #1c53a8;

    --payout: #0f6b3e;
    --payout-soft: #e4f3ea;
    --payout-on-soft: #0b5231;

    --elev-card: 0 2px 10px rgba(16, 20, 24, 0.08);
    --elev-overlay: 0 18px 44px rgba(16, 20, 24, 0.18), 0 0 0 1px rgba(16, 20, 24, 0.06);
    --elev-sheet: 0 -18px 44px rgba(16, 20, 24, 0.16);
    --scrim: rgba(16, 20, 24, 0.42);

    color-scheme: light;
  }
}

/* Явный выбор темы пользователем перекрывает системный. Атрибут ставится на
 * <html>, поэтому переопределение работает в обе стороны. */
:root[data-theme='light'] {
  --surface-canvas: #f4f5f7;
  --surface-card: #ffffff;
  --surface-inset: #f4f5f7;
  --surface-control: #ebedf0;
  --surface-hairline: #e3e6e9;

  --text-hi: #14171a;
  --text-mid: #3d464c;
  --text-low: #7b858c;
  --text-disabled: #9aa4ab;

  --brand: #e8b400;
  --brand-hi: #c99b00;
  --brand-soft: #fff1b8;
  --brand-on-soft: #6b5300;

  --cta-bg: #171a05;
  --cta-fg: #ffd426;
  --cta-bg-hover: #23281a;

  --positive: #14874f;
  --positive-soft: #e4f3ea;
  --positive-on-soft: #0f6b3e;

  --warning: #b26a00;
  --warning-soft: #fdf0dc;
  --warning-on-soft: #8a5100;

  --negative: #c8352d;
  --negative-soft: #fceceb;
  --negative-on-soft: #a52820;

  --info: #2c6fd6;
  --info-soft: #e8f0fd;
  --info-on-soft: #1c53a8;

  --payout: #0f6b3e;
  --payout-soft: #e4f3ea;
  --payout-on-soft: #0b5231;

  --elev-card: 0 2px 10px rgba(16, 20, 24, 0.08);
  --elev-overlay: 0 18px 44px rgba(16, 20, 24, 0.18), 0 0 0 1px rgba(16, 20, 24, 0.06);
  --elev-sheet: 0 -18px 44px rgba(16, 20, 24, 0.16);
  --scrim: rgba(16, 20, 24, 0.42);

  color-scheme: light;
}

/* Мобильный экран узкий, а героическая сумма не должна переноситься: на 390px
 * «104 800 ₽» в 58px уже не помещается. */
@media (max-width: 400px) {
  :root {
    --text-money-hero: 48px;
    --text-money-xl: 32px;
  }
}

/* Водитель может ехать с включённым «уменьшить движение» — пульсация статуса и
 * бегущий пунктир маршрута тогда не нужны. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-normal: 0ms;
    --dur-slow: 0ms;
  }
}