/* ============================================================
   combo.codes — Color tokens
   ------------------------------------------------------------
   CORE (logo colors) ........ Void, Ink, Pulse purple, Acid lime
   EXTENDED (cyberpunk) ...... Neon cyan, Cyber yellow, Hot magenta
                               Site / graphics / UI / code only — NEVER in the logo.
   Dark is the brand's home. A light-on-light token set is provided for
   the rare light-surface placement, using the brandbook's light values.
   ============================================================ */

:root {
  /* ---- Core palette ------------------------------------------------ */
  --void:          #0D0B14;   /* background, dark media            */
  --ink:           #F2F1F7;   /* logo / primary text              */
  --pulse-purple:  #A855F7;   /* echo, left bracket               */
  --acid-lime:     #C8FF2E;   /* dot, bracket, cursor, "active"   */

  /* ---- Extended cyberpunk accents --------------------------------- */
  --neon-cyan:     #2FE6FF;   /* links, infographics              */
  --cyber-yellow:  #FCEE0A;   /* warnings, highlights             */
  --hot-magenta:   #FF2E88;   /* accents, errors, CTA             */

  /* ---- Light-surface variants (from brand guide p.03) ------------- */
  --purple-on-light:  #6D28D9;
  --ink-on-light:     #4C1D95;
  --lime-on-light:    #A3CC00;
  --echo-on-light:    #C9A8F7;
  --cyan-on-light:    #0891B2;
  --yellow-on-light:  #B45309;
  --magenta-on-light: #DB2777;

  /* ---- Dark surface elevation ------------------------------------- *
   * Tinted toward Void's violet-black; each step ~one notch lighter.   */
  --surface-0:  #0D0B14;      /* = Void, page base                */
  --surface-1:  #14111F;      /* cards, panels                    */
  --surface-2:  #1C1830;      /* raised / hover                   */
  --surface-3:  #261F3D;      /* popovers, inset code wells       */
  --surface-inset: #0A0810;   /* recessed wells, terminals        */

  /* ---- Borders / hairlines (Ink at low alpha) --------------------- */
  --border-subtle:  rgba(242, 241, 247, 0.07);
  --border-default: rgba(242, 241, 247, 0.13);
  --border-strong:  rgba(242, 241, 247, 0.24);
  --border-lime:    rgba(200, 255, 46, 0.45);
  --border-purple:  rgba(168, 85, 247, 0.50);

  /* ---- Text ramp -------------------------------------------------- */
  --text-primary:   #F2F1F7;
  --text-secondary: rgba(242, 241, 247, 0.66);
  --text-muted:     rgba(242, 241, 247, 0.44);
  --text-faint:     rgba(242, 241, 247, 0.28);
  --text-on-accent: #0D0B14;  /* dark text on lime / cyan / yellow */

  /* ---- Semantic aliases ------------------------------------------- */
  --bg-page:        var(--void);
  --bg-card:        var(--surface-1);
  --bg-raised:      var(--surface-2);
  --bg-well:        var(--surface-inset);

  --accent:         var(--acid-lime);     /* primary interactive / "go" */
  --accent-2:       var(--pulse-purple);  /* secondary / echo           */
  --link:           var(--neon-cyan);
  --success:        var(--acid-lime);
  --warning:        var(--cyber-yellow);
  --danger:         var(--hot-magenta);
  --cta:            var(--hot-magenta);

  /* selection */
  --selection-bg:   rgba(168, 85, 247, 0.35);
  --selection-fg:   #F2F1F7;
}

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