/* =========================================================
   AxisVPN Master Design Tokens - Dual Theme System
   Light Mode & Dark Mode matching reference specifications
   ========================================================= */

:root,
[data-theme="light"] {
  /* Telegram Safe Area Inset System (Notch, Dynamic Island, Home Indicator) */
  --tg-safe-top: env(safe-area-inset-top, 0px);
  --tg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-left: env(safe-area-inset-left, 0px);
  --tg-safe-right: env(safe-area-inset-right, 0px);
  --tg-content-safe-top: 0px;
  --tg-content-safe-bottom: 0px;
  --tg-total-safe-top: env(safe-area-inset-top, 0px);

  /* Design Reference 1 - Light Palette */
  --primary-1: #5628EE;
  --primary-2: #8C6FF0;
  --primary-3: #23C4F8;
  --border: #CDD9ED;
  --border-hover: #99A3BA;
  --text-color: #6C7486;
  --text-color-headline: #3F4656;
  --text-color-sub: #8E99AF;

  /* Brand Compatibility */
  --brand-purple: #5628EE;
  --brand-purple-light: #8C6FF0;
  --brand-purple-lighter: #DDD6FE;
  --brand-purple-dark: #3F1BBF;
  --brand-gradient: linear-gradient(135deg, #5628EE 0%, #8C6FF0 100%);
  --brand-gradient-glow: linear-gradient(135deg, rgba(86, 40, 238, 0.15) 0%, rgba(140, 111, 240, 0.05) 100%);

  /* Surface Bases */
  --body-bg: #F8FAFC;
  --surface-base: #F8FAFC;
  --surface-white: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-frost: rgba(255, 255, 255, 0.85);
  --surface-frost-purple: rgba(86, 40, 238, 0.05);
  --bg-gradient-subtle: linear-gradient(135deg, #FFFFFF 0%, #F5F6FA 30%, #ECEFF6 65%, #FAFBFD 100%);
  --hero-bg: linear-gradient(145deg, #1E1035 0%, #351368 45%, #5B21B6 100%);
  --backdrop-blur: blur(20px);
  --backdrop-blur-sm: blur(10px);

  /* Typography Colors */
  --text-primary: #1A1A2E;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-white: #FFFFFF;

  /* Borders & Dividers */
  --border-subtle: rgba(205, 217, 237, 0.8);
  --border-frost: rgba(255, 255, 255, 0.6);
  --border-brand: rgba(86, 40, 238, 0.2);

  /* Tier & Semantic Accents */
  --eco-tier: #10B981;
  --eco-tier-bg: rgba(16, 185, 129, 0.1);
  --vip-tier: #F59E0B;
  --vip-tier-bg: rgba(245, 158, 11, 0.12);
  --danger: #F43F5E;
  --danger-bg: rgba(244, 63, 94, 0.1);
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.1);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  --shadow-glass: 0 10px 30px 0 rgba(86, 40, 238, 0.08);
  --shadow-nav: 0 10px 35px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 25px 60px -10px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =========================================================
   Dark Theme Overrides
   ========================================================= */
[data-theme="dark"] {
  /* Design Reference 2 - Dark Palette */
  --primary-1: #7026EE;
  --primary-2: #1E88E5;
  --primary-3: #B388FF;
  --border: #353535;
  --border-hover: #99A3BA;
  --text-color: #94A3B8;
  --text-color-headline: #E1E1E1;
  --text-color-sub: #B5B5B5;

  /* Brand Compatibility */
  --brand-purple: #7026EE;
  --brand-purple-light: #8B5CF6;
  --brand-purple-lighter: #C4B5FD;
  --brand-purple-dark: #4C1D95;
  --brand-gradient: linear-gradient(135deg, #7026EE 0%, #8B5CF6 100%);
  --brand-gradient-glow: linear-gradient(135deg, rgba(112, 38, 238, 0.25) 0%, rgba(139, 92, 246, 0.08) 100%);

  /* Surface Bases */
  --body-bg: #111115;
  --surface-base: #111115;
  --surface-white: #191920;
  --surface-card: #191920;
  --surface-frost: rgba(25, 25, 32, 0.85);
  --surface-frost-purple: rgba(112, 38, 238, 0.12);
  --bg-gradient-subtle: linear-gradient(135deg, #191920 0%, #15151B 30%, #111115 100%);
  --hero-bg: linear-gradient(145deg, #130B22 0%, #1E0B38 45%, #3C1575 100%);

  /* Typography Colors */
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-white: #FFFFFF;

  /* Borders & Dividers */
  --border-subtle: rgba(53, 53, 53, 0.85);
  --border-frost: rgba(255, 255, 255, 0.08);
  --border-brand: rgba(112, 38, 238, 0.35);

  /* Tier & Semantic Accents */
  --eco-tier: #10B981;
  --eco-tier-bg: rgba(16, 185, 129, 0.16);
  --vip-tier: #F59E0B;
  --vip-tier-bg: rgba(245, 158, 11, 0.18);
  --danger: #F43F5E;
  --danger-bg: rgba(244, 63, 94, 0.18);
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.18);

  /* Shadows */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 6px 24px -2px rgba(0, 0, 0, 0.45);
  --shadow-glass: 0 10px 30px 0 rgba(0, 0, 0, 0.45);
  --shadow-nav: 0 10px 35px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 25px 60px -10px rgba(0, 0, 0, 0.6);
}