/* SinParty — Color tokens
   Extracted from SinParty Elements.fig. Dark-first platform palette:
   near-black canvas, magenta primary, purple secondary, gold accent. */

:root {
  /* ---- Brand: magenta ---- */
  --sp-magenta-500: rgb(214, 82, 174);   /* primary CTA / active nav */
  --sp-magenta-600: rgb(190, 66, 152);   /* hover */
  --sp-magenta-700: rgb(160, 52, 128);   /* pressed */
  --sp-magenta-300: rgb(232, 140, 205);  /* light accents / usernames */
  --sp-flame-pink:  rgb(251, 81, 199);   /* logo flame highlight */
  --sp-flame-magenta: rgb(220, 38, 165); /* logo flame core */

  /* ---- Brand: purple (secondary / promo) ---- */
  --sp-purple-500: rgb(105, 82, 211);    /* SIGN UP button, promo banner */
  --sp-purple-600: rgb(88, 66, 188);
  --sp-purple-400: rgb(130, 110, 228);

  /* ---- Accent: gold (goals, premium, crowns) ---- */
  --sp-gold-400: rgb(231, 192, 113);
  --sp-gold-600: rgb(160, 125, 78);      /* bronze / gold-dark */

  /* ---- Semantic ---- */
  --sp-danger:  rgb(208, 47, 68);
  --sp-danger-2: rgb(234, 73, 69);       /* coral (strokes / alerts) */
  --sp-success: rgb(46, 158, 95);        /* tip / live-status green (approx.) */
  --sp-success-bg: rgb(22, 60, 42);      /* tip message banner fill (approx.) */

  /* ---- Neutrals (dark ladder) ---- */
  --sp-black:      rgb(4, 4, 4);         /* page canvas */
  --sp-gray-1000:  rgb(20, 20, 20);      /* deepest surface */
  --sp-gray-950:   rgb(21, 21, 21);
  --sp-gray-900:   rgb(29, 29, 29);
  --sp-gray-850:   rgb(30, 30, 30);      /* fig token Gray/900 */
  --sp-gray-800:   rgb(33, 33, 33);      /* card / row surface */
  --sp-gray-700:   rgb(43, 43, 43);      /* raised surface / fig Brand/800 = 44 */
  --sp-gray-680:   rgb(47, 47, 47);
  --sp-gray-600:   rgb(64, 64, 64);      /* input / chip fill */
  --sp-gray-500:   rgb(82, 82, 82);      /* neutral button (Login) */
  --sp-gray-450:   rgb(85, 84, 84);      /* borders */
  --sp-gray-400:   rgb(98, 98, 98);      /* borders / dividers */
  --sp-gray-350:   rgb(126, 126, 126);
  --sp-gray-300:   rgb(144, 144, 144);   /* muted text */
  --sp-gray-200:   rgb(170, 170, 170);   /* secondary text */
  --sp-gray-150:   rgb(217, 217, 217);   /* high-contrast secondary */
  --sp-gray-100:   rgb(236, 236, 236);
  --sp-gray-50:    rgb(240, 240, 240);
  --sp-white:      rgb(255, 255, 255);

  /* ---- Alpha overlays (glass / scrims) ---- */
  --sp-white-a20: rgba(255, 255, 255, 0.2);
  --sp-white-a14: rgba(255, 255, 255, 0.14);
  --sp-white-a10: rgba(255, 255, 255, 0.1);
  --sp-black-a60: rgba(0, 0, 0, 0.6);
  --sp-black-a40: rgba(0, 0, 0, 0.4);
  --sp-black-a06: rgba(0, 0, 0, 0.06);

  /* ---- Semantic aliases (use these in components) ---- */
  --surface-canvas:  var(--sp-black);
  --surface-1:       var(--sp-gray-1000);
  --surface-2:       var(--sp-gray-800);
  --surface-3:       var(--sp-gray-700);
  --surface-input:   var(--sp-gray-600);
  --surface-button-neutral: var(--sp-gray-500);

  --border-subtle:   var(--sp-gray-400);
  --border-muted:    var(--sp-gray-450);
  --border-strong:   var(--sp-gray-350);

  --text-primary:    var(--sp-white);
  --text-secondary:  var(--sp-gray-150);
  --text-muted:      var(--sp-gray-200);
  --text-faint:      var(--sp-gray-300);
  --text-on-brand:   var(--sp-white);

  --brand-primary:   var(--sp-magenta-500);
  --brand-primary-hover: var(--sp-magenta-600);
  --brand-secondary: var(--sp-purple-500);
  --brand-accent:    var(--sp-gold-400);

  --link:            var(--sp-magenta-300);
  --link-hover:      var(--sp-magenta-500);
}