:root {
  /* Brand Colors */
  --color-primary: #5181B8;
  --color-primary_hover: #4072A5;
  --color-primary_active: #3A6493;
  --color-primary_light: #7BA1D0;

  /* Secondary / Accent */
  --color-secondary: #FF4D4D;
  --color-secondary_hover: #E64545;
  --color-secondary_active: #CC3D3D;
  --color-accent: #FFB800;
  --color-accent_hover: #E6A700;
  --color-accent_light: #FFD466;

  /* Truth & Dare */
  --color-truth: #3B82F6;
  --color-truth_start: #60A5FA;
  --color-truth_end: #2563EB;
  --color-truth_glow: rgba(59, 130, 246, 0.5);
  --color-dare: #EF4444;
  --color-dare_start: #F87171;
  --color-dare_end: #DC2626;
  --color-dare_glow: rgba(239, 68, 68, 0.5);

  /* Wheel */
  --color-wheel_border: #2D3748;
  --color-wheel_arrow: #FFB800;

  /* Semantic */
  --color-success: #22C55E;
  --color-success_light: #86EFAC;
  --color-success_bg: rgba(34, 197, 94, 0.1);
  --color-error: #EF4444;
  --color-error_light: #FCA5A5;
  --color-error_bg: rgba(239, 68, 68, 0.1);
  --color-warning: #F59E0B;
  --color-warning_light: #FCD34D;
  --color-warning_bg: rgba(245, 158, 11, 0.1);
  --color-info: #3B82F6;
  --color-info_bg: rgba(59, 130, 246, 0.1);

  /* Difficulty */
  --color-difficulty-easy: #4CAF50;
  --color-difficulty-medium: #FFC107;
  --color-difficulty-bold: #F44336;

  /* Leaderboard */
  --color-gold: #FFD700;
  --color-gold_light: #FFF3B0;
  --color-silver: #C0C0C0;
  --color-bronze: #CD7F32;

  /* Background & Surface */
  --color-background: #FFFFFF;
  --color-background_sec: #F5F5F7;
  --color-background_tertiary: #EBEBEB;
  --color-card_background: #FFFFFF;
  --color-card_elevated: #FFFFFF;
  --color-scrim: rgba(0, 0, 0, 0.7);
  --color-scrim_light: rgba(0, 0, 0, 0.4);
  --color-modal_bg: rgba(0, 0, 0, 0.75);

  /* Text */
  --color-text_primary: #1A1A1A;
  --color-text_secondary: #818C99;
  --color-text_tertiary: #ACB1B9;
  --color-text_contrast: #FFFFFF;
  --color-text_link: #5181B8;

  /* Borders & Dividers */
  --color-border: #E9EBEC;
  --color-border_light: #F0F0F0;
  --color-divider: rgba(0, 0, 0, 0.08);
  --color-segmenteers_divider: #E9EBEC;
  --color-card_outline: #E9EBEC;
  --color-card_shadow: rgba(0, 0, 0, 0.08);

  /* Spinner */
  --color-spinner: #818C99;
  --color-spinner_primary: #5181B8;

  /* Typography */
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

  --text-size-2xs: 10px;
  --text-size-xs: 12px;
  --text-size-s: 13px;
  --text-size-m: 14px;
  --text-size-base: 15px;
  --text-size-l: 16px;
  --text-size-xl: 17px;
  --text-size-2xl: 18px;
  --text-size-3xl: 20px;
  --text-size-4xl: 24px;
  --text-size-5xl: 28px;
  --text-size-6xl: 32px;
  --text-size-7xl: 40px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.35;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.7;

  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: 0px;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 1px;
  --letter-spacing-uc: 1.5px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-base: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  --card-padding: 16px;
  --card-padding-lg: 24px;
  --button-height-sm: 36px;
  --button-height-base: 44px;
  --button-height-lg: 56px;
  --input-height: 44px;
  --avatar-size-sm: 32px;
  --avatar-size-base: 40px;
  --avatar-size-lg: 48px;
  --avatar-size-xl: 56px;
  --avatar-size-2xl: 80px;

  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
  --screen-padding-h: 16px;
  --screen-padding-v: 16px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-wheel: 0 4px 24px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-truth-glow: 0 0 0 0 rgba(59, 130, 246, 0.5);
  --shadow-dare-glow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  --shadow-gold-glow: 0 0 16px rgba(255, 215, 0, 0.4);

  /* Timing */
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-smooth: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --duration-spin-min: 3500ms;
  --duration-spin-max: 5500ms;
  --duration-splash: 1500ms;

  /* Easing */
  --easing-linear: linear;
  --easing-ease: ease;
  --easing-ease-in: ease-in;
  --easing-ease-out: ease-out;
  --easing-ease-in-out: ease-in-out;
  --easing-wheel: cubic-bezier(0.17, 0.67, 0.12, 0.99);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Z-index */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  --z-max: 999;

  /* Touch */
  --touch-target-min: 44px;
  --touch-target-rec: 48px;

  /* Wheel */
  --wheel-size: min(360px, calc(100vw - 32px));
  --wheel-center: 64px;
}

