/* ===========================================================================
   ДИЗАЙН-СИСТЕМА «ОРАНЖЕРЕЯ» (Greenhouse)
   ===========================================================================

   НАПРАВЛЕНИЕ
   Солнечная оранжерея / огород на подоконнике: живая ботаническая зелень,
   свежий росток, вода, мёд и ягода. Сознательно НЕ используем два клише
   генеративного дизайна: (1) кремовый фон + терракота, (2) чёрный фон +
   один неоновый акцент. Здесь многоцветная растительная палитра, где
   каждый цвет закреплён за смыслом, а не «просто акцент».

   ФИРМЕННЫЙ ЭЛЕМЕНТ — «НАПОЛНЕНИЕ» (The Fill)
   Один примитив на весь интерфейс: уровень жидкости с волной у кромки,
   который поднимается внутри формы. Используется везде:
     • дашборд дня  — круглая тарелка наполняется съеденным, риска = норма
     • вода         — стакан наполняется выпитым
     • стрик        — ряд капсул-дней, залитых доверху
     • вес          — горизонтальная колба между стартом и целью
   Волна — запоминающаяся деталь; при prefers-reduced-motion она замирает,
   оставаясь ровным уровнем (смысл не теряется).

   ТЕМА
   Поверхности и текст берутся из Telegram theme_params (см. --tg-*),
   бренд-цвета работают как акцентный слой поверх и читаемы в обеих темах.
   Своя цветовая схема НЕ навязывается поверх системной темы пользователя.
   =========================================================================== */

:root {
  /* --- Палитра бренда (6 именованных цветов) ------------------------------ */
  --leaf: #1f6b4a; /* глубокая ботаническая зелень — основной бренд, текст акцентов */
  --sprout: #9be067; /* свежий росток — энергия, заполнение прогресса */
  --water: #2aa5cc; /* аква — всё, что про воду */
  --honey: #ffb443; /* тёплая амбра — стрик, достижения, «огонь» */
  --berry: #e1568b; /* ягодный — превышение нормы, вес (тепло, а не «ошибка») */
  --ink: #0f1f18; /* глубокий зелёно-чёрный вместо чистого чёрного */

  /* Светлые производные для заливок и подложек */
  --leaf-soft: #d8ede2;
  --sprout-soft: #ecf9dc;
  --water-soft: #d6eef6;
  --honey-soft: #fff0d6;
  --berry-soft: #fbdde9;

  /* --- Цвета Telegram: значения по умолчанию, перезаписываются из SDK ------ */
  --tg-bg: #ffffff;
  --tg-text: var(--ink);
  --tg-hint: #7d8b85;
  --tg-link: var(--leaf);
  --tg-button: var(--leaf);
  --tg-button-text: #ffffff;
  --tg-secondary-bg: #f4f7f2;

  /* --- Семантические поверхности ------------------------------------------ */
  --surface: var(--tg-bg);
  --surface-raised: var(--tg-secondary-bg);
  --text: var(--tg-text);
  --text-muted: var(--tg-hint);
  --border: color-mix(in srgb, var(--tg-text) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--tg-text) 22%, transparent);

  /* Акцент, читаемый на текущем фоне (в тёмной теме подменяется ниже) */
  --accent: var(--leaf);
  --accent-contrast: #ffffff;
  --accent-soft: var(--leaf-soft);

  /* --- Типографика --------------------------------------------------------
     Пара: Unbounded (акцентный, геометричный — заголовки и КРУПНЫЕ ЦИФРЫ)
           Onest    (читаемый гротеск для тела текста, отличная кириллица)
     Оба подключаются прогрессивно; фолбэки — системные шрифты.           */
  --font-display: "Unbounded", "Onest", "Segoe UI", system-ui, sans-serif;
  --font-body: "Onest", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  --text-3xl: 2.5rem;
  --text-2xl: 1.75rem;
  --text-xl: 1.25rem;
  --text-lg: 1.0625rem;
  --text-md: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-xs: 0.75rem;

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-display: -0.02em;

  /* --- Ритм и форма -------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(15, 31, 24, 0.05), 0 8px 24px rgba(15, 31, 24, 0.06);
  --shadow-lift: 0 2px 6px rgba(15, 31, 24, 0.08), 0 16px 40px rgba(15, 31, 24, 0.12);

  /* --- Движение ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 280ms;
  --dur-slow: 560ms;
  --wave-dur: 7s; /* период волны фирменного элемента */

  /* Высота «безопасной зоны» под кнопку Telegram */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Тёмная тема ----------------------------------------------------------
   Telegram сам присылает тёмные bg/text; нам нужно лишь поднять яркость
   акцентов, иначе глубокая зелень сольётся с фоном.                        */
:root[data-theme="dark"] {
  --leaf-soft: #14342a;
  --sprout-soft: #1d3a1c;
  --water-soft: #12333d;
  --honey-soft: #3a2a11;
  --berry-soft: #3a1626;

  --accent: var(--sprout);
  --accent-contrast: var(--ink);
  --accent-soft: var(--leaf-soft);

  --border: color-mix(in srgb, var(--tg-text) 16%, transparent);
  --border-strong: color-mix(in srgb, var(--tg-text) 28%, transparent);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* --- Доступность ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}