/**
 * Jupiter Brand -- CSS Design Tokens
 * Premium, powerful, dark. Rich purple. Dark-mode first.
 * Import once at the root of your app.
 */

:root {
  /* Primary -- Rich Purple */
  --color-purple-pale:    #FAF5FF;
  --color-purple-light:   #C084FC;
  --color-purple:         #9333EA;
  --color-purple-dark:    #7E22CE;
  --color-purple-black:   #3B0764;

  /* Neutrals -- warm dark */
  --color-ink:            #09050F;
  --color-midnight:       #0F0A1A;
  --color-slate:          #1A1228;
  --color-storm:          #2D2440;
  --color-muted:          #6B7280;
  --color-muted-light:    #9CA3AF;
  --color-border:         #E5E7EB;
  --color-cloud:          #F8F7FB;
  --color-white:          #FFFFFF;

  /* RGB channels (for rgba shadows/overlays) */
  --color-purple-rgb:     147, 51, 234;

  /* Semantic */
  --color-cyan:           #22D3EE;
  --color-gold:           #FBBF24;
  --color-pink:           #F472B6;
  --color-emerald:        #34D399;
  --color-crimson:        #BE123C;
  --color-pass:           #34D399;
  --color-warn:           #FBBF24;
  --color-fail:           #BE123C;

  /* Typography */
  --font-display:          'Space Grotesk', sans-serif;
  --font-sans:             'Inter', sans-serif;
  --font-mono:             'JetBrains Mono', monospace;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-bold:      700;

  /* Shadows -- deep, dramatic */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.20);
  --shadow:           0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.30);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.40);
  --shadow-purple:    0 4px 24px rgba(var(--color-purple-rgb),0.35);
  --shadow-purple-lg: 0 8px 40px rgba(var(--color-purple-rgb),0.50);

  /* Transitions */
  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Semantic Aliases -- dark mode (default) */
  --bg-primary:        var(--color-midnight);
  --bg-secondary:      var(--color-slate);
  --bg-surface:        var(--color-slate);
  --text-primary:      var(--color-white);
  --text-secondary:    var(--color-muted-light);
  --text-accent:       var(--color-purple-light);
  --border-default:    var(--color-storm);
  --interactive:       var(--color-purple-light);
  --interactive-hover: var(--color-purple);
}

/* Light Mode Override */
[data-theme="light"] {
  --bg-primary:        var(--color-white);
  --bg-secondary:      var(--color-cloud);
  --bg-surface:        var(--color-white);
  --text-primary:      var(--color-ink);
  --text-secondary:    var(--color-muted);
  --text-accent:       var(--color-purple);
  --border-default:    var(--color-border);
  --interactive:       var(--color-purple);
  --interactive-hover: var(--color-purple-dark);

  /* Remap Tailwind custom color vars so existing classes adapt to light mode.
     !important needed because :root has higher specificity than [data-theme]. */
  --color-midnight:    #FFFFFF !important;
  --color-slate:       #F8F7FB !important;
  --color-storm:       #E5E7EB !important;
  --color-muted-light: #6B7280 !important;
  --color-purple-light: #9333EA !important;
}

/* Light mode form input text color (Tailwind's text-white on inputs is hardcoded) */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select { color: #09050F !important; }

/* Body theming is in <style> in base.html (must load after Tailwind CDN to win specificity) */