/* MeshWars brand palette (frontend/theme.css).
   Loaded before every other stylesheet on all three pages so the
   custom properties below are available everywhere. The seven --mw-*
   tokens are the pack's official palette, unchanged. The three
   semantic aliases underneath are the site's pre-brand colours --
   accent, panel and page background -- now pointed at the closest
   brand token. coverage.css / landing.css / join.css / mc.css consume
   the aliases via var() instead of a literal hex, so a future colour
   change happens once, here, instead of in five places.

   Team colours are gameplay, not branding: seven maximally
   distinguishable hues, identical under every skin. The map still owns
   its own copies (TEAM_COLORS in mc.js / map2.js / join.js /
   results.js) and nothing here changes that -- the --mw-team-* tokens
   further down exist only so CSS, which cannot reach a hex typed into a
   page script, can colour a team NAME in prose. They are listed among
   the brand tokens but are explicitly NOT brand: no skin redefines
   them. */
:root {
  --mw-gold-light: #EDD39F;
  --mw-gold:       #A9885B;
  --mw-bronze:     #5A422A;
  --mw-ink:        #0C0B0A;
  --mw-ink-soft:   #1A1815;
  --mw-hostile:    #782A1C;
  --mw-friendly:   #335927;

  --mw-accent: var(--mw-gold);     /* was #e8a735 */
  --mw-panel:  var(--mw-ink-soft); /* was #1a1a1a */
  --mw-page:   var(--mw-ink);      /* was #0a0a0a */

  /* ---- neutral ramp ------------------------------------------------
     The brand colours above were tokenised from the start; the greys
     were not, and roughly 120 literal #333 / #ccc / #888 values across
     five stylesheets are exactly what stops a second theme from being
     possible -- a theme block can redefine a token, but it can never
     reach a hex typed into a rule.

     These are the values that were already in use, unchanged, so the
     default look is identical to the character. A ramp rather than
     role names because that is honestly what they are: six steps of
     dimming text, two weights of rule, one raised surface. A theme
     shifts the whole ramp at once. */
  --mw-text-1: #ddd;   /* body text */
  --mw-text-2: #ccc;
  --mw-text-3: #bbb;
  --mw-text-4: #aaa;
  --mw-text-5: #999;
  --mw-text-6: #888;   /* captions, disabled, least emphasis */

  --mw-line:        #333;    /* the default rule and panel border */
  --mw-line-strong: #444;
  --mw-raised:      #2a2a2a; /* a surface lifted off --mw-panel */

  /* Accent-tinted surfaces: the warm dark fills behind a selected
     control, a highlighted note, a callout. Tokenised for the same
     reason the greys were -- a theme has to be able to move them, and a
     cyan skin with four warm brown panels still left in it reads as a
     half-finished job rather than a skin. */
  --mw-accent-wash:      #2a2410;  /* subtle accent-tinted surface */
  --mw-accent-wash-line: #4a3f1a;  /* its border */
  --mw-accent-deep:      #2a1a10;  /* a deeper tint of the same idea */
  --mw-accent-active:    #3a2f12;  /* a control that is currently selected */

  /* The marks, as tokens for the same reason the colours are: a skin
     swaps them by redefining a value rather than by any page knowing
     which theme is on. Rendered as backgrounds (see .mw-nav-crest), so
     an <img src> would defeat the point.

     The favicon is NOT here and cannot be: it is a <link>, out of CSS's
     reach, and a tab icon that changes under a reader is worse than one
     that does not match. Same for the social images, which render where
     no theme exists. */
  --mw-crest: url("/static/assets/favicon/favicon-64x64.png");
  --mw-logo:  url("/static/assets/logo/meshwars-horizontal.webp");

  /* The scrim over the hero's topographic plate. A token because it is
     the ground colour at two opacities, and a literal rgba() cannot
     follow --mw-ink -- the neon hero was still being darkened toward
     warm black under a cyan lockup. Holding the whole gradient keeps it
     to one value per skin instead of four channels. */
  --mw-hero-scrim: linear-gradient(180deg, rgba(12, 11, 10, 0.80) 0%, rgba(12, 11, 10, 0.92) 100%);

  /* ---- team colours (gameplay, NOT brand) ---------------------------
     The same seven values TEAM_COLORS holds in frontend/mc.js,
     map2.js, join.js and results.js -- a fifth copy, in CSS this time,
     for the one thing those four cannot do: colour a team's NAME where
     it is written out in prose (see .rules-body .team in rules.css).
     Written here rather than in rules.css so a page that wants a team
     name in its text later has one place to read it from, and so the
     values sit next to the note explaining why a skin must not touch
     them.

     Deliberately NOT redefined in the neon block below. A player
     reading "GREEN holds 40 squares" and then looking at the map has to
     see the same green in both places, whichever skin is on -- the
     colours identify a team, they are not decoration.

     If a team colour ever changes it changes in five files, and this is
     one of them. */
  --mw-team-red:    #ff4136;
  --mw-team-green:  #2ecc40;
  --mw-team-blue:   #3d8bfd;
  --mw-team-purple: #b10dc9;
  --mw-team-yellow: #ffdc00;
  --mw-team-orange: #ff9020;
  --mw-team-pink:   #f01ec0;

  /* The one exception, and only for text. Six of the seven clear 4.5:1
     as body text on --mw-page and --mw-panel under both skins (RED
     5.1, GREEN 8.3, BLUE 5.3, YELLOW 13.1, ORANGE 7.8, PINK 4.8 at
     their worst). Purple does not: #b10dc9 lands at 3.18:1 on the gold
     panel, which is a fail at this size and reads as muddy next to the
     other six. Lifted to the same brightness band as its neighbours,
     same hue -- 5.0:1 at worst. The MAP still uses --mw-team-purple
     above: a filled square is a large block against a basemap, not
     small text, and the darker purple is the more distinguishable of
     the seven there. */
  --mw-team-purple-text: #cc55e0;
}

