/* =========================================================================
   whyWhatCode — unified design-system token contract (E12d port / #107).
   The FINAL design = base44 style (rd06, founder-approved 2026-07-02):
   - :root           = base44 LIGHT (cream) — the default theme.
   - [data-theme="dark"] = base44 DARK — toggled by the shared theme switcher
     (localStorage key "wwc-theme", window.__toggleTheme(), #themeToggle label).
   - The dark theme carries the real-sky starfield (#223): actual bright-star
     positions (Big Dipper / Polaris / Cassiopeia / Vega / Deneb region,
     standard bright-star-table values) projected onto a 1600x1200 SVG tile.
   Loaded by catalog.html / lesson.html / lc-viewer.html BEFORE their own <style>.
   code.css loads LAST and pins the code app-frame (the --code- and .syn- sets),
   IDENTICAL in both themes (base44 brand continuity — dark window on any page).

   Rules:
   - Stepping semantics MUST stay visually distinct: frame (call stack, cool
     slate) / heap (tree, warm sand) / ok (return, O(1)) / err (error, O(n^2)).
   - Lime (--accent) is FILL/BORDER only, never text on light surfaces; text on
     a lime fill is ALWAYS #0F0F0F in both themes.
   - One shadow recipe (--shadow); no glows/neon; matte rings for frame/heap.
   ========================================================================= */
:root {
  /* ---- surfaces ---- */
  --bg:        #F9F8F6;
  --bg-2:      #F0EEEB;
  --panel:     #FFFFFF;
  --panel-2:   #EDEAE4;
  --panel2:    var(--panel-2);   /* alias: catalog spelling */
  --cell:      #FFFFFF;
  --cell-hi:   #FAF9F7;
  --cell-alt:  #F5F3EE;          /* catalog super-panel cell alternation */

  /* ---- lines ---- */
  --line:      #E3DFD8;
  --line-2:    #D9D5CE;

  /* ---- ink ---- */
  --ink:       #0F0F0F;
  --ink-dim:   #696F7B;
  --ink-fade:  #A0A0A0;

  /* ---- accents ---- */
  --accent:      #ADE900;         /* lime — CTA fill/border only, black text on it */
  --accent-soft: #EBFFB1;         /* lime CTA fill */
  --accent-2:    #C98A1B;         /* warm secondary (no-orange rule: orange = --err only) */
  --teal:        #5E8F86;         /* muted; residual consumers only */
  --blue:        var(--ink-dim);  /* alias: legacy text-accent role — neutral in base44 */
  --amber:       var(--accent-2); /* alias: catalog/lesson spelling */

  /* ---- soft tints (neutral hovers; lime stays CTA-only) ---- */
  --amber-soft: rgba(201,138,27,0.10);

  /* ---- stepping: call stack (cool slate) ---- */
  --frame-1:    #EEF1F5;
  --frame-2:    #E2E7EF;
  --frame-edge: #B9C4D6;
  --frame-glow: rgba(185,196,214,0.45);   /* matte ring, not a glow */
  --frame-ink:  #3E4E68;                  /* text on frame surfaces */

  /* ---- stepping: heap / tree (warm sand) ---- */
  --heap-1:     #F4EDDE;
  --heap-2:     #ECE2CC;
  --heap-edge:  #D6C39A;
  --heap-glow:  rgba(214,195,154,0.50);   /* matte ring */
  --heap-ink:   #6E5624;                  /* text on heap surfaces */

  /* ---- stepping: result / status ---- */
  --ok:         #2E7D43;
  --ok-soft:    rgba(46,125,67,0.12);
  --err:        #D64524;

  /* ---- stepping: causal-flow flash (lime text-marker) ---- */
  --flash-hi:   rgba(173,233,0,0.55);
  --flash-lo:   rgba(173,233,0,0.22);

  /* ---- translucent chrome (bars / strips over the page) ---- */
  --scrim:      rgba(249,248,246,0.85);

  /* ---- difficulty ---- */
  --easy:       #2E7D43;
  --medium:     #C98A1B;
  --hard:       #D64524;
  --green:      var(--easy);     /* alias: catalog spelling */
  --rose:       var(--hard);     /* alias: catalog spelling */

  /* ---- shape ---- */
  --r-card:     14px;
  --r-pill:     999px;
  --r-sm:       8px;
  --shadow:     0 1px 2px rgba(15,15,15,0.04), 0 8px 24px rgba(15,15,15,0.06);
  --shadow-card: var(--shadow);  /* alias: E11 spelling */

  /* ---- fonts (mono FROZEN = JetBrains Mono) ---- */
  --f-display: 'Rubik', system-ui, sans-serif;
  --f-body:    'Wix Madefor Text', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
  --mem-mono:  var(--f-mono);
}

