/* =============================================================================
   theme-warm.css — the warm editorial theme.

   Palette and type lifted from a reference the author chose, then adapted:
   warm off-white paper instead of blue-grey, a teal accent instead of the
   cornflower blue, and a serif for reading with monospace reserved for labels,
   code and anything numeric.

   The serif stack is entirely system fonts (Iowan Old Style on Apple, Palatino
   and Book Antiqua on Windows, Georgia everywhere), so the warmth costs no
   download and the site still works with no network at all.

   Loaded after site.css and locks.css so these tokens win.
   ========================================================================== */

:root{
  /* paper and ink */
  --bg:#fcfcfb;
  --bg2:#f4f4f2;
  --panel:#ffffff;
  --panel2:#f7f7f5;
  --panel3:#efefec;
  --line:#e5e6e3;
  --line2:#d8d9d5;
  --txt:#1a1d23;
  --dim:#3d434d;
  --dimmer:#5f6672;

  /* one accent, plus a second hue reserved for diagrams that encode meaning */
  --accent:#217478;
  --accent2:#b43f71;

  /* semantic colours, warmed to sit on paper rather than on blue-grey */
  --on:#12795a;
  --off:#cfd0cb;
  --hot:#8f5309;
  --red:#b23a2f;
  --cyan:#0d7284;

  --serif:"Iowan Old Style","Palatino Nova",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --shadow:0 1px 2px rgba(26,29,35,.05), 0 10px 30px rgba(26,29,35,.07);
}

:root[data-theme="dark"]{
  --bg:#16181d;
  --bg2:#121419;
  --panel:#1c1f26;
  --panel2:#20242c;
  --panel3:#272c35;
  --line:#2a2e36;
  --line2:#3a404a;
  --txt:#e8eaee;
  --dim:#c6cad2;
  --dimmer:#8d939e;

  --accent:#4aa8ad;
  --accent2:#fb6098;

  --on:#4ec49a;
  --off:#3a4049;
  --hot:#dfa156;
  --red:#ef8b81;
  --cyan:#63c3d2;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16181d;
    --bg2:#121419;
    --panel:#1c1f26;
    --panel2:#20242c;
    --panel3:#272c35;
    --line:#2a2e36;
    --line2:#3a404a;
    --txt:#e8eaee;
    --dim:#c6cad2;
    --dimmer:#8d939e;
    --accent:#4aa8ad;
    --accent2:#fb6098;
    --on:#4ec49a;
    --off:#3a4049;
    --hot:#dfa156;
    --red:#ef8b81;
    --cyan:#63c3d2;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.3);
  }
}

/* Text on the accent. The light teal is dark enough for white; the dark theme's
   lighter teal needs near-black. Both are checked in the browser, not guessed. */
:root{ --on-accent:#ffffff; }
:root[data-theme="dark"]{ --on-accent:#10161a; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --on-accent:#10161a; }
}


/* An explicit light choice is matched by :root[data-theme="light"] in site.css,
   which outranks a bare :root, so the light palette is restated at that
   specificity rather than relying on order alone. */
:root[data-theme="light"]{
  --bg:#fcfcfb; --bg2:#f4f4f2; --panel:#ffffff; --panel2:#f7f7f5; --panel3:#efefec;
  --line:#e5e6e3; --line2:#d8d9d5;
  --txt:#1a1d23; --dim:#3d434d; --dimmer:#5f6672;
  --accent:#217478; --accent2:#b43f71;
  --on:#12795a; --off:#cfd0cb; --hot:#8f5309; --red:#b23a2f; --cyan:#0d7284;
  --on-accent:#ffffff;
  --shadow:0 1px 2px rgba(26,29,35,.05), 0 10px 30px rgba(26,29,35,.07);
}

/* ...and the case above it, which is the one almost everybody actually gets.
   NO THEME CHOSEN, SYSTEM SET TO LIGHT.

   site.css declares its cool blue-grey light palette as

     @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ … } }

   which is specificity (0,2,0). The warm palette at the top of this file is a
   bare :root, which is (0,1,0). Being loaded afterwards does not help: the more
   specific selector wins whatever the order. So a reader on a light-mode machine
   who has never touched the theme button got warm serif type on a GitHub-blue
   palette, on every page of the site, and the intended paper appeared only after
   clicking the toggle, because THAT sets data-theme and hands the win to the
   block above.

   Which is why the site looked blue locally and warm in production: the same
   pages, one browser with the toggle clicked at some point and one without.

   Recorded as F1 in docs/taste-audit.md, where it was measured across three
   pages and then not fixed. The dark sibling of this block has existed all
   along, which is why dark mode was always right and this went unnoticed. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#fcfcfb; --bg2:#f4f4f2; --panel:#ffffff; --panel2:#f7f7f5; --panel3:#efefec;
    --line:#e5e6e3; --line2:#d8d9d5;
    --txt:#1a1d23; --dim:#3d434d; --dimmer:#5f6672;
    --accent:#217478; --accent2:#b43f71;
    --on:#12795a; --off:#cfd0cb; --hot:#8f5309; --red:#b23a2f; --cyan:#0d7284;
    --on-accent:#ffffff;
    --shadow:0 1px 2px rgba(26,29,35,.05), 0 10px 30px rgba(26,29,35,.07);
  }
}

/* ------------------------------------------------------------- typography */
body{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; letter-spacing:-.015em }
h1{ line-height:1.08 }
h2{ line-height:1.16 }
p,li{ font-family:var(--serif) }
.lede,.sectiondesc,.card .hk,.about p,.how p{ font-family:var(--serif) }

/* Labels, eyebrows and controls stay monospace and letterspaced, which is what
   gives the reference its technical-journal feel against the serif. */
.stepnum,.lab-head,.callout .tag,.quiz .q::before,.narrate .lbl,
.pill,.badge,.chipbtn,.resultnote,.card .topics,.card .foot,
.hero .eyebrow,.sectionhead .count,.pstep .ord,.how .num,
#crumb .ct,#tocProg,.hl-head,.stepnav .dir,.mini,.swlbl,
.btn,.cta,.tbtn,.iconbtn,.langbtn,.opt,#toc .part{
  font-family:var(--mono);
}
.btn,.cta,.tbtn{ letter-spacing:.055em; text-transform:none }
.stepnum,.lab-head,.callout .tag,.quiz .q::before,.narrate .lbl,
.hero .eyebrow,#toc .part{ letter-spacing:.14em }

