/* ═══════════════════════════════════════════════════════════
   FoodTracker — Дизайн-токены (Design Tokens)
   ═══════════════════════════════════════════════════════════
   Этот файл содержит ВСЕ переменные дизайн-системы.
   Все стили компонентов и страниц обязаны использовать
   только эти переменные. Прямые значения цветов, размеров,
   теней и отступов в CSS запрещены.
   ═══════════════════════════════════════════════════════════ */

/* ─── Светлая тема (по умолчанию) ─── */
:root {
  /* Фоны */
  --bg:          #F5F5DC;
  --card:        #ffffff;
  --card2:       #f8f8f0;
  --card-glass:  rgba(255,255,255,0.75);

  /* Границы */
  --border:      rgba(127,159,106,0.15);

  /* Основной цвет (зелёный) */
  --pri:         #5a7a5a;
  --pri2:        #7f9f6a;
  --pri-rgb:     90,122,90;

  /* Акцент (оранжевый) — кнопки, активные элементы */
  --accent:      #f19863;
  --accent2:     #e08a55;
  --accent-rgb:  241,152,99;

  /* Семантические цвета */
  --ok:          #34d399;
  --ok2:         #6ee7b7;
  --ok-rgb:      52,211,153;
  --err:         #f87171;
  --err2:        #fca5a5;
  --err-rgb:     248,113,113;
  --warn:        #fbbf24;
  --warn-rgb:    251,191,36;
  --info:        #60a5fa;
  --info-rgb:    96,165,250;

  /* Вода */
  --water:       #6aa5c4;
  --water2:      #5a9fb5;
  --water-rgb:   106,165,196;

  /* Цикл */
  --pink:        #f472b6;

  /* Текст */
  --text:        #1a1a1a;
  --muted:       #717182;

  /* Инпуты */
  --input:       rgba(255,255,255,0.5);
  --input-solid: #f3f3f5;

  /* Радиусы скругления */
  --r:           24px;       /* Карточки, модалки, крупные элементы */
  --r-sm:        16px;       /* Кнопки, инпуты, средние элементы */
  --r-xs:        10px;       /* Мелкие элементы, чипы */
  --r-pill:      20px;       /* Пилюли, тэги */
  --r-full:      50%;        /* Круглые элементы */

  /* Полупрозрачные фоны компонентов */
  --header-bg:   rgba(245,245,220,0.85);
  --nav-bg:      rgba(255,255,255,0.85);

  /* Тени */
  --shadow:      0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.08);
  --shadow-xl:   0 20px 50px rgba(0,0,0,0.12);

  /* Оверлеи */
  --overlay:     rgba(0,0,0,0.03);
  --overlay2:    rgba(0,0,0,0.06);

  /* Типографика */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-xs:     9px;
  --font-sm:     11px;
  --font-base:   13px;
  --font-md:     14px;
  --font-lg:     15px;
  --font-xl:     16px;
  --font-2xl:    18px;
  --font-3xl:    20px;
  --font-4xl:    22px;

  /* Размеры иконок */
  --icon-sm:     14px;
  --icon-md:     16px;
  --icon-lg:     18px;
  --icon-xl:     20px;
  --icon-2xl:    22px;
  --icon-3xl:    24px;

  /* Отступы */
  --space-xs:    4px;
  --space-sm:    6px;
  --space-md:    8px;
  --space-lg:    10px;
  --space-xl:    12px;
  --space-2xl:   14px;
  --space-3xl:   16px;
  --space-4xl:   20px;
  --space-5xl:   24px;

  /* Blur */
  --blur:        12px;
  --blur-lg:     20px;

  /* Переходы */
  --transition:  0.2s;
  --transition-slow: 0.3s;
  --transition-fast: 0.15s;

  /* Макро-цвета (прогресс-бары) */
  --macro-cal:   #7f9f6a;
  --macro-prot:  #5a9fb5;
  --macro-fat:   #d4a574;
  --macro-carb:  #c98a5a;
  --macro-sugar: #b87a9f;
  --macro-fiber: #8a9fb5;
}

/* ─── Тёмная тема ─── */
html.dark {
  --bg:          #1a1f2e;
  --card:        #252b3d;
  --card2:       #2a3045;
  --card-glass:  rgba(37,43,61,0.75);

  --border:      rgba(90,122,90,0.2);

  --pri:         #a8c99a;
  --pri2:        #8fbc7f;
  --pri-rgb:     168,201,154;

  --accent:      #e8a57c;
  --accent2:     #d9965e;
  --accent-rgb:  232,165,124;

  --text:        #e5e5e5;
  --muted:       #999;

  --input:       rgba(58,63,77,0.5);
  --input-solid: #3a3f4d;

  --header-bg:   rgba(26,31,46,0.85);
  --nav-bg:      rgba(37,43,61,0.85);

  --shadow:      0 4px 16px rgba(0,0,0,0.2);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.25);
  --shadow-xl:   0 20px 50px rgba(0,0,0,0.3);

  --overlay:     rgba(255,255,255,0.03);
  --overlay2:    rgba(255,255,255,0.06);
}