/* VOLTSECTORS design tokens — the single copy.
 *
 * COLOUR AUTHORITY: design/references/browse-palette-authority.png.
 * Every value below was SAMPLED from that file — pngjs, chrome-only regions,
 * flat-plateau and hue-family analysis — not eyeballed. Sampled pixel counts are
 * kept inline as evidence that a value is a real fill and not antialiasing.
 * Change a colour here and nowhere else; test/tokens.test.js fails if a surface
 * redefines a shared token or references one that does not resolve.
 *
 * THE AMBER RULE IS DEAD (1 Aug 2026). It said amber was for ACTIONS AND PAID
 * PRICES ONLY — never headings, never selected tabs. The palette is now a
 * TWO-COLOUR system whose energy colour is used freely, headline type included,
 * so a rule whose whole job was to keep one accent scarce no longer describes
 * the design. Do not reintroduce the rule, and do not reintroduce amber.
 *
 * HOW THE TWO COLOURS DIVIDE, read off the mockup:
 *   CYAN       nav, section labels, metadata keys, icons, FREE prices, thin
 *              rules and corner ticks. The quiet, constant half.
 *   ORANGE-RED primary buttons, the display headline, active/hot states, the
 *              PLAYED badge, premium Volts prices. The mockup's headline is the
 *              reference for how far to push it.
 * They are peers. If a page reads as "cyan plus one exception", it is wrong.
 *
 * THE THUMBNAILS ARE NOT PART OF THIS PALETTE. Six sector themes anchor six
 * different hues and that variety is the entire point of the clip grid. Never
 * filter, tint, blend or overlay a thumbnail toward these tokens. The FRAME
 * carries the consistency instead — constant navy field, cyan hairlines and
 * corner ticks, one orange-red accent per card — so varied clips read as
 * intentional range inside a fixed frame rather than as an inconsistent grid.
 *
 * Surface-local tokens deliberately NOT here:
 *   --tile-* / --wall / --floor   builder + game grid semantics, shared with
 *                                 game3d.html rather than with the marketplace
 *   --warn                        the review tool's operator status naming
 */
:root{
  /* ---- surfaces -----------------------------------------------------------
     Sampled from flat plateaus only (a pixel whose neighbours match within
     2/255, so glyph edges and gradients drop out).
     NOTE the ramp is NOT monotonic by depth: the card is DARKER than the page
     it sits on — cards read as wells, and the footer band as a raised shelf.
     That is what the mockup does; do not "correct" it into a ladder. */
  --card:#00101d;      /* card body       n=2497 */
  --panel:#00111f;     /* left sidebar    n=6927 */
  --nav:#001323;       /* top nav bar     n=2353 */
  --page:#001423;      /* page field      n=1073 */
  --raised:#001827;    /* footer CTA band n=1725 */
  /* aliases so surfaces on the old names keep resolving */
  --panel2:#00111f;
  --panel3:#001423;
  --page2:#00101d;

  /* ---- cyan: the constant half -------------------------------------------
     Nav glyphs plateau at pure cyan (mode #00ffff across the nav text band);
     #00929b is the lower plateau of that same antialiasing ramp, so the dim
     variant is measured rather than invented. Pure cyan is intense for long
     runs of small text in a browser, which has no bloom to soften it — that is
     what the slate tiers are for. Cyan is for SHORT, high-signal items. */
  --cyan:#00ffff;
  --cyan-dim:#00929b;
  --on-cyan:#001423;

  /* ---- orange-red: the energy half ---------------------------------------
     The cleanest signal in the image: #fd5d3d is the modal colour of the whole
     orange-red family (h=10 s=0.76 v=0.99) and holds across the PLAY NOW fill,
     the DOMINATE headline, the PLAYED badge and premium prices. */
  --red:#fd5d3d;
  --red-hi:#fa7a42;    /* brighter variant — premium prices, hover */
  --red-line:rgba(253,93,61,.55);
  --on-red:#ffffff;    /* sampled white inside the PLAY NOW fill */

  /* ---- type ---------------------------------------------------------------
     t1 sector names and headline type; t2/t3 the muted slate-blue the mockup
     uses for secondary metadata — t2 the brighter tier (filter labels, sampled
     #a2aaac), t3 the dimmer (creator handle, founding number, play counts,
     sampled #405365 as the global slate mode). */
  --t1:#ffffff;
  --t1b:#e9f1f7;
  --t2:#a2aaac;
  --t3:#405365;
  --t4:rgba(64,83,101,.78);

  /* ---- rules and ticks ----------------------------------------------------
     Cyan-family per the mockup: hairlines and corner ticks are the quiet half
     of the system doing the structural work. */
  --line:rgba(0,255,255,.14);
  --line-strong:rgba(0,255,255,.30);
  --line-faint:rgba(0,255,255,.07);

  /* ---- verdicts -----------------------------------------------------------
     Shared so a creator and the reviewer read the same colours for the same
     outcome. --bad is deliberately NOT --red: a failure state matching the
     primary button would make every rejection look like a call to action. */
  --ok:#8fe0a0;
  --bad:#ff2e5b;

  /* ---- DEPRECATED: the dead amber rule's tokens ---------------------------
     Aliased onto the energy colour so any surface still naming them lands on
     the new palette instead of on a stale orange. Delete once nothing reads
     them; test/tokens.test.js reports the remaining references. */
  --amber:var(--red);
  --amber-hi:var(--red-hi);
  --amber-line:var(--red-line);
  --on-amber:var(--on-red);

  /* ---- faces --------------------------------------------------------------- */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
}