/* ---- base44 DARK (rd06 spec §2b). The --code- and .syn- sets stay UNCHANGED (code.css). */
[data-theme="dark"] {
  --bg:        #131312;
  --bg-2:      #1A1A18;
  --panel:     #1D1D1B;
  --panel-2:   #26251F;
  --cell:      #1D1D1B;
  --cell-hi:   #232321;
  --cell-alt:  #272725;

  --line:      #2E2E2B;
  --line-2:    #3C3C38;

  --ink:       #F5F3EF;
  --ink-dim:   #A3A29B;
  --ink-fade:  #6E6D66;

  --accent:      #ADE900;
  --accent-soft: #E9FFAF;
  --accent-2:    #D9A43B;
  --teal:        #6FA79C;

  --amber-soft: rgba(217,164,59,0.12);

  --frame-1:    #1E242C;
  --frame-2:    #252C36;
  --frame-edge: #4A5A70;
  --frame-glow: rgba(74,90,112,0.50);
  --frame-ink:  #C9D4E6;

  --heap-1:     #2A2418;
  --heap-2:     #332B1C;
  --heap-edge:  #6B5A38;
  --heap-glow:  rgba(107,90,56,0.50);
  --heap-ink:   #E4D2A6;

  --ok:         #4CAF6A;
  --ok-soft:    rgba(76,175,106,0.15);
  --err:        #FF7A50;

  --flash-hi:   rgba(173,233,0,0.35);
  --flash-lo:   rgba(173,233,0,0.15);

  --scrim:      rgba(19,19,18,0.85);

  --easy:       #4CAF6A;
  --medium:     #D9A43B;
  --hard:       #FF7A50;

  --shadow:     0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.30);
}

/* =========================================================================
   Starfield v2 (#223) — a slepok of the REAL northern sky, dark theme only.
   Equirectangular slice Dec +15..+90 x RA 8h..28h (RA increases leftward,
   sky-chart orientation): the Big Dipper reads in the upper-right quadrant,
   Polaris on the top band, Cassiopeia's W at the left edge, Vega / Deneb /
   Arcturus mid-field. 94 stars, magnitude -> r/opacity (op <= .30), static,
   no glow; 3 lime brand stars. Panels/cards sit on top — stars live only in
   the open page field. Light theme untouched.
   ========================================================================= */
