/* =============================================================================
   LANGUY — THE ONE GROUND  ·  shared dark skin for every public surface
   -----------------------------------------------------------------------------
   WHY THIS FILE EXISTS (2026-07-29)
   A five-persona walk of the live site scored UNITY 26/100 — the lowest score on
   the board — and named it the single change that would raise the lowest score
   the most. The measured evidence:

     /  ·  /products  ·  /free        dark #0B0F1A · circular emblem · "Enter free"
     /products/starter-pack/          LIGHT #FBFBFA · cartoon globe, LG cap + shades
     /products/cheat-codes            LIGHT/white  · globe, "E" cap + a cigarette
     /play                            dark #0A0E17 · globe LG cap · green highlighter
     /read                            LIGHT #FBFBFA

   Five surfaces, four mascot lockups, two themes — and the page that TAKES THE
   MONEY looked like a different vendor from the page that MADE THE PROMISE. A
   parent and a skeptic both cited it unprompted.

   THE FIX IS CONVERGENCE, NOT REDESIGN. Nothing here invents a colour, a type
   scale or a component. Every value is /assets/world.css's, verbatim, because
   world.css is itself already aliased onto free.html's exact numbers. One ground,
   one emblem, one nav, everywhere.

   HOW TO USE
     <link rel="stylesheet" href="/assets/languy-dark.css">
   Load it AFTER the page's own <style> block so its tokens win the cascade over
   any legacy light :root the page still carries. Then delete that legacy :root.

   WHAT THIS FILE DELIBERATELY DOES NOT SET
     · layout tokens (--maxw, --pad) — those stay per-page
     · anything structural — this is ground + type colour + the header, nothing else
   -----------------------------------------------------------------------------
   OPEN FOUNDER RULING, recorded not resolved: world.css's header note says the
   light surfaces "still take their accent from languy-tokens.css (#0F80F0) —
   closing that last split is the founder's open 'signature colour' ruling."
   This file closes the GROUND split (the thing the walk measured and scored). It
   adopts #2563EB as the action colour because that is what the homepage, /free
   and /products already use. If the founder rules #0F80F0 is the signature, the
   change is ONE line here and it propagates to every surface at once — which is
   the entire point of having this file.
   ============================================================================= */

:root{
  color-scheme: dark;

  /* THE GROUND — free.html's values, verbatim (via world.css). A visitor crossing
     /free → / → /products → /products/starter-pack must not see the ground shift. */
  --ground:  #0B0F1A;                  /* free.html --world   */
  --surface: #0E1421;                  /* free.html --world-2 */
  --raised:  rgba(255,255,255,.035);   /* a panel on a panel  */

  --line:    rgba(255,255,255,.08);    /* free.html --edge    */
  --line-2:  rgba(255,255,255,.14);    /* free.html --edge-2  */

  --ink:   #EEF2F8;                    /* free.html body colour */
  --ink-2: #A8B3C4;                    /* free.html --dim-2 */
  --dim:   #7C879B;                    /* free.html --dim   */

  --action:      #2563EB;              /* free.html --blue — fill only, 3.70:1 */
  --action-hi:   #1D57DA;              /* hover fill (darkens, like /free) */
  --action-text: #5B8DEF;              /* free.html --blue-lit — blue TEXT on dark, 5.92:1 AA */
  --action-soft: rgba(37,99,235,.13);

  --owned:      #34D399;               /* an earned word ONLY — never a button, never a highlighter */
  --owned-soft: rgba(52,211,153,.14);

  --err:        #FB7185;               /* 7.11:1 on ground */

  /* ---- bridge: the legacy languy-tokens.css names, repointed at the ground ----
     Pages built on the LIGHT token vocabulary (--bg/--paper/--ink/--accent) keep
     working without a find-and-replace across 1,600 lines. New work should use
     the --ground/--surface names above. */
  --bg:            var(--ground);
  --bg-2:          var(--surface);
  --bg-soft:       var(--surface);
  --paper:         var(--surface);
  --paper-2:       #121826;
  --muted:         var(--dim);
  --muted-2:       var(--dim);
  --accent:        var(--action);
  --accent-cta:    var(--action);
  --accent-deep:   var(--action-hi);
  --accent-bright: var(--action-text);   /* was #0B63C7 — AA-safe on LIGHT only */
  --accent-soft:   rgba(37,99,235,.13);  /* was #EAF3FE — a white slab on dark */
  --chalk:         var(--action-text);
  --good:          var(--action-text);   /* success text is not a brand hue */
  --good-soft:     rgba(37,99,235,.13);
  --amber:         #F5B152;              /* AA on dark (was #B45309, AA on light) */
  --danger:        var(--err);

  /* FLAT LAW: elevation is a hairline, never a glow or a drop-shadow. */
  --shadow:    inset 0 0 0 1px rgba(255,255,255,.06);
  --shadow-lg: inset 0 0 0 1px rgba(255,255,255,.06);
  --btn-depth: inset 0 0 0 1px rgba(255,255,255,.06);
}

