/* ============================================
   RON DESIGN LANGUAGE — GLOBAL LAYER (BOLD)
   Заметная трансформация всех экранов: крупная дисплейная
   типографика, hero-блоки, больше радиуса/воздуха, акцентные
   градиенты. Цветные акценты (КБЖУ, статусы) сохранены.
   Подключается последним.
   ============================================ */

:root {
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Глобальный апгрейд через токены — чисто, без конфликтов специфичности.
     Влияет на ВСЕ карточки/кнопки сразу. */
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 34px;
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 22px 64px rgba(0, 0, 0, 0.55);

  --ron-accent: #7cff8f;
}

/* ============================================
   1. ТИПОГРАФИКА — крупные заголовки экранов
   ============================================ */
.page-header {
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
}
.page-header-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

/* Заголовки секций — крупнее и на дисплейном шрифте */
.section-title,
.mp-title,
.mp-hero-title,
.mp-section-title,
.mp-gen-title,
.mp-cta-title,
.mp-targets-title,
.mp-cooking-block-title,
.mp-stale-title,
.fl-empty-title,
.fl-search-title,
.ai-confirm-title,
.ai-result-name,
.an-day-sheet-title,
.an-day-meals-title,
.an-section-toggle-title,
.an-ach-title,
.an-quest-title,
.ob4-forecast-title,
.di-sheet-title,
.profile-name,
.profile-goal-title,
.pr-preview-title {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}
.section-title {
  font-size: 21px;
  font-weight: 700;
}

/* Кнопки и подписи навигации — дисплейный шрифт */
.btn-primary,
.btn-secondary,
.nav-item span,
.nav-scan-btn span {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ============================================
   2. КРУПНЫЕ ЧИСЛА (цвет сохраняется)
   ============================================ */
.an-stat-val,
.an-day-kcal-big,
.an-bar-val,
.an-day-macro-val,
.an-day-food-kcal,
.an-weight-change,
.fl-summary-kcal,
.fl-summary-macro-val,
.fl-food-kcal,
.fl-food-item-kcal,
.fl-food-pick-kcal,
.fl-alc-kcal,
.ob4-kcal-value,
.ob4-macro-value,
.ai-confidence-val,
.ai-macro-val,
.meal-card-macro-val,
.meal-card-match-val,
.mp-budget-val,
.profile-stat-val,
.profile-kbju-value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* ============================================
   3. ЭКРАН ПРОГРЕСС (analytics) — крупные статы, акцентный первый тайл
   ============================================ */
.an-stat-card {
  padding: var(--space-5) var(--space-4);
}
.an-stat-val {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}
.an-stat-icon {
  font-size: 26px;
}
.analytics-screen .section-title {
  font-size: 22px;
}
.an-day-kcal-big {
  font-weight: 700;
}

/* ============================================
   4. ЭКРАН ДНЕВНИК (food-log) — hero-сводка с огромным числом
   ============================================ */
.fl-summary {
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  background: linear-gradient(
    158deg,
    rgba(124, 255, 143, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 52%,
    rgba(255, 255, 255, 0.025) 100%
  );
  border: 1px solid rgba(124, 255, 143, 0.28);
}
.fl-summary::after {
  content: '';
  position: absolute;
  top: -60%;
  right: -25%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 255, 143, 0.22), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}
.fl-summary > * {
  position: relative;
  z-index: 1;
}
.fl-summary-kcal {
  font-size: 52px;
  font-weight: 700;
  line-height: 0.95;
}
.fl-summary-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
}

/* ============================================
   5. ЭКРАН ПРОФИЛЬ (profile) — крупный hero
   ============================================ */
.profile-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    158deg,
    rgba(124, 255, 143, 0.1) 0%,
    rgba(102, 168, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.profile-name {
  font-size: 26px;
  font-weight: 700;
}
.profile-stat-val {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.settings-row-icon {
  border-radius: 14px;
}

/* ============================================
   6. ЭКРАН КАМЕРА (ai-camera)
   ============================================ */
.ai-confidence-val {
  font-size: 30px;
  font-weight: 700;
}
.ai-macro-val {
  font-size: 18px;
  font-weight: 700;
}

/* ============================================
   7. НИЖНЯЯ НАВИГАЦИЯ — новый вариант
   ============================================ */
.bottom-nav.glass-navbar {
  background: linear-gradient(
    180deg,
    rgba(28, 30, 42, 0.85) 0%,
    rgba(15, 16, 23, 0.9) 100%
  );
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 0 var(--space-2);
}
.bottom-nav.glass-navbar::before {
  opacity: 0.35;
}
.bottom-nav.glass-navbar::after {
  opacity: 0.5;
}
.nav-item {
  border-radius: 16px;
  margin: 7px 2px;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.nav-item.active {
  color: var(--accent-green);
  background: rgba(124, 255, 143, 0.14);
}
.nav-item.active svg {
  filter: drop-shadow(0 0 7px rgba(124, 255, 143, 0.5));
}
.nav-scan-fab {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent-green), #36d96b);
  box-shadow:
    0 6px 18px rgba(124, 255, 143, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.nav-scan-fab svg {
  width: 19px;
  height: 19px;
}