:root {
  /* =========================================================
     1. Semantic Application Tokens (Telegram-Aware with Fallbacks)
     ========================================================= */
  --app-bg: var(--tg-theme-bg-color, #0f1115);
  --app-secondary-bg: var(--tg-theme-secondary-bg-color, #171a21);
  --surface: var(--tg-theme-section-bg-color, #1b1f28);
  --surface-card: #1b1f28;
  --surface-modal: #1e232d;
  
  --text-primary: var(--tg-theme-text-color, #f9fafb);
  --text-secondary: var(--tg-theme-hint-color, #9ca3af);
  --text-muted: #6b7280;
  
  --accent: var(--tg-theme-button-color, #ff4458);
  --accent-color: var(--accent);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --accent-rgb: 255, 68, 88;
  --accent-subtle: rgba(var(--accent-rgb), 0.1);
  --accent-gradient: var(--accent);

  --border: var(--tg-theme-section-separator-color, rgba(255, 255, 255, 0.1));
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-focus: rgba(255, 255, 255, 0.25);
  
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-border: rgba(255, 255, 255, 0.1);

  --danger: var(--tg-theme-destructive-text-color, #ef4444);

  /* Semantic Swipe Actions */
  --like-color: #10b981;
  --dislike-color: #ef4444;
  --super-color: #3b82f6;

  /* Legacy telegram alias mapping */
  --tg-bg: var(--app-bg);
  --tg-secondary-bg: var(--app-secondary-bg);
  --tg-text: var(--text-primary);
  --tg-hint: var(--text-secondary);
  --tg-button: var(--accent);
  --tg-button-text: var(--accent-text);

  /* Typography & Apple Emoji Font Stack (https://github.com/samuelngs/apple-emoji-ttf) */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Roboto, Helvetica, Arial, sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  /* Calibrated Radii */
  --radius-card: 20px;
  --radius-button: 9999px;
  --radius-pill: 12px;

  /* Spring Physics & Screen Transitions (Apple Design) */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-screen: 240ms;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* =========================================================
     2. Liquid Glass Tokens — Dark Mode Default
     ========================================================= */
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.01) 100%);
  --glass-card-bg: rgba(22, 26, 35, 0.78);
  --glass-surface: rgba(255, 255, 255, 0.04);
  --glass-surface-hover: rgba(255, 255, 255, 0.08);
  --glass-border-top: rgba(255, 255, 255, 0.16);
  --glass-border-side: rgba(255, 255, 255, 0.08);
  --glass-border-bottom: rgba(255, 255, 255, 0.04);
  --glass-blur: blur(24px) saturate(180%);
  --glass-inner-glow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.28);
  --shadow-float: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   3. Liquid Glass & Surface Overrides — Light Mode
   ========================================================= */
[data-theme="light"] {
  --app-bg: var(--tg-theme-bg-color, #f4f5f8);
  --app-secondary-bg: var(--tg-theme-secondary-bg-color, #ffffff);
  --surface: var(--tg-theme-section-bg-color, #ffffff);
  --surface-card: #ffffff;
  --surface-modal: #ffffff;

  --text-primary: var(--tg-theme-text-color, #111827);
  --text-secondary: var(--tg-theme-hint-color, #6b7280);
  --text-muted: #9ca3af;

  --accent: var(--tg-theme-button-color, #007aff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);

  --border: var(--tg-theme-section-separator-color, rgba(0, 0, 0, 0.08));
  --border-subtle: rgba(0, 0, 0, 0.05);
  --border-focus: rgba(0, 0, 0, 0.2);

  --input-bg: rgba(0, 0, 0, 0.04);
  --input-border: rgba(0, 0, 0, 0.12);

  /* Light Liquid Glass Refraction */
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 100%);
  --glass-card-bg: rgba(255, 255, 255, 0.78);
  --glass-surface: rgba(0, 0, 0, 0.03);
  --glass-surface-hover: rgba(0, 0, 0, 0.06);
  --glass-border-top: rgba(255, 255, 255, 0.95);
  --glass-border-side: rgba(0, 0, 0, 0.08);
  --glass-border-bottom: rgba(0, 0, 0, 0.05);
  --glass-blur: blur(24px) saturate(180%);
  --glass-inner-glow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 2px 10px rgba(0, 0, 0, 0.05);
}