/* ─────────────────────────────────────────────────────────────
   СтройКонтроль — токены дизайн-системы.
   Единственный источник значений: в разметке и стилях допускаются
   только var(--…), никаких «на глазок».

   Аудитория — два пользователя 50+ в очках, iPhone. Отсюда крупный
   базовый кегль (17), минимум 13px на экране, зоны нажатия от 48px
   и контраст основного текста ≥ 7:1.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── масштаб кегля: --sk-fs переключается кнопками А/А/А в настройках,
     --sk-u = «1px при обычном размере», поэтому все размеры растут вместе ── */
  --sk-fs: 1;
  --sk-u: calc(1rem / 16 * var(--sk-fs));

  /* ── 1.1 Сетка и отступы: только эти семь значений ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  --screen-pad: var(--sp-4);      /* поля экрана по горизонтали */
  --head-row: 44px;               /* высота строки шапки: одинакова везде */
  --card-gap: var(--sp-3);        /* между карточками */
  --card-pad: var(--sp-4);        /* внутри карточки */
  --section-gap: var(--sp-6);     /* между секциями */
  --section-head-gap: var(--sp-3);/* заголовок секции → содержимое */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ── 1.2 Скругления ── */
  --r-card: 14px;                 /* карточки и листы */
  --r-btn: 12px;                  /* кнопки и поля ввода */
  --r-chip: 10px;                 /* чипсы и бейджи */
  --r-tag: 8px;                   /* метки статусов */
  --r-full: 999px;                /* точки, переключатели, ручка листа */

  /* ── 1.3 Типографика ── */
  --fs-hero: calc(34 * var(--sk-u));       /* себестоимость в шапке объекта */
  --fs-title: calc(24 * var(--sk-u));      /* заголовок экрана */
  --fs-card-title: calc(17 * var(--sk-u)); /* заголовок карточки */
  --fs-body: calc(17 * var(--sk-u));       /* основной текст */
  --fs-secondary: calc(15 * var(--sk-u));  /* вторичный текст */
  --fs-caption: calc(13 * var(--sk-u));    /* подписи и метки — минимум на экране */

  --fw-hero: 800;
  --fw-title: 700;
  --fw-strong: 600;
  --fw-medium: 500;
  --fw-regular: 400;

  --ls-caption: 0.3px;
  --ls-title: -0.4px;
  --ls-hero: -0.8px;

  /* ── 1.4 Цвета: нейтральная основа + один акцент + семантика ── */
  /* Заливка кнопок одинакова в обеих темах. Взят затемнённый синий: с #3B82F6
     белый текст на кнопке давал 3.7:1 — для очков мало, здесь 5.2:1. */
  --accent: #2563EB;
  --accent-press: #1D4ED8;                 /* нажатое: темнее */
  /* Текст акцентом («Отмена», ссылки) на светлой поверхности при #3B82F6 даёт
     3.7:1 — мало для 50+. Для текста берём затемнённый вариант, в тёмной теме —
     осветлённый. Заливки при этом остаются одного цвета в обеих темах. */
  --accent-text: #2563EB;
  --accent-soft: rgba(37, 99, 235, 0.12);  /* подложка чипсов и мягких кнопок */
  --accent-ring: rgba(37, 99, 235, 0.35);

  /* Семантика: текст на своей мягкой подложке проверен на ≥ 4.5:1 в обеих темах.
     В светлой цвет текста темнее заливки — иначе бейдж не читается. */
  --success: #1B6B44;
  --success-soft: rgba(52, 162, 108, 0.14);
  --warn: #9A5410;
  --warn-soft: rgba(232, 134, 44, 0.14);
  --danger: #B3352F;
  --danger-soft: rgba(217, 83, 79, 0.12);

  /* ── 1.5 Тени ── */
  --sh-card: 0 1px 3px rgba(16, 24, 40, 0.06);
  --sh-sheet: 0 -8px 32px rgba(0, 0, 0, 0.16);
  --sh-fab: 0 6px 20px rgba(37, 99, 235, 0.35);

  /* ── 1.6 Зоны нажатия ── */
  --tap-min: 36px;                /* минимум для любого интерактивного элемента */
  --row-min: 56px;                /* строка списка */
  --tap-gap: var(--sp-2);         /* между соседними тап-зонами */

  /* ── 2.1 Движение ── */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Светлая тема (по умолчанию и при выборе «Светлая») ── */
