:root {
  /* Telegram Mini App safe area fallbacks (overridden by Telegram client) */
  --tg-safe-area-inset-top: 0px;
  --tg-safe-area-inset-bottom: 0px;
  --tg-safe-area-inset-left: 0px;
  --tg-safe-area-inset-right: 0px;
  --tg-content-safe-area-inset-top: 0px;
  --tg-content-safe-area-inset-bottom: 0px;
  --tg-content-safe-area-inset-left: 0px;
  --tg-content-safe-area-inset-right: 0px;

  /* Computed layout helpers */
  --safe-top: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom));
  --header-height: calc(56px + var(--safe-top));
  --nav-height: calc(64px + var(--safe-bottom));
  --bg-primary: #0A0A0A;
  --bg-surface: #111111;
  --bg-surface-variant: #1A1A1A;
  --bg-elevated: #1F1F1F;
  --bg-overlay: #252525;
  --color-orange-primary: #FF6B1A;
  --color-orange-bright: #FF8C42;
  --color-orange-muted: #CC5500;
  --color-orange-glow: rgba(255, 107, 26, 0.15);
  --text-primary: #F5F5F5;
  --text-secondary: #A0A0A0;
  --text-muted: #606060;
  --text-on-accent: #FFFFFF;
  --border-subtle: rgba(255,255,255,0.06);
  --border-visible: rgba(255,255,255,0.12);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-orange: 0 4px 20px rgba(255,107,26,0.25);
  --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 250ms cubic-bezier(0.2, 0, 0, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-slow: 500ms cubic-bezier(0.2, 0, 0, 1);
}