/* -------------------------------------------------------------------------
   Alternate skin: neon.

   Opt-in only. Gold stays the default because it is the more distinctive
   identity -- neon is what every mesh and hacker project already looks
   like, so it is offered as a skin rather than made the face of the site.
   Applied by setting data-theme="neon" on <html>; see theme-toggle.js,
   which also writes it before first paint so the page never flashes gold.

   Redefines tokens ONLY. Nothing here styles a component, which is what
   keeps a theme to one block instead of a parallel stylesheet -- and is
   only possible because the neutral ramp above is tokenised too.

   Two things deliberately do NOT change:

   - Team colours. They are gameplay: seven maximally distinguishable
     colours on a map. Neon versions of seven hues would collide with
     each other and with this palette, and a player misreading who holds
     a square is a worse outcome than a slightly off-palette dot. The
     map's copies live in the page scripts; the --mw-team-* tokens above
     are the same values for prose. Neither is redefined below, on
     purpose -- if you are adding a token here, check first that it is
     not one of those.
   - The favicon and the social images. CSS cannot reach a favicon,
     people find a tab by its icon, and a link preview renders somewhere
     the reader's theme does not exist. */
:root[data-theme="neon"] {
  /* The accent ramp: cyan where gold was. Bright enough to carry a
     heading on near-black, dark enough at the bronze end to sit under
     text as a fill. */
  --mw-gold-light: #9DFDF6;
  --mw-gold:       #2BE8E0;
  --mw-bronze:     #0E4A52;

  /* Ground and panel, biased blue rather than neutral black -- a pure
     grey ground under a cyan accent reads as a mistake. */
  --mw-ink:      #05080D;
  --mw-ink-soft: #0B111A;

  --mw-hostile:  #FF2E63;
  --mw-friendly: #39FF88;

  /* The same six-step ramp, shifted cool so text sits in the same
     family as the ground instead of on top of it. */
  --mw-text-1: #D6E6F2;
  --mw-text-2: #BACBDA;
  --mw-text-3: #A2B4C4;
  --mw-text-4: #8B9DAD;
  --mw-text-5: #75879A;
  --mw-text-6: #5F7183;

  --mw-line:        #1B2A3A;
  --mw-line-strong: #27394D;
  --mw-raised:      #131F2C;

  --mw-accent-wash:      #0C2630;
  --mw-accent-wash-line: #14424F;
  --mw-accent-deep:      #08202B;
  --mw-accent-active:    #0F3B47;

  /* Both marks come out of the same generated lockup: the crest is its
     shield, cropped and squared, rather than a separate drawing. An
     earlier hand-drawn SVG sat here and was replaced -- a nav crest that
     is a different shield from the one in the hero is the kind of
     mismatch nobody can name but everybody feels. The lockup itself is
     fitted to the gold one's exact 1010x320 frame, so the hero renders
     identically on either skin instead of reflowing when you switch. */
  --mw-crest: url("/static/assets/logo/crest-neon.png");
  --mw-logo:  url("/static/assets/logo/meshwars-horizontal-neon.webp");
  --mw-hero-scrim: linear-gradient(180deg, rgba(5, 8, 13, 0.82) 0%, rgba(5, 8, 13, 0.94) 100%);
}