/* FitMini — Theme CSS
   Telegram Mini App: colours from TG theme-params + FitMini design tokens */

:root {
  /* ── Telegram theme bridge ──────────────────────────────────────── */
  --tg-bg:           var(--tg-theme-bg-color, #ffffff);
  --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #f4f4f5);
  --tg-text:         var(--tg-theme-text-color, #111111);
  --tg-hint:         var(--tg-theme-hint-color, #8a8a8e);
  --tg-link:         var(--tg-theme-link-color, #007aff);
  --tg-button:       var(--tg-theme-button-color, #007aff);
  --tg-button-text:  var(--tg-theme-button-text-color, #ffffff);
  --tg-accent:       var(--tg-theme-accent-text-color, #007aff);
  --tg-section-bg:   var(--tg-theme-section-bg-color, #ffffff);
  --tg-section-sep:  var(--tg-theme-section-separator_color, #e5e5ea);
  --tg-destructive:  var(--tg-theme-destructive_text_color, #ff3b30);

  /* ── FitMini brand colors ──────────────────────────────────────── */
  --c-green:         #34c759;
  --c-green-light:   #d1f5dc;
  --c-green-dim:     rgba(52, 199, 89, 0.15);
  --c-orange:        #ff9500;
  --c-orange-light:  #fff3e0;
  --c-orange-dim:    rgba(255, 149, 0, 0.15);
  --c-red:           #ff3b30;
  --c-red-dim:       rgba(255, 59, 48, 0.15);
  --c-blue:          #007aff;
  --c-blue-dim:      rgba(0, 122, 255, 0.12);
  --c-purple:        #af52de;
  --c-purple-dim:    rgba(175, 82, 222, 0.15);
  --c-yellow:        #ffd60a;

  /* ── Macros colors ──────────────────────────────────────────────── */
  --c-protein:       #007aff;
  --c-fat:           #ff9500;
  --c-carbs:         #34c759;
  --c-kcal:          #ff3b30;
  --c-water:         #30b0c7;

  /* ── Semantic ───────────────────────────────────────────────────── */
  --c-bg:            var(--tg-bg);
  --c-bg-2:          var(--tg-secondary-bg);
  --c-bg-card:       var(--tg-section-bg);
  --c-text:          var(--tg-text);
  --c-text-2:        var(--tg-hint);
  --c-border:        var(--tg-section-sep);
  --c-accent:        var(--tg-button);

  /* ── Spacing ────────────────────────────────────────────────────── */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;

  /* ── Border radius ──────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-ui:   'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --fz-xs:     11px;
  --fz-sm:     13px;
  --fz-md:     15px;
  --fz-lg:     17px;
  --fz-xl:     20px;
  --fz-2xl:    24px;
  --fz-3xl:    28px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --t-fast:   0.12s ease;
  --t-normal: 0.22s ease;
  --t-slow:   0.35s ease;

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-card: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px var(--c-border);
  --shadow-float: 0 8px 32px rgba(0,0,0,0.16);

  /* ── Tab bar ────────────────────────────────────────────────────── */
  --tab-bar-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}