/* ============================================================
   JUICE — Color tokens
   Dark-mode only. Near-black canvas lit by electric yellow,
   hot pink and cyan. Yellow pairs ONLY with ink (#111).
   ============================================================ */
:root {
  /* ---- Brand accents ---- */
  --yellow:        #FFFF00;   /* primary brand — CTAs, links-hover, kickers, stat numbers, selection */
  --yellow-dim:    #E8E800;   /* pressed / dim yellow */
  --pink:          #FA2D92;   /* secondary accent */
  --pink-light:    #FB6DB5;   /* pink hover / lighter variant */
  --cyan:          #07AAF7;   /* tertiary accent — third data series, kicker variant */

  /* ---- Surfaces (dark steps) ---- */
  --ink:           #111111;   /* page background; ALSO ink color on yellow/pink surfaces */
  --black:         #0B0B0B;   /* deepest surface — nav bar, mobile menu */
  --panel:         #181818;   /* card / panel surface */
  --panel-2:       #1F1F1F;   /* nested / inner panel surface */

  /* ---- Lines ---- */
  --line:          #2B2B2B;   /* borders */
  --line-soft:     #1E1E1E;   /* subtle borders / dividers */

  /* ---- Text ---- */
  --text:          #FFFFFF;   /* primary text */
  --text-2:        #D7D7D7;   /* body / secondary text */
  --muted:         #9A9A9A;   /* labels, captions */
  --dim:           #8C8C8C;   /* lowest-emphasis text (AA on all panels) */

  /* ---- Ink-on-accent (text placed on yellow/pink/cyan) ---- */
  --on-yellow:     #111111;
  --on-yellow-2:   rgba(17,17,17,0.78);
  --on-yellow-3:   rgba(17,17,17,0.55);
  --on-pink:       #FFFFFF;
  --on-cyan:       #FFFFFF;

  /* ---- Status ---- */
  --success:       #00D88C;          /* live / online / success */
  --success-fill:  rgba(0,216,140,0.14);
  --danger:        #FF4D4D;
  --danger-fill:   rgba(255,77,77,0.14);

  /* ---- Ambient washes (faint radial glows on the dark canvas) ---- */
  --wash-yellow:   rgba(255,255,0,0.07);
  --wash-pink:     rgba(250,45,146,0.06);
  --wash-cyan:     rgba(7,170,247,0.06);

  /* ---- Selection ---- */
  --selection-bg:  #FFFF00;
  --selection-fg:  #111111;

  /* ---- Semantic aliases ---- */
  --bg-page:       var(--ink);
  --bg-nav:        rgba(11,11,11,0.92);
  --surface-card:  var(--panel);
  --surface-inset: var(--panel-2);
  --border-default:var(--line);
  --border-hover:  var(--yellow);
  --text-body:     var(--text-2);
  --text-heading:  var(--text);
  --text-label:    var(--muted);
  --accent:        var(--yellow);
  --accent-2:      var(--pink);
  --accent-3:      var(--cyan);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }