/*
 * Color System - Neon 80s Theme
 * Source colors defined in LCH, mapped to semantic tokens
 */

:root {
  /* Source color tokens - Neon 80s palette */
  --lch-neon-pink: lch(60% 120 340);        /* #FF00DE */
  --lch-electric-cyan: lch(90% 70 200);     /* #00F0FF */
  --lch-purple-glow: lch(55% 100 290);      /* #8B2BFF */
  --lch-dark-indigo: lch(10% 30 270);       /* #0B0F29 */
  --lch-deep-blue: lch(18% 30 260);         /* #1A2340 */
  --lch-light-aqua: lch(85% 60 210);        /* #42E2FF */
  --lch-orange: lch(65% 90 45);             /* #E97524 */
  --lch-gold: lch(85% 80 85);               /* #FFD034 */
  --lch-white: lch(99% 0 0);                /* #FDFDF9 */
  --lch-black: lch(5% 0 0);                 /* #0A0A0A */

  /* Semantic color mappings */
  --color-bg: var(--lch-dark-indigo);
  --color-bg-soft: var(--lch-deep-blue);
  --color-ink: var(--lch-white);
  --color-subtle: var(--lch-light-aqua);
  --color-subtle-dark: var(--lch-purple-glow);

  /* Borders */
  --color-border: var(--lch-neon-pink);
  --color-border-darker: var(--lch-purple-glow);

  /* Accent colors */
  --color-accent: var(--lch-neon-pink);
  --color-accent-ink: var(--lch-white);
  --color-accent-ink-subtle: var(--lch-electric-cyan);

  /* Neon glow effects */
  --glow-pink: 0 0 10px var(--lch-neon-pink), 0 0 20px var(--lch-neon-pink);
  --glow-cyan: 0 0 10px var(--lch-electric-cyan), 0 0 20px var(--lch-electric-cyan);
  --glow-purple: 0 0 10px var(--lch-purple-glow), 0 0 20px var(--lch-purple-glow);

  /* Layered glow effects (multi-shadow) */
  --glow-text-neon:
    0 0 5px var(--lch-neon-pink),
    0 0 10px var(--lch-neon-pink),
    0 0 15px var(--lch-purple-glow),
    0 0 20px var(--lch-purple-glow),
    0 1px 2px rgba(255, 255, 255, 0.3);

  --glow-frame-pink-purple:
    inset 0 0 10px rgba(255, 0, 222, 0.3),
    0 0 8px var(--lch-neon-pink),
    0 0 15px var(--lch-purple-glow);

  --glow-panel-cyan:
    inset 0 1px 1px rgba(0, 240, 255, 0.2),
    0 0 4px var(--lch-electric-cyan),
    0 0 8px var(--lch-electric-cyan);

  /* Background gradients */
  --bg-vignette:
    radial-gradient(ellipse at 20% 30%, rgba(255, 0, 222, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 240, 255, 0.12) 0%, transparent 50%),
    var(--lch-dark-indigo);

  --bg-glassy-panel:
    linear-gradient(135deg,
      rgba(26, 35, 64, 0.95) 0%,
      rgba(18, 28, 52, 0.98) 50%,
      rgba(26, 35, 64, 0.95) 100%);

  --bg-artwork-gradient:
    linear-gradient(180deg,
      rgba(18, 28, 52, 0.6) 0%,
      rgba(11, 15, 41, 0.8) 100%);
}