/* ═══════════════════════════════════════════════
   Fifitly — Design Tokens v3
   Цветовая система: HSB (S=100 везде)
   Акцент: B=80 | Кнопка: задан hex | Фон: B=5
   Типографика: единая шкала (увеличена на 2px)
   ═══════════════════════════════════════════════ */

:root {

  /* ══════════════════════════════════════════════
     ФОН — HSB(H, 100, 5) + эллипсы HSB(H, 100, 80) @ 10%
     Геометрия эллипсов из Figma — blur 75px
     E1: 372×293px, left:99, top:-176, matrix(-0.95,-0.31,0.21,-0.98,0,0)
     E2: 516×319px, left:-140, top:635, matrix(0.98,0.22,-0.11,0.99,0,0)
     ══════════════════════════════════════════════ */

  /* Все экраны — нейтральный фон + нейтральные эллипсы */
  --bg-home:       #0D0D0D;  --e-home:      rgba(204, 204, 204, 0.10);
  --bg-training:   #0D0D0D;  --e-training:  rgba(204, 204, 204, 0.10);
  --bg-nutrition:  #0D0D0D;  --e-nutrition: rgba(204, 204, 204, 0.10);
  --bg-sleep:      #0D0D0D;  --e-sleep:     rgba(204, 204, 204, 0.10);
  --bg-water:      #0D0D0D;  --e-water:     rgba(204, 204, 204, 0.10);

  --bg-blur: 75px;   /* blur эллипсов */

  /* ══════════════════════════════════════════════
     АКЦЕНТ — HSB(H, 100, 80)  [иконки, прогресс, кольца]
     ══════════════════════════════════════════════ */
  --training:   #00CC88;   /* H=160 */
  --nutrition:  #CC5500;   /* H=25  */
  --sleep:      #4400CC;   /* H=260 */
  --water:      #008BCC;   /* H=199 */
  --brand:      #0A00CC;   /* H=243 */

  /* ══════════════════════════════════════════════
     КНОПКА — darker variant (тёмная тема)
     ══════════════════════════════════════════════ */
  --training-btn:  #047857;
  --nutrition-btn: #C2410C;
  --sleep-btn:     #7D44EE;
  --water-btn:     #0369A1;
  --brand-btn:     #4F46E5;

  /* ══════════════════════════════════════════════
     КАРТОЧКИ — из Figma "iPhone 13 & 14 - 9"
     ══════════════════════════════════════════════ */
  --card-bg:     rgba(102, 102, 102, 0.10);  /* HSB(0,0,40) @ 10% */
  --card:        #111318;                    /* fallback непрозрачный */
  --card-r:      20px;
  --card-pt:     24px;   /* padding top */
  --card-py: var(--card-pt, 24px);
  --card-pb:     24px;   /* padding bottom */
  --card-px:     16px;   /* padding left/right */
  --card-gap:    16px;   /* gap между карточками */
  --screen-px:   16px;   /* отступ от краёв экрана */
  --screen-actions-gap: 8px; /* gap между кнопками нижнего блока */

  /* ── Шапка карточки ──
     Структура: [ иконка ] [ gap ] [ заголовок + метка ] [ кнопка ]
     Контейнер иконки: 40×40px, border-radius 12px
     Artwork внутри: max-height 32px, width auto (центр по flex)
     Figma-размеры artwork: тренировка 53×32, питание 38×32,
                             сон 31×32, вода 24×33              */
  --icon-size:        40px;   /* контейнер — квадрат */
  --icon-r:           12px;   /* радиус контейнера */
  --icon-h:           32px;   /* высота artwork внутри */

  --header-gap:       12px;   /* иконка → текстовый блок */
  --title-meta-gap:    8px;   /* заголовок → метка (строка под ним) */

  /* Фиксированный отступ текста от левого края карточки
     (= card-px + icon + gap, без пересчёта в каждом компоненте) */
  --header-indent:     66px;  /* широкие карточки (full-width) */
  --header-indent-mini:55px;  /* мини-карточки 2×2 */

  /* Прогресс-бар — длина адаптивная (width: 100%), остальное фиксировано */
  --prog-h:      5px;    /* высота полоски */
  --prog-r:      99px;   /* радиус — пилюля */
  --prog-gap:    8px;    /* отступ от лейбла «Прогресс» до полоски */

  /* Кольцо калорий
     Дуга: не полная — разрыв снизу (~270°, как датчик)
     Цвет дуги: акцент секции (--nutrition, --training и т.д.)
     Трек: --track (#404040)
     Внутри: процент — --fs-22-semibold + --fs-14-medium               */
  --ring-stroke:  6px;    /* толщина дуги — фиксировано */
  --ring-sweep:   270deg; /* угол дуги — от стартовой точки */
  --ring-size:    85px;   /* = 3×23px (строка БЖУ) + 2×8px (gap) — слева от баров */

  /* Кнопка запуска тренировки */
  --play-size:   50px;

  /* Тело карточки */
  --label-num-gap:  8px;   /* вертикальный gap: лейбл «Калории» → число «1245» */
  --inline-gap:     4px;   /* горизонтальный gap внутри строки (число · единица, 1245 · ккал) */
  --macro-gap:      8px;   /* gap между строками БЖУ (Б → Ж → У) */

  /* Список упражнений */
  --ex-row-py:      12px;  /* padding top/bottom каждой строки упражнения */
  --ex-name-gap:     4px;  /* gap внутри строки: имя → чипы → «4 подхода» */

  /* ── Таб-бар ──
     Иконки: SVG 20×20, stroke 2px round — финальные от дизайнера
     Активный таб: иконка #EFEFEF + лейбл 9px/400 + radial-gradient фон
     Неактивный:   иконка #8A8891, лейбл скрыт                        */
  --tab-h:          50px;   /* высота бара */
  --tab-w:         358px;   /* ширина бара */
  --tab-r:          99px;   /* радиус бара (пилюля) = --r-pill */
  --tab-item-w:     56px;   /* ширина ячейки таба */
  --tab-item-r:     12px;   /* радиус подложки активного */
  --tab-icon:       20px;   /* размер иконки */
  --tab-label-fs:    9px;   /* размер лейбла активного таба */
  --tab-active-bg: radial-gradient(50% 50% at 50% 50%, rgba(88,80,217,0.50) 0%, rgba(47,42,115,0) 100%);
  --tab-icon-active: #EFEFEF;
  --tab-icon-muted:  #8A8891;

  /* ── Мини-карточки 2×2 ── */
  --mini-w:        171px;  /* (390 − 16 − 16 − 16) / 2 */

  /* Пикер (скроллер) — Сон: качество + часы
     Затухание: CSS mask linear-gradient (прозрачный → видимый → прозрачный)
     Активный элемент: цвет акцента секции
     Неактивные: --text5 (rgba 255,255,255,0.20)                          */
  --picker-w:       57px;  /* ширина контейнера пикера (из Figma) */
  --picker-h:       85px;  /* высота контейнера (3 элемента видно) */
  --picker-item-h:  28px;  /* высота одного элемента (85 / 3 ≈ 28) */

  /* ══════════════════════════════════════════════
     ТЕКСТ
     ══════════════════════════════════════════════ */
  --text:    #f2f2f2;                    /* основной белый */
  --text2:   #b3b3b3;                    /* вторичный серый */
  --text3:   #9b9b9b;                    /* третичный — метки, подписи */
  --text4:   rgba(255, 255, 255, 0.50);  /* полупрозрачный — доп. инфо */
  --text5:   rgba(255, 255, 255, 0.20);  /* очень тихий — неактивное в пикере */
  --fs-12-light: 12px; --fw-12-light: 300;  /* мета-текст, подписи */

  /* ══════════════════════════════════════════════
     ПРОГРЕСС-БАРЫ
     ══════════════════════════════════════════════ */
  --track:   #404040;   /* трек (фон бара) */
  --fill:    #f4f4f4;   /* заполнение бара */

  /* ══════════════════════════════════════════════
     ГРАФИКИ — единая система (линии, столбцы, карточки)
     Используйте buildSparkline() + классы .chart*
     Акцент: --chart-accent (по умолчанию --accent)
     ══════════════════════════════════════════════ */
  --chart-accent:       var(--accent);
  --chart-line:         var(--chart-accent);
  --chart-area-opacity: 0.18;
  --chart-stroke:       2px;
  --chart-dot-r:        3.5px;
  --chart-dot-ring-r:   5.5px;
  --chart-pad:          4px;
  --chart-h-sm:         40px;   /* мини в карточке (питание) */
  --chart-h-md:         56px;   /* стандарт */
  --chart-h-lg:         80px;   /* крупный (прогресс, вес) */
  --chart-bar-r:        6px;    /* радиус столбца */
  --chart-bar-gap:      6px;    /* gap между столбцами */
  --chart-target-bg:    rgba(0, 204, 136, 0.06);
  --chart-target-line:  rgba(0, 204, 136, 0.2);
  --chart-grid:         rgba(255, 255, 255, 0.06);

  /* ══════════════════════════════════════════════
     СОВЕТЫ (единая система)
     Структура: [ dot 6px ] [ gap 8px ] [ заголовок --text / тело --text3 ]
     dot цвет = акцент секции (--training, --sleep и т.д.)
     ══════════════════════════════════════════════ */
  --tip-dot:        6px;   /* диаметр цветного dot */
  --tip-gap:        8px;   /* gap между советами */
  --tip-indent:     8px;   /* dot → текстовый блок */
  --tip-title-gap:  4px;   /* заголовок → тело совета */

  /* ══════════════════════════════════════════════
     ЧИПЫ (единая система — мышцы, теги)
     ══════════════════════════════════════════════ */
  --chip-bg:  rgba(255, 255, 255, 0.08);
  --chip-py:  3px;
  --chip-px:  8px;

  /* ══════════════════════════════════════════════
     НЕДЕЛЬНЫЙ БАР
     ══════════════════════════════════════════════ */
  --day-w:    48px;
  --day-h:    54px;
  --day-gap:   3px;
  --day-dot:   8px;
  --day-sel-bg:    rgba(255, 255, 255, 0.08);
  --day-today-bg:  rgba(79,  70,  229, 0.15);

  /* ══════════════════════════════════════════════
     РАДИУСЫ
     ══════════════════════════════════════════════ */
  --r-card:  20px;
  --r-chip:  10px;
  --r-day:   10px;
  --r-pill:  99px;

  /* ══════════════════════════════════════════════
     ТИПОГРАФИКА — Единая система (7 размеров, 4 веса)
     ══════════════════════════════════════════════ */
  --font: 'Manrope', sans-serif;

  /* 24px — крупные цифры + названия карточек */
  --fs-24-bold:     24px; --fw-24-bold:     700;

  /* 24px — заголовки блоков */
  --fs-24-semibold: 24px; --fw-24-semibold: 600;

  /* 22px — хедер: имя, дата */
  --fs-22-regular:  22px; --fw-22-regular:  400;

  /* 22px — недельный бар: числа */
  --fs-22-light:    22px; --fw-22-light:    300;

  /* 14px — основной текст */
  --fs-14-regular:  14px; --fw-14-regular:  400;
  --fs-14-medium:   14px; --fw-14-medium:   500;

  /* 12px — дополнительный текст, подписи */
  --fs-12-regular:  12px; --fw-12-regular:  400;

  /* 10px — чипсы, бейджи, таб-бар */
  --fs-10-regular:  10px; --fw-10-regular:  400;

  /* Line-height */
  --lh-33: 33px;
  --lh-30: 30px;
  --lh-20: 20px;
  --lh-17: 17px;
  --lh-14: 14px;

  /* ══════════════════════════════════════════════
     ЦВЕТА — Экран Тренировки v3
     ══════════════════════════════════════════════ */
  --c-header:      #E6E6E6;  /* HLS(0,0,90,1) */
  --c-header-meta: #B3B3B3;  /* HLS(0,0,70,1) */
  --c-day-num:     #E6E6E6;  /* HLS(0,0,90,1) */
  --c-trend-up:    #10B981;

  /* ══════════════════════════════════════════════
     СОСТОЯНИЕ — Экран Тренировки v3
     ══════════════════════════════════════════════ */
  --state-great:    #00CC88;
  --state-ok:       #E6B800;
  --state-warn:     #E63946;
  --state-great-bg: rgba(0, 204, 136, 0.10);
  --state-ok-bg:    rgba(230, 184, 0, 0.10);
  --state-warn-bg:  rgba(230, 57, 70, 0.10);
  --state-ring-size: 56px;
  --state-ring-stroke: 4px;
  --state-metrics-gap: 12px;

  /* ══════════════════════════════════════════════
     СОВЕТЫ — сворачиваемый блок
     ══════════════════════════════════════════════ */
  --tips-header-py:   14px;
  --tips-body-py:     14px;
  --tips-chevron-size: 14px;
  --tips-transition:  0.4s;

  /* ══════════════════════════════════════════════
     УПРАЖНЕНИЯ — с весами и трендами
     ══════════════════════════════════════════════ */
  --ex-check-size:   28px;

  /* ══════════════════════════════════════════════
     ПОКАЗАТЕЛИ — горизонтальный скролл
     ══════════════════════════════════════════════ */
  --metrics-card-w:    140px;
  --metrics-card-min-h: 160px;
  --metrics-card-gap:  10px;
  --metrics-card-r:    18px;

  /* ══════════════════════════════════════════════
     ОТСТУПЫ — общие
     ══════════════════════════════════════════════ */
  --section-gap:       28px;
  --section-header-mb: 14px;

  /* ══════════════════════════════════════════════
     МОДАЛКИ — единая система
     Меняй токены здесь → обновятся все модалки
     ══════════════════════════════════════════════ */
  --modal-z:              1000;
  --modal-overlay-bg:     rgba(0, 0, 0, 0.3);
  --modal-overlay-blur:   8px;

  /* Bottom sheet — выезжает снизу (календарь, замеры, задачи) */
  --modal-sheet-bg:       rgba(12, 12, 20, 0.75);
  --modal-sheet-blur:     30px;
  --modal-sheet-border:   rgba(255, 255, 255, 0.12);
  --modal-sheet-radius:   18px 18px 0 0;

  /* Fullscreen / page — прозрачный контейнер, фон даёт overlay */
  --modal-fullscreen-bg:  transparent;
  --modal-page-bg:        transparent;

  /* Center — авторизация, алерты */
  --modal-center-bg:      var(--card, #1a1d27);
  --modal-center-border:  rgba(255, 255, 255, 0.09);
  --modal-center-radius:  20px;

  /* Блоки внутри модалок — строки списка, карточки, итоги */
  --modal-block-bg:         rgba(255, 255, 255, 0.04);
  --modal-block-bg-hover:   rgba(0, 204, 136, 0.08);
  --modal-block-bg-active:  rgba(0, 204, 136, 0.12);
  --modal-block-r:          14px;
  --modal-panel-bg:         rgba(255, 255, 255, 0.04);
  --modal-panel-r:          14px;
  --modal-divider:          rgba(255, 255, 255, 0.06);

  /* Поля ввода в модалках */
  --modal-input-bg:         var(--card-bg);
  --modal-input-border:     rgba(255, 255, 255, 0.09);
  --modal-input-r:          9px;
  --modal-input-focus:      var(--training, #00CC88);

  /* Текст */
  --modal-hint-color:       var(--text3);

  /* Отступы */
  --modal-header-px:        20px;
  --modal-body-px:          16px;
  --modal-footer-px:        16px;

  /* Табы внутри модалок */
  --modal-tab-bg:           rgba(255, 255, 255, 0.06);
  --modal-tab-color:        rgba(255, 255, 255, 0.4);
  --modal-tab-active-bg:    rgba(0, 204, 136, 0.2);
  --modal-tab-active-color: var(--training, #00CC88);

  /* Инфо-карточка */
  --modal-info-bg:          rgba(46, 117, 182, 0.08);
  --modal-info-title:       #85B7EB;
}