/* Theme — every colour in the app resolves here.
 *
 * Moonpad had its palette duplicated across four :root blocks plus ten inline
 * ones, with the accent living under two names (--lime #cdfd37 and --phos
 * #C9F53F) at two slightly different hexes. That is why a recolour used to be
 * a scavenger hunt. One file now, and recolouring is editing this block.
 *
 * Solana's brand is a #9945FF → #14F195 gradient. Green is the primary accent
 * because it is what carries on near-black: purple at #9945FF sits around 3:1
 * against --bg, which is fine for a wordmark and not fine for the button text,
 * focus rings and hover states the old --lime drove. Purple is the secondary,
 * used for the gradient, the wordmark and accents that sit on raised panels.
 *
 * The greys are pulled a few degrees toward violet so the purple reads as part
 * of the surface rather than pasted onto a neutral grey app. */

:root{
  /* surfaces — TRUE black through raised panel, neutral.
     The violet-tinted greys were the single biggest reason the site read as
     muddy next to the reference. Pure neutrals let the art carry the colour;
     the accent is the only voice. */
  --void:   #000000;
  --bg:     #0a0a0a;
  --panel:  #111111;
  --panel2: #181818;
  --raise:  #212121;
  --line:   #262626;
  --line2:  #343434;

  /* type
     Measured against --panel, which is what most of this sits on:
       --ink    15.6:1
       --dim     8.0:1
       --faint   5.8:1
     --faint was #635c73 at 2.94:1, well under the 4.5 AA floor, and it carries
     25 elements — most of them 10-11px uppercase with wide tracking, which is
     the worst thing to under-contrast. Small, tracked-out and dim compounds:
     each alone is survivable, together it is unreadable. */
  --ink:    #f2f2f2;
  --dim:    #b8b8b8;
  --faint:  #8f8f8f;

  /* primary accent — Solana green */
  --accent:      #14F195;
  --accent-dim:  #0fbf76;
  --accent-hi:   #5cffb9;   /* hover brighten */
  --accent-glow: rgba(20,241,149,.16);
  --accent-ink:  #04120c;   /* text ON an accent fill */

  /* secondary accent — Solana purple */
  --accent-2:      #9945FF;
  --accent-2-dim:  #7b35d6;
  --accent-2-glow: rgba(153,69,255,.18);

  /* Bare channels, so rgba(var(--accent-rgb),.25) works. Without these every
     translucent glow ends up as a hardcoded hex, which is exactly how Moonpad
     ended up with sixteen literal rgba(205,253,55,…) that survived a token
     swap and kept rendering the old green. */
  --accent-rgb:   20,241,149;
  --accent-2-rgb: 153,69,255;

  /* Gradients. --grad runs purple to green across a wide element; --grad-rev
     for anything that reads right-to-left; --grad-soft for washes and glows
     where a full-strength sweep would shout. */
  /* ⚠️ Never paint a fill with the bare `background:var(--grad)` shorthand:
     at fractional zoom/DPR Chrome nudges the 90deg tile by a rounded fraction
     and the far-end green wraps into the first pixel column — the "little
     green line on the left". Fills use the longhands instead:
       background-image:var(--grad);background-repeat:no-repeat;
       background-size:calc(100% + 2px) 100%;background-position:-1px 0
     Text clips (background-clip:text) and tiles sized >100% are immune. */
  --grad:      linear-gradient(90deg, #9945FF 0%, #14F195 100%);
  --grad-rev:  linear-gradient(90deg, #14F195 0%, #9945FF 100%);
  --grad-hi:   linear-gradient(90deg, #b06bff 0%, #5cffb9 100%);
  --grad-soft: linear-gradient(90deg, rgba(153,69,255,.16) 0%, rgba(20,241,149,.16) 100%);
  --grad-line: linear-gradient(90deg, transparent, #9945FF 28%, #14F195 72%, transparent);

  --warn: #ffcc55;
  --bad:  #ff6b6b;
  --r: 6px;

  /* Back-compat aliases. The editor CSS was written against Moonpad's token
     names and there are several hundred usages; aliasing costs nothing and
     keeps the port to a copy rather than a rewrite. New code should use
     --accent. */
  --lime:      var(--accent);
  --lime-dim:  var(--accent-dim);
  --lime-glow: var(--accent-glow);
  --phos:      var(--accent);
}