/* ========================
   DARK THEME VARIABLES
   ======================== */
html[data-theme="dark"] {
  --color-background: #1a1a2e;
  --color-background_sec: #242442;
  --color-background_tertiary: #2e2e52;
  --color-card_background: #1e1e38;
  --color-card_elevated: #252545;
  --color-scrim: rgba(0, 0, 0, 0.75);
  --color-scrim_light: rgba(0, 0, 0, 0.5);
  --color-modal_bg: rgba(0, 0, 0, 0.8);

  --color-text_primary: #eeeeee;
  --color-text_secondary: #a0a0b8;
  --color-text_tertiary: #6e6e8a;
  --color-text_contrast: #1a1a2e;

  --color-border: #3a3a5c;
  --color-border_light: #2e2e52;
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-segmenteers_divider: #2e2e52;
  --color-card_outline: #3a3a5c;
  --color-card_shadow: rgba(0, 0, 0, 0.3);

  --color-spinner: #6e6e8a;
  --color-spinner_primary: #7BA1D0;

  --color-primary: #4A7AB8;
  --color-primary_hover: #5A8AC8;
  --color-primary_active: #3A6AA8;
  --color-primary_light: #7BA1D0;

  --color-truth: #4A90E2;
  --color-truth_start: #5AA0F2;
  --color-truth_end: #3A80D2;
  --color-truth_glow: rgba(74, 144, 226, 0.5);
  --color-dare: #D04545;
  --color-dare_start: #E05555;
  --color-dare_end: #C03535;
  --color-dare_glow: rgba(208, 69, 69, 0.5);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-wheel: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-gold-glow: 0 0 16px rgba(255, 215, 0, 0.3);
  --shadow-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] body {
  background: #1a1a2e;
}

html[data-theme="dark"] .game-card {
  background: #1e1e38;
  border-color: #3a3a5c;
}

html[data-theme="dark"] .lobby-screen,
html[data-theme="dark"] .splash-screen,
html[data-theme="dark"] .settings-screen,
html[data-theme="dark"] .setup-screen,
html[data-theme="dark"] .wheel-screen,
html[data-theme="dark"] .rating-screen,
html[data-theme="dark"] .history-screen {
  background: #1a1a2e;
}

html[data-theme="dark"] .vkui-btn--primary {
  background: #4A7AB8;
}

html[data-theme="dark"] .join-modal,
html[data-theme="dark"] .create-modal,
html[data-theme="dark"] .avatar-picker {
  background: #1e1e38;
}

html[data-theme="dark"] .join-modal__input {
  background: #242442;
  border-color: #3a3a5c;
  color: #eeeeee;
}

html[data-theme="dark"] .join-modal__input:focus {
  border-color: #4A7AB8;
}

html[data-theme="dark"] .player-row__input {
  background: #242442;
  border-color: #3a3a5c;
  color: #eeeeee;
}

html[data-theme="dark"] .timer-option {
  background: #242442;
  border-color: #3a3a5c;
  color: #a0a0b8;
}

html[data-theme="dark"] .lobby-footer-btn {
  background: #242442;
  border-color: #3a3a5c;
  color: #eeeeee;
}

html[data-theme="dark"] .lobby-invite-btn {
  background: #242442;
  border-color: #3a3a5c;
  color: #7BA1D0;
}

html[data-theme="dark"] .skeleton {
  background: #242442;
}

html[data-theme="dark"] .rating-row__avatar,
html[data-theme="dark"] .player-row__avatar,
html[data-theme="dark"] .player-badge__avatar {
  background: #242442;
  color: #7BA1D0;
}

html[data-theme="dark"] .player-badge {
  background: #242442;
}

html[data-theme="dark"] .gameover-player {
  background: rgba(30, 30, 56, 0.95);
}

html[data-theme="dark"] .gameover-player--top1 {
  background: linear-gradient(135deg, #2a2a1a 0%, #3a3520 100%);
  border-color: #8B7500;
}

html[data-theme="dark"] .gameover-player--top2 {
  background: linear-gradient(135deg, #252525 0%, #303030 100%);
  border-color: #909090;
}

html[data-theme="dark"] .gameover-player--top3 {
  background: linear-gradient(135deg, #2a2015 0%, #352818 100%);
  border-color: #8B5A2B;
}