/* theme-variables.css — Tango Color System */
:root {
  /* ── Core Brand Colors ─────────────────────── */
  --primary:        #6B2EE5;          /* Tango Purple  */
  --primary-dark:   #E9407A;          /* Fuchsia Pink  */
  --primary-rgb:    107, 46, 229;

  --secondary:      #E9407A;          /* Fuchsia Pink  */
  --secondary-rgb:  233, 64, 122;

  --success:        #43E97B;
  --danger:         #FF2A2A;          /* Live Red      */
  --warning:        #FFA502;
  --info:           #00D2FF;
  --gold:           #FFD700;
  --accent:         #43E97B;

  /* ── Brand Gradient ───────────────────────── */
  --gradient-brand: linear-gradient(135deg, #6B2EE5 0%, #E9407A 100%);
  --gradient-brand-hover: linear-gradient(135deg, #7D3FFF 0%, #FF5090 100%);

  /* ── Sizing & Borders ─────────────────────── */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   32px;
  --r-full: 999px;

  --tr-fast:   0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --tr-base:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-med:    0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
  DARK MODE — Tango Dark (Default)
  Jet Black + Purple/Pink Accents
*/
:root, [data-theme="dark"] {
  --bg-main:        #0A0A0A;                       /* Jet Black         */
  --bg-1:           #0A0A0A;
  --bg-2:           #1F1F1F;                       /* Dark Gray         */
  --bg-3:           #2A2A2A;
  --bg-card:        rgba(31, 31, 31, 0.90);
  --bg-card-hover:  rgba(40, 40, 40, 0.95);
  --bg-glass:       rgba(255, 255, 255, 0.05);
  --bg-overlay:     rgba(0, 0, 0, 0.75);

  --text-1:  #FFFFFF;                              /* Pure White        */
  --text-2:  rgba(255, 255, 255, 0.85);
  --text-3:  #888888;                              /* Light Gray        */
  --text-4:  rgba(136, 136, 136, 0.6);

  --glass:        rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-dark:   rgba(0, 0, 0, 0.45);

  --shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-primary: 0 4px 20px rgba(107, 46, 229, 0.4);
  --glow-primary:   0 8px 30px rgba(107, 46, 229, 0.55);

  --bg-input:  rgba(0, 0, 0, 0.25);
  --r-xl:      32px;
  --accent-blue: #00D2FF;
}

/*
  LIGHT MODE — Crisp Light (unchanged structure, updated brand)
*/
[data-theme="light"] {
  --bg-main:        #f4f6fa;
  --bg-1:           #f4f6fa;
  --bg-2:           #ffffff;
  --bg-3:           #eef0f6;
  --bg-card:        rgba(255, 255, 255, 0.85);
  --bg-card-hover:  rgba(255, 255, 255, 0.95);
  --bg-glass:       rgba(255, 255, 255, 0.60);
  --bg-overlay:     rgba(255, 255, 255, 0.70);

  --text-1:  #1a1a2e;
  --text-2:  rgba(26, 26, 46, 0.85);
  --text-3:  rgba(26, 26, 46, 0.60);
  --text-4:  rgba(26, 26, 46, 0.40);

  --glass:        rgba(255, 255, 255, 0.70);
  --glass-strong: rgba(255, 255, 255, 0.90);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-dark:   rgba(0, 0, 0, 0.10);

  --shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 20px rgba(107, 46, 229, 0.25);
  --glow-primary:   0 8px 30px rgba(107, 46, 229, 0.30);

  --bg-input: rgba(255, 255, 255, 0.90);
  --r-xl:     32px;
  --accent-blue: #0093E9;
}

/* Auto — system preference */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg-main:      #f4f6fa;
    --bg-card:      rgba(255, 255, 255, 0.85);
    --bg-glass:     rgba(255, 255, 255, 0.60);
    --bg-overlay:   rgba(255, 255, 255, 0.70);
    --text-1:  #1a1a2e;
    --text-2:  rgba(26, 26, 46, 0.85);
    --text-3:  rgba(26, 26, 46, 0.60);
    --text-4:  rgba(26, 26, 46, 0.40);
    --glass:        rgba(255, 255, 255, 0.70);
    --glass-strong: rgba(255, 255, 255, 0.90);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-dark:   rgba(0, 0, 0, 0.10);
    --shadow-sm:    0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 20px rgba(107, 46, 229, 0.25);
    --bg-input: rgba(255, 255, 255, 0.90);
  }
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-main:      #0A0A0A;
    --bg-card:      rgba(31, 31, 31, 0.90);
    --bg-glass:     rgba(255, 255, 255, 0.05);
    --bg-overlay:   rgba(0, 0, 0, 0.75);
    --text-1:  #FFFFFF;
    --text-2:  rgba(255, 255, 255, 0.85);
    --text-3:  #888888;
    --text-4:  rgba(136, 136, 136, 0.60);
    --glass:        rgba(255, 255, 255, 0.05);
    --glass-strong: rgba(255, 255, 255, 0.10);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-dark:   rgba(0, 0, 0, 0.45);
    --shadow-sm:    0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.70);
    --shadow-primary: 0 4px 20px rgba(107, 46, 229, 0.40);
    --bg-input: rgba(0, 0, 0, 0.25);
  }
}