html{ background:var(--ground); }
body{ background:var(--ground); color:var(--ink); }

/* Form controls must not render as light UA widgets on a near-black page. */
input,textarea,select,button{ color-scheme:dark; }

/* =============================================================================
   THE ONE NAV  ·  .lgy-bar
   The homepage's header, extracted verbatim so every surface wears it. Emblem +
   letterspaced wordmark on the left, at most ONE action on the right.
   ========================================================================== */
.lgy-bar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .24s cubic-bezier(.16,1,.3,1);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .lgy-bar{ background:rgba(11,15,26,.82); }
}
.lgy-bar.scrolled{ border-bottom-color:var(--line); }
.lgy-bar-in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:60px;
  max-width:var(--maxw,1080px); margin:0 auto; padding:0 var(--pad,22px);
}
/* THE EMBLEM — founder-locked 2026-07-29: the emblem IS the globe wearing
   pixelated sunglasses. Nothing else. It is the red-background social avatar
   with the red taken away (the red is social-media-only and never reaches the
   site). This OVERRULES the earlier ruling that the globe-with-shades was "a
   character illustration for editorial use, never a logo lockup" — that ruling
   is dead, and this comment used to assert it.
   ONE geometry, tiered by RENDERED size (measurements: brand/SIZE-TRUTH.md):
     <=24px   brand/emblem-globe-micro-ondark.svg   wide bridge, land fattened
     32-48px  brand/emblem-globe-heavy-ondark.svg
     >=64px   images/mascot-candidates/emblem-flow-A-cutout.png  (the render)
   This nav renders at 22px, so it wears the MICRO tier. The vector is traced
   from the render's own pixels (brand/trace-continents.py), so the small mark
   and the big one are one being, not two cousins.
   RETIRED: brand/emblem-heavy.svg — the abstract broken ring with a bar that
   used to sit here. Measured 0% land at 16/22/32/64/140px, so it never read as
   his globe at any size. Kept on disk for the git trail; referenced by nothing. */
.lgy-mark{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink); text-decoration:none; font-weight:800;
}
.lgy-mark svg,
.lgy-mark img.lgy-emblem{ width:22px; height:22px; flex:none; }
.lgy-mark b{
  font-family:'Archivo',-apple-system,system-ui,sans-serif;
  font-weight:800; font-size:15px; letter-spacing:.16em; text-transform:uppercase;
}
.lgy-bar-right{ display:flex; align-items:center; gap:10px; }
/* ONE action. Matches the homepage's "Enter free" pill exactly. */
.lgy-go{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 17px; border-radius:999px;
  background:var(--action); color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:700; white-space:nowrap;
  border:0; cursor:pointer;
  transition:background .24s cubic-bezier(.16,1,.3,1);
}
.lgy-go:hover{ background:var(--action-hi); }
.lgy-go:focus-visible{ outline:2px solid var(--action-text); outline-offset:3px; }
/* The way back to the world — a quiet ghost link, never a second primary. */
.lgy-back{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:600;
  padding:8px 4px;
}
.lgy-back:hover{ color:var(--ink); }

/* ONE PROGRESS VOCABULARY — the word is the only currency (world.css law 2).
   No XP, no levels, no gems. A player with zero words sees nothing, never a "0". */
.lgy-words{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:var(--owned-soft); border:1px solid rgba(52,211,153,.32);
  color:var(--owned); font-size:13px; font-weight:700; white-space:nowrap;
}
.lgy-words[hidden]{ display:none !important; }
.lgy-words svg{ width:12px; height:12px; flex:none; }

@media (max-width:420px){
  .lgy-mark b{ font-size:13.5px; letter-spacing:.13em; }
  .lgy-go{ font-size:13.5px; padding:0 14px; }
  /* 360-390px: keep "✦ 3" and drop the word "words" — free.html already does
     exactly this at this breakpoint, so the two bars stay identical. The way
     back must survive the squeeze; the label is what gives. */
  .lgy-words .lbl{ display:none; }
  .lgy-words{ padding:6px 10px; gap:5px; }
}
@media (max-width:360px){
  .lgy-mark b{ display:none; }   /* emblem alone still reads as the mark */
}
@media (prefers-reduced-motion:reduce){
  .lgy-bar,.lgy-go,.lgy-back{ transition:none; }
}