/* Компоновка: на телефоне приложение во весь экран (шапка, четыре страницы План · Сейчас · Идеи · Бизнес, пилюля ввода внизу); от 900 px «телефон» 400 px по центру и колонка «Что попробовать» справа. */
:root {
  color-scheme: light;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bg: #F2F3F6;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --text: #15171C;
  --muted: #646B78;
  --line: #E2E5EA;
  --accent: #2F6BFF;
  --done: #1E9467;
  --doing: #B87100;
  --snooze: #6550E0;
  --drop: #7D8492;
  --urgent: #DB3F33;
  --on-color: #FFFFFF;
  --icon-fg: #FFFFFF;

  /* сферы: четыре цвета, не похожие на цвета ответов. Wildberries · Обучение · ИИ-проекты · Личное */
  --sph-wb: #B81877;
  --sph-edu: #2C6E9E;
  --sph-ai: #0E8486;
  --sph-me: #8E5F33;

  --shade: #1B2A4A;
  --shade-s: 7%;
  --shade-m: 14%;
  --scrim: 34%;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--shade) var(--shade-s), transparent), 0 10px 28px color-mix(in srgb, var(--shade) var(--shade-s), transparent);
  --shadow-pop: 0 2px 6px color-mix(in srgb, var(--shade) var(--shade-s), transparent), 0 18px 44px color-mix(in srgb, var(--shade) var(--shade-m), transparent);

  --r-card: 24px;
  --r-btn: 18px;
  --r-sheet: 28px;
  --ease-out: cubic-bezier(.2, .9, .25, 1);
  --spring: cubic-bezier(.2, 1.35, .4, 1);

  /* Ниже — шкалы, снятые с прототипа (design/src/*.css). В прототипе многие значения пока записаны числами;
     новый web/ берёт их отсюда переменными. Шрифт системный — на iPhone это SF Pro, файлы шрифтов не нужны. */

  /* Текст: размер и высота строки. Основной текст — 15/20. */
  --fs-micro: 11px;   --lh-micro: 14px;    /* счётчики, крошечные подписи */
  --fs-caption: 12px; --lh-caption: 16px;  /* метки, подписи под кнопками */
  --fs-small: 13px;   --lh-small: 18px;    /* вторичный текст, время, сфера */
  --fs-sub: 14px;     --lh-sub: 18px;
  --fs-body: 15px;    --lh-body: 20px;     /* основной текст, строки списков */
  --fs-lead: 16px;    --lh-lead: 22px;     /* поле записи (16 — чтобы iPhone не увеличивал страницу) */
  --fs-strong: 17px;  --lh-strong: 22px;   /* кнопки ответов, заголовки панелей */
  --fs-h3: 20px;      --lh-h3: 26px;
  --fs-h2: 22px;      --lh-h2: 28px;       /* текст вопроса на карточке: clamp(21px, 6vw, 25px) */
  --fs-h1: 28px;      --lh-h1: 34px;
  --fs-display: 34px; --lh-display: 40px;  /* «Чисто.» и крупные числа */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --ls-tight: -.02em; --ls-snug: -.01em; --ls-caps: .04em;

  /* Отступы: шаг 2 и 4 px. Поля экрана — 16 px. */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px;
  --gutter: 16px;

  /* Скругления (кроме --r-card, --r-btn, --r-sheet выше) */
  --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-14: 14px; --r-16: 16px; --r-20: 20px; --r-22: 22px; --r-pill: 999px;

  /* Высота касаемых элементов: не меньше 44 px */
  --tap-min: 44px; --tap-row: 48px; --tap-btn: 52px; --tap-big: 56px;

  /* Длительности */
  --d-fast: .15s;  /* нажатие, подсветка */
  --d-base: .2s;   /* появление меток, смена вкладки */
  --d-mid: .25s;
  --d-slow: .3s;   /* уход карточки после ответа */
  --d-sheet: .4s;  /* выезд нижней панели */
  --d-receipt-undo: 2.6s; /* квитанция с «Вернуть» */
  --d-receipt: 1.6s;      /* квитанция без «Вернуть» */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F1115; --surface: #1A1D23; --surface-2: #23272F; --text: #EEF0F4; --muted: #9AA1AD; --line: #2D323B;
    --accent: #6E9BFF; --done: #3DD39A; --doing: #F2B23E; --snooze: #A194FF; --drop: #8C93A0; --urgent: #FF6B5E;
    --on-color: #0F1115;
    --sph-wb: #F06AB8; --sph-edu: #7DB3E0; --sph-ai: #4FC7C9; --sph-me: #D2A06E;
    --shade: #000000; --shade-s: 34%; --shade-m: 55%; --scrim: 58%;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1115; --surface: #1A1D23; --surface-2: #23272F; --text: #EEF0F4; --muted: #9AA1AD; --line: #2D323B;
  --accent: #6E9BFF; --done: #3DD39A; --doing: #F2B23E; --snooze: #A194FF; --drop: #8C93A0; --urgent: #FF6B5E;
  --on-color: #0F1115;
  --sph-wb: #F06AB8; --sph-edu: #7DB3E0; --sph-ai: #4FC7C9; --sph-me: #D2A06E;
  --shade: #000000; --shade-s: 34%; --shade-m: 55%; --scrim: 58%;
}