/* «Трекер тела» — дизайн-токены.
   Светлая тема: почти белый фон с едва заметными пастельными пятнами
   (у каждого раздела своя гамма), поверх — белое «жидкое стекло», пилюли,
   салатовый акцент. Шрифт системный (SF Pro на iPhone), цифры табличные. */

:root {
  /* ── Шрифты ── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;

  /* ── Акцент (салатовый, снят пипеткой с референса) ── */
  --accent: #C3E55A;
  --accent-press: #B2D646;
  --accent-ink: #1A2600;          /* текст на салатовом */
  --accent-text: #5B7A0F;         /* салатовый, читаемый на белом */
  --accent-soft: rgba(195, 229, 90, .28);

  /* ── Основа ── */
  --bg: #F7F9F2;
  --ink: #14180F;
  --ink-2: rgba(20, 24, 15, .62);
  --ink-3: rgba(20, 24, 15, .40);
  --line: rgba(20, 24, 15, .08);
  --danger: #E5484D;

  /* ── Стекло ── */
  --glass: rgba(255, 255, 255, .80);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-border: rgba(255, 255, 255, .9);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .95);
  /* Без backdrop-filter: на iOS слой со стеклом заставляет растеризовать текст
     рядом в низком разрешении — шапка «мылится». Фон и так мягкий. */
  --glass-blur: none;
  --shadow: 0 1px 2px rgba(30, 40, 10, .04), 0 8px 28px rgba(30, 40, 10, .07);
  --shadow-lift: 0 2px 6px rgba(30, 40, 10, .06), 0 16px 40px rgba(30, 40, 10, .12);

  /* ── Радиусы и отступы ── */
  --r-card: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --r-pill: 999px;
  --gap: 10px;
  --pad: 16px;

  /* ── Макро-цвета (БЖУ) ── */
  --protein: #4C9BE8;
  --fat: #F2A93B;
  --carbs: #8DB92E;

  /* ── Пятна раздела (по умолчанию — Еда) ── */
  --blob-1: #D9F08A;   /* салатовый */
  --blob-2: #FFD8B5;   /* персик */
  --blob-3: #C8F0DC;   /* мята */
  --blob-4: #FFF0B0;   /* сливочный */
}

/* Еда — тёплая гамма вокруг салатового */
[data-section="food"] {
  --blob-1: #D9F08A;
  --blob-2: #FFD8B5;
  --blob-3: #C8F0DC;
  --blob-4: #FFF0B0;
}

/* Тренировки — холодная гамма вокруг салатового */
[data-section="workouts"] {
  --bg: #F4F7FA;
  --blob-1: #D9F08A;
  --blob-2: #C9E3FF;
  --blob-3: #DCD6FF;
  --blob-4: #C8F0EC;
}

/* Фон-пятна: один раз на body */
.blobs {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: var(--bg);
}
.blobs::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(34% 28% at 18% 22%, var(--blob-1), transparent 72%),
    radial-gradient(36% 30% at 88% 30%, var(--blob-2), transparent 72%),
    radial-gradient(36% 28% at 22% 72%, var(--blob-3), transparent 72%),
    radial-gradient(34% 30% at 84% 80%, var(--blob-4), transparent 72%);
  /* без filter: blur — мягкость дают сами градиенты (blur-слой на iOS
     тоже снижал чёткость текста поверх) */
  opacity: .75;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), var(--shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--r-card);
}

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}