/* ============================================
   PFL App — CSS Variables
   Кольори, шрифти, розміри, тіні
   ============================================ */

:root {
  /* ---- Viewport (Telegram WebApp) ---- */
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;
  --app-top-pad: 20px;
  --app-max-width: 1280px;

  /* ---- Fonts ---- */
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-table: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- Font Sizes (configurable from Google Sheets) ---- */
  --card-title-font-size: 16px;
  --table-font-size: 16px;

  /* ---- Light Theme (default) ---- */
  --bg: #f0f2f8;
  --bg-rgb: 240, 242, 248;
  --text: #0F130E;
  --muted: rgba(71, 85, 105, 0.78);
  --card: #fff;
  --card-border: rgba(255, 255, 255, 0.90);
  --border: #E6EAF4;
  --brand: #127AC9;
  --brand-bg: rgba(229, 233, 243, 0.80);
  --shadow: 0 8px 24px rgba(0, 60, 140, 0.08);

  /* ---- Spacing ---- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;

  /* ---- Border Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 100px;

  /* ---- Transitions ---- */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ---- Tab Bar Fade ---- */
  --tabs-height: 64px;
  --tabs-offset: 20px;
  --tabs-fade-extra: 56px;
  --tabs-fade-height: calc(var(--tabs-height) + var(--tabs-offset) + env(safe-area-inset-bottom, 0px) + var(--tabs-fade-extra));
}

/* ============================================
   Dark Theme
   ============================================ */

:root[data-theme="dark"] {
  --bg: #1A2026;
  --bg-rgb: 26, 32, 38;
  --text: #F8FAFC;
  --muted: rgba(148, 163, 184, 0.85);
  --card: #202932;
  --card-border: transparent;
  --border: rgba(255, 255, 255, 0.08);
  --brand: #127AC9;
  --brand-bg: rgba(78, 163, 255, 0.18);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}