:root,
:root[data-theme="light"] {
  --stage: radial-gradient(120% 100% at 50% 0%, #F7F8FA 0%, #E7EAEE 100%);
  --bg: #F2F3F5;
  --card: #FFFFFF;
  --card2: #F7F8FA;               /* вложенная поверхность внутри карточки */
  --text: #17181A;                /* ≥ 7:1 к карточке */
  --text-2: #5B6470;              /* ≥ 4.6:1 к карточке */
  --text-3: #7A8494;              /* декоративное: плейсхолдеры, иконки */
  --line: #E3E6EA;                /* разделители и рамки */
  --line-strong: #CFD5DC;         /* дорожки переключателей, прогресс-треки */
  --track: #E3E6EA;
  --seg: #E7EAEE;                 /* фон сегмент-контролов */
  --invert: #17181A;              /* тёмные карточки: сводка, тост */
  --on-invert: #FFFFFF;
  --accent-on-invert: #7FB0FF;    /* акцент на тёмной подложке тоста и сводки */
  --on-accent: #FFFFFF;
  --hairline: #E3E6EA;
  --label: 91, 100, 112;          /* rgb вторичного текста (legacy rgba(var(--label),α)) */
  --skeleton: #E7EAEE;
  --skeleton-shine: #F2F3F5;
  --scrim: rgba(16, 24, 40, 0.45);   /* лист должен отделяться от фона, а не просвечивать */
}

/* ── Тёмная тема: включается системно (Авто) … ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --stage: radial-gradient(120% 100% at 50% 0%, #16191E 0%, #0B0D10 100%);
    --bg: #0F1114;
    --card: #1A1D22;
    --card2: #21252B;
    --text: #F2F4F7;
    --text-2: #98A2B0;
    --text-3: #78828F;
    --line: #2A2F37;
    --line-strong: #3A404A;
    --track: #2A2F37;
    --seg: #21252B;
    --invert: #21252B;
    --on-invert: #F2F4F7;
    --accent-on-invert: #7FB0FF;
    --hairline: #2A2F37;
    --label: 152, 162, 176;
    --skeleton: #21252B;
    --skeleton-shine: #2A2F37;
    --scrim: rgba(0, 0, 0, 0.6);
    --accent-text: #7FB0FF;
    --sh-card: none;              /* в тёмной глубину даёт фон, а не тень */
    --sh-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5);
    /* семантика чуть светлее: на тёмном фоне те же оттенки читаются глуше */
    --success: #4CBE86;
    --warn: #F59B4B;
    --danger: #F0736F;
    --success-soft: rgba(76, 190, 134, 0.18);
    --warn-soft: rgba(245, 155, 75, 0.18);
    --danger-soft: rgba(240, 115, 111, 0.18);
  }
}

/* ── … или принудительно кнопкой «Тёмная» ── */
:root[data-theme="dark"] {
  --stage: radial-gradient(120% 100% at 50% 0%, #16191E 0%, #0B0D10 100%);
  --bg: #0F1114;
  --card: #1A1D22;
  --card2: #21252B;
  --text: #F2F4F7;
  --text-2: #98A2B0;
  --text-3: #78828F;
  --line: #2A2F37;
  --line-strong: #3A404A;
  --track: #2A2F37;
  --seg: #21252B;
  --invert: #21252B;
  --on-invert: #F2F4F7;
  --accent-on-invert: #7FB0FF;
  --hairline: #2A2F37;
  --label: 152, 162, 176;
  --skeleton: #21252B;
  --skeleton-shine: #2A2F37;
  --scrim: rgba(0, 0, 0, 0.6);
  --accent-text: #7FB0FF;
  --sh-card: none;
  --sh-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5);
  --success: #4CBE86;
  --warn: #F59B4B;
  --danger: #F0736F;
  --success-soft: rgba(76, 190, 134, 0.18);
  --warn-soft: rgba(245, 155, 75, 0.18);
  --danger-soft: rgba(240, 115, 111, 0.18);
}