/* code and anything numeric keeps the mono face */
code,pre,.mono,.big,.cell,.bit,.fbit,svg text,table.tt,table.pipe{ font-family:var(--mono) }

/* the reference sets its measure around 70 characters; prose follows it while
   the labs keep the full column */
.step > p, .chapter > p, .step > ul, .chapter > ul,
.step > ol, .chapter > ol{ max-width:68ch }

/* buttons are pills here, which is the one shape the reference commits to */
.btn,.cta,.tbtn,.chipbtn,.iconbtn,.hl-copy{ border-radius:var(--r-full,999px) }
.langsw{ border-radius:var(--r-full,999px) }


/* The language pair is one control, so the group carries the pill shape and the
   two buttons inside stay square. Previously each button kept its own 10px
   radius, which read as a rounded rectangle parked among circular icon
   buttons. */
.langsw{ border-radius:var(--r-full,999px); overflow:hidden; border:1px solid var(--line2) }
.langsw .langbtn{ border-radius:0; border:none; margin:0 }
.langsw .langbtn + .langbtn{ border-left:1px solid var(--line2) }
.langsw .langbtn.on{ background:var(--accent); color:var(--on-accent) }
.langsw .langbtn:not(.on){ background:transparent; color:var(--dim) }
.langsw .langbtn:not(.on):hover{ background:var(--panel3); color:var(--txt) }
/* icon buttons and the language group must share one height, or the group sits
   two pixels shy of the circles beside it */
#top .iconbtn, #top .langsw{ height:42px; min-height:42px }
@media (max-width:420px){ #top .iconbtn, #top .langsw{ height:40px; min-height:40px } }
#top .langsw{ display:inline-flex; align-items:stretch }
#top .langsw .langbtn{ display:inline-flex; align-items:center; padding:0 12px }


/* A selected step is filled, not tagged with an edge marker. The rest of the
   site is built from rounded, filled shapes, so the sidebar follows. */
#toc a{ border-left:none; border-radius:var(--r-md,10px); padding:7px 11px }
#toc a.active{
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  color:var(--txt); font-weight:600; border-left:none;
}
#toc a.active .n{ color:var(--accent) }
#toc a:hover:not(.active){ background:var(--panel2) }
#toc a:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }

/* Sinhala must keep its own face; it has no serif coverage in the stack above */
html[data-lang="si"] body,
html[data-lang="si"] h1, html[data-lang="si"] h2,
html[data-lang="si"] h3, html[data-lang="si"] h4,
html[data-lang="si"] p,  html[data-lang="si"] li,
html[data-lang="si"] .lede, html[data-lang="si"] .sectiondesc,
html[data-lang="si"] .card .hk{ font-family:var(--sinhala) }

/* a drop cap on the first paragraph of a step, as the reference does on its
   opening paragraph; suppressed for Sinhala, where it mangles the glyphs */
.chapter.active > p:first-of-type::first-letter,
.step.active > p:first-of-type::first-letter{
  initial-letter:2;
  -webkit-initial-letter:2;
  font-weight:600;
  margin-right:.09em;
  color:var(--txt);
}
html[data-lang="si"] .chapter.active > p:first-of-type::first-letter,
html[data-lang="si"] .step.active > p:first-of-type::first-letter{
  initial-letter:normal; -webkit-initial-letter:normal; font-size:inherit; margin-right:0;
}
.cover > p:first-of-type::first-letter,
.hero p:first-of-type::first-letter{ initial-letter:normal; -webkit-initial-letter:normal }