/* ============================================================
   Dhani.Win — Design Token System
   Palette: Deep Purple + Gold (Luxury)
   ============================================================ */

:root {

  /* ── Brand: Purple ─────────────────────────────────────── */
  --purple-50:  #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-800: #5b21b6;
  --purple-900: #3b1a6e;
  --purple-950: #1e0a3c;

  /* ── Brand: Gold ────────────────────────────────────────── */
  --gold-100: #fef9e7;
  --gold-200: #fdf0c2;
  --gold-300: #fce28a;
  --gold-400: #f9cc4a;
  --gold-500: #f5b014;
  --gold-600: #d4900a;
  --gold-700: #a86c06;
  --gold-800: #7d5004;
  --gold-900: #523403;

  /* ── Semantic: Primary (Purple) ─────────────────────────── */
  --primary:        var(--purple-600);
  --primary-light:  var(--purple-500);
  --primary-lighter:var(--purple-400);
  --primary-dark:   var(--purple-700);
  --primary-darker: var(--purple-800);
  --primary-deepest:var(--purple-950);

  /* ── Semantic: Accent (Gold) ────────────────────────────── */
  --accent:         var(--gold-500);
  --accent-light:   var(--gold-400);
  --accent-lighter: var(--gold-300);
  --accent-dark:    var(--gold-600);
  --accent-darker:  var(--gold-700);

  /* ── Status Colors ──────────────────────────────────────── */
  --success:        #10b981;
  --success-light:  #34d399;
  --success-dark:   #059669;
  --success-bg:     rgba(16, 185, 129, 0.1);
  --success-border: rgba(16, 185, 129, 0.35);
  --success-text:   #ecfdf5;

  --error:          #ef4444;
  --error-light:    #f87171;
  --error-dark:     #dc2626;
  --error-bg:       rgba(239, 68, 68, 0.1);
  --error-border:   rgba(239, 68, 68, 0.35);
  --error-text:     #fef2f2;
  --error-gradient-end: #dc2626;

  --warning:        #f59e0b;
  --info:           #3b82f6;

  /* ── Channel Colors ─────────────────────────────────────── */
  --telegram:       #0088cc;
  --telegram-light: #33a3d9;
  --telegram-dark:  #006699;

  --whatsapp:       #25d366;
  --whatsapp-light: #4ddb81;
  --whatsapp-dark:  #1aaa4f;

  /* ── Background System ──────────────────────────────────── */
  --bg-page-start:  #0f0520;   /* near-black purple */
  --bg-page-mid:    #1a0a35;
  --bg-page-end:    #12062b;

  --bg-gradient: linear-gradient(
    135deg,
    var(--bg-page-start) 0%,
    var(--bg-page-mid)   50%,
    var(--bg-page-end)   100%
  );

  /* ── Surface / Card ─────────────────────────────────────── */
  --card:           rgba(255, 255, 255, 0.05);
  --card-hover:     rgba(255, 255, 255, 0.08);
  --surface:        rgba(255, 255, 255, 0.06);
  --surface-raised: rgba(255, 255, 255, 0.09);
  --overlay:        rgba(0, 0, 0, 0.75);

  /* ── Text ───────────────────────────────────────────────── */
  --text-primary:   #f5f0ff;
  --text-secondary: #c4b5fd;
  --text-tertiary:  #9d7fe0;
  --text-muted:     #6b4fa0;
  --text-inverse:   #1e0a3c;
  --text-gold:      var(--gold-400);

  /* Aliases used in CSS */
  --text:           var(--text-primary);
  --text-dim:       var(--text-secondary);
  --text-body:      var(--text-primary);

  /* ── Alpha Scale (Purple) ───────────────────────────────── */
  --alpha-5:  rgba(124, 58, 237, 0.05);
  --alpha-10: rgba(124, 58, 237, 0.10);
  --alpha-15: rgba(124, 58, 237, 0.15);
  --alpha-20: rgba(124, 58, 237, 0.20);
  --alpha-30: rgba(124, 58, 237, 0.30);
  --alpha-40: rgba(124, 58, 237, 0.40);
  --alpha-50: rgba(124, 58, 237, 0.50);
  --alpha-70: rgba(124, 58, 237, 0.70);

  /* ── Alpha Scale (Gold) ─────────────────────────────────── */
  --gold-alpha-10: rgba(245, 176, 20, 0.10);
  --gold-alpha-20: rgba(245, 176, 20, 0.20);
  --gold-alpha-30: rgba(245, 176, 20, 0.30);
  --gold-alpha-50: rgba(245, 176, 20, 0.50);

  /* ── Borders ────────────────────────────────────────────── */
  --border:         rgba(124, 58, 237, 0.30);
  --border-light:   rgba(124, 58, 237, 0.18);
  --border-medium:  rgba(124, 58, 237, 0.40);
  --border-dark:    rgba(124, 58, 237, 0.60);
  --border-gold:    rgba(245, 176, 20, 0.40);
  --border-gold-bright: rgba(245, 176, 20, 0.70);

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-color:   rgba(0, 0, 0, 0.40);
  --shadow-purple:  rgba(124, 58, 237, 0.30);
  --shadow-gold:    rgba(245, 176, 20, 0.25);

  --shadow-sm:  0 0.125rem 0.375rem var(--shadow-color);
  --shadow:     0 0.25rem 0.75rem var(--shadow-color);
  --shadow-md:  0 0.375rem 1rem var(--shadow-color);
  --shadow-lg:  0 0.5rem 1.5rem var(--shadow-color);
  --shadow-xl:  0 1rem 2.5rem var(--shadow-color);

  --shadow-glow-purple: 0 0 1rem rgba(124, 58, 237, 0.45);
  --shadow-glow-gold:   0 0 1rem rgba(245, 176, 20, 0.40);

  /* ── Modal ──────────────────────────────────────────────── */
  --modal-bg: linear-gradient(
    160deg,
    rgba(30, 10, 60, 0.98)  0%,
    rgba(20, 6, 45, 0.99)   100%
  );

  /* ── Gradients ──────────────────────────────────────────── */
  --gradient-primary:   linear-gradient(135deg, var(--purple-600), var(--purple-800));
  --gradient-accent:    linear-gradient(135deg, var(--gold-400), var(--gold-600));
  --gradient-gold-shine:linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-300), var(--gold-500), var(--gold-700));
  --gradient-card:      linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  --gradient-success:   linear-gradient(135deg, #059669, #10b981);
  --gradient-error:     linear-gradient(135deg, #dc2626, #ef4444);
}

/* ── High Contrast Override ─────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --text-primary:   #ffffff;
    --text-secondary: #e0d0ff;
    --border-light:   rgba(124, 58, 237, 0.60);
    --card:           rgba(255, 255, 255, 0.10);
  }
}