/**
 * Дизайн-токены — единый источник правды по цвету, типографике, ритму.
 *
 * Направление: премиальный минимал в духе Apple — нейтральная палитра,
 * один синий акцент, много воздуха, тонкие hairline-линии, мягкие
 * многослойные тени, материалы с размытием. Светлая тема основная,
 * тёмная включается по системной настройке (prefers-color-scheme).
 *
 * Имена переменных сохранены с прошлой версии — экраны не ломаются,
 * меняются только значения. Новые токены (материалы, крупные радиусы,
 * трекинг, доп. интервалы) добавлены рядом.
 */
:root {
  color-scheme: light dark;

  /* ── Цвет (светлая тема) ── */
  --c-primary:        #1D1D1F;   /* почти-чёрный: основные кнопки, сильный текст */
  --c-primary-hover:  #000000;
  --c-on-primary:     #FFFFFF;
  --c-secondary:      #6E6E73;
  --c-accent:         #0071E3;   /* Apple-синий: ССЫЛКИ, текст, рамки, фокус */
  --c-accent-hover:   #0077ED;
  /* Отдельный токен для ЗАЛИВОК (кнопки, активные чипы, значки).
     Зачем разделять: на тёмной теме эти две роли требуют
     противоположного. Тексту акцента нужен СВЕТЛЫЙ синий, иначе он не
     читается на карточке #1C1C1E. Белому тексту на заливке нужен ТЁМНЫЙ
     синий, иначе контраст 3.02:1 при норме 4.5:1. Одним значением
     обе роли закрыть невозможно — проверено расчётом. */
  --c-accent-fill:       #0071E3;
  --c-accent-fill-hover: #0077ED;
  --c-on-accent:      #FFFFFF;
  --c-bg:             #FBFBFD;   /* тёплый почти-белый фон страницы */
  --c-fg:             #1D1D1F;
  --c-card:           #FFFFFF;
  --c-muted:          #F5F5F7;   /* светло-серая поверхность (Apple gray) */
  --c-muted-fg:       #6E6E73;
  --c-border:         rgba(0, 0, 0, .09);   /* hairline */
  --c-border-strong:  rgba(0, 0, 0, .16);
  --c-ok:             #0E7C86;   /* глубокий teal вместо зелёного: успех/«под защитой»/галочки */
  --c-ok-bg:          #E3F4F6;
  --c-warn:           #9A6200;
  --c-warn-bg:        #FFF6E6;
  --c-err:            #D70015;
  --c-err-bg:         #FDECEC;
  --c-focus:          #0071E3;

  /* Материалы: полупрозрачный фон + размытие для «стеклянной» шапки/поповеров */
  --material-bg:      rgba(251, 251, 253, .72);
  --material-border:  rgba(0, 0, 0, .08);
  --material-blur:    saturate(180%) blur(20px);

  /* ── Типографика ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", "Segoe UI", Roboto, system-ui, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   21px;
  --fs-xl:   28px;
  --fs-2xl:  40px;   /* герой, крупные заголовки */

  --lh-tight: 1.15;  /* заголовки */
  --lh-base:  1.5;   /* текст */

  --ls-tight:   -0.02em;   /* заголовки */
  --ls-tighter: -0.032em;  /* герой */

  /* ── Ритм (интервалы) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ── Радиусы (крупнее и мягче — ключевой признак премиума) ── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  --row-h: 44px;
  --hdr-h: 60px;

  /* ── Тени: мягкие, многослойные, низкая непрозрачность ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .05);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .10), 0 24px 56px rgba(0, 0, 0, .08);
  --shadow-focus: 0 0 0 4px rgba(0, 113, 227, .22);

  /* ── Движение: спокойное, ease Apple ── */
  --t:      200ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}

/* ── Тёмная тема: по системной настройке. Переопределяем только цвет. ── */
@media (prefers-color-scheme: dark) {
  :root {
    --c-primary:        #F5F5F7;   /* светлые кнопки на тёмном */
    --c-primary-hover:  #FFFFFF;
    --c-on-primary:     #1D1D1F;
    --c-secondary:      #98989D;
    --c-accent:         #2997FF;   /* светлый: текст и ссылки на тёмном фоне */
    --c-accent-hover:   #47A6FF;
    /* Заливка остаётся тёмной и в тёмной теме: белый текст на #2997FF
       давал 3.02:1, на #0071E3 даёт 4.67:1 (норма AA 4.5). Сама заливка
       на чёрном фоне — 4.49:1, для поверхности элемента норма 3:1. */
    --c-accent-fill:       #0071E3;
    --c-accent-fill-hover: #0077ED;
    --c-on-accent:      #FFFFFF;
    --c-bg:             #000000;
    --c-fg:             #F5F5F7;
    --c-card:           #1C1C1E;
    --c-muted:          #2C2C2E;
    --c-muted-fg:       #98989D;
    --c-border:         rgba(255, 255, 255, .12);
    --c-border-strong:  rgba(255, 255, 255, .22);
    --c-ok:             #5FD3DD;   /* teal для тёмной темы */
    --c-ok-bg:          rgba(95, 211, 221, .16);
    --c-warn:           #FFB340;
    --c-warn-bg:        rgba(255, 179, 64, .16);
    --c-err:            #FF453A;
    --c-err-bg:         rgba(255, 69, 58, .16);
    --c-focus:          #2997FF;

    --material-bg:      rgba(20, 20, 22, .72);
    --material-border:  rgba(255, 255, 255, .10);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .40);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .50), 0 24px 56px rgba(0, 0, 0, .45);
    --shadow-focus: 0 0 0 4px rgba(41, 151, 255, .30);
  }
}