[data-theme="dark"] body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200'%3E%3Cg fill='%23F1EEE6'%3E%3Ccircle cx='1355' cy='452' r='2.08' fill-opacity='0.35'/%3E%3Ccircle cx='1358' cy='538' r='1.87' fill-opacity='0.31'/%3E%3Ccircle cx='1288' cy='581' r='1.83' fill-opacity='0.31'/%3E%3Ccircle cx='1259' cy='528' r='1.53' fill-opacity='0.245'/%3E%3Ccircle cx='1208' cy='545' r='2.09' fill-opacity='0.365'/%3E%3Ccircle cx='1168' cy='561' r='1.91' fill-opacity='0.32'/%3E%3Ccircle cx='1137' cy='651' r='2.05' fill-opacity='0.35'/%3E%3Ccircle cx='1560' cy='468' r='1.51' fill-opacity='0.235'/%3E%3Ccircle cx='1347' cy='728' r='1.64' fill-opacity='0.265'/%3E%3Ccircle cx='1410' cy='776' r='1.63' fill-opacity='0.265'/%3E%3Ccircle cx='1417' cy='753' r='1.47' fill-opacity='0.235'/%3E%3Ccircle cx='1476' cy='613' r='1.59' fill-opacity='0.255'/%3E%3Ccircle cx='1452' cy='495' r='1.35' fill-opacity='0.2'/%3E%3Ccircle cx='1478' cy='431' r='1.4' fill-opacity='0.21'/%3E%3Ccircle cx='1521' cy='671' r='1.59' fill-opacity='0.255'/%3E%3Ccircle cx='1515' cy='685' r='1.42' fill-opacity='0.22'/%3E%3Ccircle cx='118' cy='12' r='2' fill-opacity='0.34'/%3E%3Ccircle cx='1052' cy='253' r='1.96' fill-opacity='0.33'/%3E%3Ccircle cx='1012' cy='291' r='1.63' fill-opacity='0.265'/%3E%3Ccircle cx='837' cy='55' r='1.27' fill-opacity='0.2'/%3E%3Ccircle cx='899' cy='127' r='1.27' fill-opacity='0.2'/%3E%3Ccircle cx='981' cy='195' r='1.27' fill-opacity='0.2'/%3E%3Ccircle cx='1099' cy='1133' r='2.64' fill-opacity='0.45'/%3E%3Ccircle cx='1060' cy='1007' r='1.87' fill-opacity='0.31'/%3E%3Ccircle cx='1127' cy='1146' r='1.74' fill-opacity='0.285'/%3E%3Ccircle cx='1077' cy='827' r='1.63' fill-opacity='0.265'/%3E%3Ccircle cx='1019' cy='907' r='1.46' fill-opacity='0.235'/%3E%3Ccircle cx='1037' cy='794' r='1.46' fill-opacity='0.235'/%3E%3Ccircle cx='1078' cy='954' r='1.42' fill-opacity='0.22'/%3E%3Ccircle cx='1003' cy='974' r='1.38' fill-opacity='0.21'/%3E%3Ccircle cx='983' cy='1019' r='1.33' fill-opacity='0.2'/%3E%3Ccircle cx='920' cy='1096' r='1.73' fill-opacity='0.285'/%3E%3Ccircle cx='905' cy='934' r='1.72' fill-opacity='0.275'/%3E%3Ccircle cx='860' cy='1043' r='1.59' fill-opacity='0.255'/%3E%3Ccircle cx='860' cy='851' r='1.59' fill-opacity='0.255'/%3E%3Ccircle cx='903' cy='817' r='1.46' fill-opacity='0.235'/%3E%3Ccircle cx='818' cy='996' r='1.49' fill-opacity='0.235'/%3E%3Ccircle cx='827' cy='704' r='1.35' fill-opacity='0.2'/%3E%3Ccircle cx='934' cy='699' r='1.31' fill-opacity='0.2'/%3E%3Ccircle cx='751' cy='820' r='2.64' fill-opacity='0.45'/%3E%3Ccircle cx='721' cy='917' r='1.55' fill-opacity='0.245'/%3E%3Ccircle cx='733' cy='906' r='1.46' fill-opacity='0.22'/%3E%3Ccircle cx='585' cy='716' r='2.27' fill-opacity='0.395'/%3E%3Ccircle cx='610' cy='796' r='1.91' fill-opacity='0.32'/%3E%3Ccircle cx='578' cy='896' r='1.82' fill-opacity='0.31'/%3E%3Ccircle cx='660' cy='718' r='1.69' fill-opacity='0.275'/%3E%3Ccircle cx='679' cy='993' r='1.63' fill-opacity='0.265'/%3E%3Ccircle cx='543' cy='956' r='1.56' fill-opacity='0.255'/%3E%3Ccircle cx='697' cy='586' r='1.37' fill-opacity='0.21'/%3E%3Ccircle cx='535' cy='439' r='1.83' fill-opacity='0.31'/%3E%3Ccircle cx='522' cy='311' r='1.55' fill-opacity='0.245'/%3E%3Ccircle cx='466' cy='509' r='1.49' fill-opacity='0.235'/%3E%3Ccircle cx='580' cy='451' r='1.49' fill-opacity='0.235'/%3E%3Ccircle cx='414' cy='381' r='1.46' fill-opacity='0.22'/%3E%3Ccircle cx='308' cy='494' r='1.9' fill-opacity='0.32'/%3E%3Ccircle cx='266' cy='535' r='1.91' fill-opacity='0.32'/%3E%3Ccircle cx='244' cy='468' r='1.86' fill-opacity='0.31'/%3E%3Ccircle cx='206' cy='476' r='1.74' fill-opacity='0.285'/%3E%3Ccircle cx='167' cy='421' r='1.49' fill-opacity='0.235'/%3E%3Ccircle cx='255' cy='515' r='1.47' fill-opacity='0.235'/%3E%3Ccircle cx='805' cy='616' r='1.91' fill-opacity='0.32'/%3E%3Ccircle cx='928' cy='456' r='1.73' fill-opacity='0.285'/%3E%3Ccircle cx='839' cy='603' r='1.72' fill-opacity='0.275'/%3E%3Ccircle cx='703' cy='357' r='1.63' fill-opacity='0.265'/%3E%3Ccircle cx='868' cy='389' r='1.59' fill-opacity='0.255'/%3E%3Ccircle cx='1007' cy='496' r='1.53' fill-opacity='0.245'/%3E%3Ccircle cx='772' cy='276' r='1.44' fill-opacity='0.22'/%3E%3Ccircle cx='1114' cy='410' r='1.4' fill-opacity='0.21'/%3E%3Ccircle cx='809' cy='530' r='1.37' fill-opacity='0.21'/%3E%3Ccircle cx='1235' cy='323' r='1.33' fill-opacity='0.2'/%3E%3Ccircle cx='1318' cy='331' r='1.33' fill-opacity='0.2'/%3E%3Ccircle cx='656' cy='316' r='1.33' fill-opacity='0.2'/%3E%3Ccircle cx='309' cy='975' r='1.99' fill-opacity='0.34'/%3E%3Ccircle cx='227' cy='870' r='1.99' fill-opacity='0.34'/%3E%3Ccircle cx='155' cy='763' r='1.91' fill-opacity='0.32'/%3E%3Ccircle cx='268' cy='946' r='1.55' fill-opacity='0.245'/%3E%3Ccircle cx='48' cy='642' r='2.08' fill-opacity='0.35'/%3E%3Ccircle cx='69' cy='785' r='1.96' fill-opacity='0.33'/%3E%3Ccircle cx='74' cy='584' r='1.65' fill-opacity='0.265'/%3E%3Ccircle cx='395' cy='991' r='1.86' fill-opacity='0.31'/%3E%3Ccircle cx='394' cy='1197' r='1.82' fill-opacity='0.31'/%3E%3Ccircle cx='423' cy='956' r='1.65' fill-opacity='0.265'/%3E%3Ccircle cx='302' cy='1197' r='1.69' fill-opacity='0.275'/%3E%3Ccircle cx='1413' cy='1123' r='1.78' fill-opacity='0.3'/%3E%3Ccircle cx='1341' cy='1112' r='1.81' fill-opacity='0.3'/%3E%3Ccircle cx='1459' cy='1060' r='1.64' fill-opacity='0.265'/%3E%3Ccircle cx='1418' cy='1065' r='1.47' fill-opacity='0.235'/%3E%3Ccircle cx='1492' cy='890' r='1.59' fill-opacity='0.255'/%3E%3Ccircle cx='147' cy='880' r='1.64' fill-opacity='0.265'/%3E%3Ccircle cx='438' cy='636' r='1.37' fill-opacity='0.21'/%3E%3Ccircle cx='642' cy='1128' r='1.47' fill-opacity='0.235'/%3E%3C/g%3E%3Cg fill='%23ADE900'%3E%3Ccircle cx='994' cy='1013' r='1.91' fill-opacity='0.32'/%3E%3Ccircle cx='348' cy='198' r='1.56' fill-opacity='0.255'/%3E%3Ccircle cx='1205' cy='827' r='1.68' fill-opacity='0.275'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- shared control: the theme toggle pill (one source for all 3 pages) ---- */
.theme-toggle{
  font:500 13px var(--f-body);
  color:var(--ink-dim);
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:8px 14px;
  cursor:pointer;
  white-space:nowrap;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--line-2); }