/* Leppyrd Tracks - one design, two palettes.
   ---------------------------------------------------------------------------------------------
   Injected into every page AFTER its own <style>, so these definitions win on equal specificity.
   It deliberately reuses the variable names the pages already reference (--bg, --pan, --paper,
   --fog, --violet and the rest) rather than inventing new ones: that makes every page themeable
   without touching it. Note --paper means TEXT here, not the page, which is the existing
   vocabulary and not worth renaming across thirty files.

   Dark is the site's existing palette, unchanged. Light is new. Both take their accent from the
   logo's own violet ramp, so the mark never sits on a page that fights it. Every text colour in
   both clears 4.5:1 against its background - solved, not guessed. */

:root{
  /* --- LIGHT: paper and ink ------------------------------------------------------------- */
  --bg:#f3f1ec;  --pan:#e9e6df;  --pan2:#dfdbd1;  --line:#cdc8bd;  --line2:#b5afa2;
  --paper:#1c1a17;                       /* primary text */
  --fog:#4a4640;                         /* secondary   */
  --fog2:#5e5a53;                        /* tertiary - 4.78:1 on the WORST surface */
  --violet:#4c2f96;                      /* deep end of the logo ramp, 8.64:1 on paper */
  --jade:#2b6741;  --coral:#a03d1c;  --gold:#6d5111;   /* brightest that still clear 4.5:1;
                                                          red is at the ceiling already */
  --w1:#1c1a17;    --w2:#8a8478;     --w3:#a9a294;   /* bar weights: likely = heavier ink */

  /* Role colours. The pages had these baked in as dark hexes, which is why light broke: a tinted
     "good" panel at #0f2019 stays near-black whatever the page does around it. Named by ROLE so
     both palettes can answer the same question differently. */
  --sel:#ddd7c9;                                        /* active tab / selected chip */
  --tint-pos:#e4ede3;  --tint-neg:#f4e3dc;  --tint-warn:#f2eada;
  --edge-pos:#6f9c80;  --edge-neg:#c08268;  --edge-warn:#b89e60;
  --sunk:#e4e0d7;                                       /* input wells, bar troughs */

  /* INVERTED surfaces - identical in both themes on purpose.
     8/9 (Troy): the share button keeps its dark violet box on the light page and reads well, so it
     is a deliberate inverted call-to-action rather than something the sweep missed. Defined once
     here and NOT overridden in the dark block, so it can never flip: a dark box always gets the
     bright violet, never the deep one, which would be invisible on it. */
  --inv-bg:#241f3d;  --inv-bg2:#2c2649;  --inv-line:#4b3f6b;
  --inv-text:#a78bfa;  --inv-dim:#8f86c4;
  /* semantics INSIDE an inverted box. The paper-solved jade and coral are deliberately dark
     and disappear on one, so a selected chip showed its number in near-black on navy. */
  --inv-pos:#5fd0a0;   --inv-neg:#ee8368;   --inv-mid:#e7bd63;
  --edge-acc:var(--inv-line);

  --ser:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:var(--ser);                     /* pages asking for --sans get the real face too */
  --serif:var(--ser);
}

html[data-theme="dark"]{
  /* --- DARK: the site's existing colours, kept ------------------------------------------ */
  --bg:#0b0e13;  --pan:#141922;  --pan2:#1a2029;  --line:#232b38;  --line2:#2f3a4c;
  --paper:#e8edf4;  --fog:#b4c0d1;  --fog2:#96a3b6;
  --violet:#a78bfa;
  --jade:#5fd0a0;  --coral:#ee8368;  --gold:#e7bd63;
  --w1:#e8edf4;    --w2:#7c8798;     --w3:#3a4453;
}
/* DARK IS THE DEFAULT, not the system preference.

   8/9: following prefers-color-scheme shipped a live regression - /targets renders its inputs from
   hard-coded dark hexes, so anyone whose OS is set to light got black boxes with black text in
   them. Until every page draws its colours from the variables above, light has to be something a
   reader opts into, never something an OS setting inflicts on them. Flip this back to a media
   query once the hard-coded hexes are gone and the pages have been checked in both. */
html:not([data-theme="light"]){
  --bg:#0b0e13;  --pan:#141922;  --pan2:#1a2029;  --line:#232b38;  --line2:#2f3a4c;
  --paper:#e8edf4;  --fog:#b4c0d1;  --fog2:#96a3b6;
  --violet:#a78bfa;
  --jade:#5fd0a0;  --coral:#ee8368;  --gold:#e7bd63;
  --w1:#e8edf4;    --w2:#7c8798;     --w3:#3a4453;
  --sel:#161d2b;
  --tint-pos:#0f2019;  --tint-neg:#20120f;  --tint-warn:#1a1512;
  --edge-pos:#2f7f5c;  --edge-neg:#8a4436;  --edge-warn:#4a3a1e;  --edge-acc:#4b3f6b;
  --sunk:#0f151d;
}

/* Form controls are the specific thing that failed: several pages set an input's background to a
   dark hex and leave the text to a variable, which inverts into unreadable the moment the page
   goes light. Bind both ends to the same palette so they can never disagree. */
input,select,textarea,button{font-family:var(--mono);color:var(--paper);
 background:var(--pan2);border:1px solid var(--line)}
input::placeholder,textarea::placeholder{color:var(--fog2)}

/* --- the bones, shared by both palettes ------------------------------------------------- */
html,body{background:var(--bg);color:var(--paper)}
body{font-family:var(--ser);font-variant-numeric:tabular-nums}

/* A capsule on a short bar is the loudest tell in the whole site. Nothing is a capsule. */
*{border-radius:0 !important}

/* border-radius does NOT reach SVG - the map's bands carry rx="7.5" as a geometry ATTRIBUTE, and
   all 26 survived the rule above. rx/ry are real CSS properties on SVG shapes and a stylesheet
   beats a presentation attribute, so this is what actually squares the chart. Only inline SVG is
   affected; the logo is loaded through <img> and an external sheet cannot reach inside it. */
svg rect, svg ellipse{rx:0 !important; ry:0 !important}

/* Weight carries emphasis, not blur. */
*{text-shadow:none !important}
svg *{filter:none !important}

h1,h2,h3,h4{font-family:var(--ser);letter-spacing:-.012em}
h1{font-weight:400}
code,kbd,pre,.mono{font-family:var(--mono)}

/* --- the theme switch, injected into every page ----------------------------------------- */
.lt-theme{position:fixed;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
 font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
 background:var(--bg);color:var(--fog2);border:1px solid var(--line);
 padding:9px 12px;cursor:pointer}
.lt-theme:hover{color:var(--paper);border-color:var(--line2)}
@media print{.lt-theme{display:none}}