:root {
  /* Primary Colors */
  --primary-purple: #6b46c1;
  --primary-purple-dark: #553c9a;
  --primary-purple-light: #8868d2;
  --primary-purple-medium: #7e5cce;
  --primary-purple-bright: #6c5ce7;
  --primary-purple-deep: #5c39ae;
  --primary-purple-deeper: #4a3191;

  /* Background Colors */
  --bg-darkest: #121218;
  --bg-dark: #1a1a23;
  --bg-dark-alt: #1f1f2c;
  --bg-dark-purple: #2d1f54;
  --bg-dark-blue: #2b2473;
  --bg-medium: #1e1e2a;
  --bg-medium-alt: #252532;
  --bg-light: #2d2d3a;

  /* Gold/Premium Colors */
  --gold: #e2b007;
  --gold-bright: #ffb300;
  --gold-yellow: #ffd700;
  --gold-light: #f5c142;
  --gold-medium: #ebc700;
  --gold-dark: #d4a506;

  /* Gray Scale */
  --gray-dark: #444444;
  --gray-medium: #666666;
  --gray-light: #aaaaaa;
  --gray-purple: #8888a0;
  --gray-lightest: #e1e1e6;

  /* Accent Colors */
  --red: #ff4757;
  --red-alt: #ff5757;
  --pink: #f5517b;
  --pink-dark: #de3b6a;
  --facebook-blue: #3b5998;

  /* Transparent Colors */
  --black-10: rgba(0, 0, 0, 0.1);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-80: rgba(0, 0, 0, 0.8);
  --black-90: rgba(0, 0, 0, 0.9);

  --white-10: rgba(255, 255, 255, 0.1);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.9);

  /* Special Transparent Colors */
  --purple-30: rgba(120, 85, 202, 0.3);
  --gold-25: rgba(226, 176, 7, 0.25);
  --purple-10: rgba(107, 70, 193, 0.1);
  --red-70: rgba(255, 75, 75, 0.7);
  --purple-60: rgba(147, 51, 234, 0.6);
  --red-50: rgba(255, 107, 107, 0.5);
  --gray-30: rgba(120, 120, 120, 0.3);
  --gray-alt-30: rgba(110, 110, 110, 0.3);
  --dark-purple-90: rgba(30, 25, 55, 0.9);

  /* Gradients */
  --gradient-bg: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-alt) 100%);
  --gradient-purple: linear-gradient(135deg, var(--bg-dark-purple) 0%, var(--bg-dark-blue) 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
  --gradient-pink: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-yellow) 100%);
  --gradient-gray: linear-gradient(135deg, var(--gray-dark) 0%, var(--gray-medium) 100%);
  --gradient-chat: linear-gradient(135deg, var(--primary-purple-deep) 0%, var(--primary-purple-deeper) 100%);
  --gradient-overlay: linear-gradient(to top, var(--black-90), transparent);
}