/* =============================================================================
   site.css — the shared design system.
   Tokens are lifted from the microprocessor lesson so every page reads as one
   system. Three-state theme: system preference wins until the reader chooses.
   ========================================================================== */
:root{
  --bg:#0d1117; --bg2:#080b10; --panel:#151c25; --panel2:#1b2531; --panel3:#222d3b;
  --line:#2b3644; --line2:#3a4757;
  --txt:#e6edf3; --dim:#94a3b4; --dimmer:#6b7887;
  --accent:#6ea8ff; --accent2:#b48cff;
  --on:#3fd88a; --off:#39424f; --hot:#ffb454; --red:#ff6b6b; --cyan:#4fd1e0;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}
:root[data-theme="light"]{
  --bg:#f6f8fb; --bg2:#eef2f7; --panel:#ffffff; --panel2:#f3f6fa; --panel3:#e8eef6;
  --line:#dbe3ec; --line2:#c4d0de;
  --txt:#111a24; --dim:#54626f; --dimmer:#7a8794;
  --accent:#1f6feb; --accent2:#8250df;
  --on:#12a150; --off:#c6ced8; --hot:#d97706; --red:#d92d20; --cyan:#0c8599;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f6f8fb; --bg2:#eef2f7; --panel:#ffffff; --panel2:#f3f6fa; --panel3:#e8eef6;
    --line:#dbe3ec; --line2:#c4d0de;
    --txt:#111a24; --dim:#54626f; --dimmer:#7a8794;
    --accent:#1f6feb; --accent2:#8250df;
    --on:#12a150; --off:#c6ced8; --hot:#d97706; --red:#d92d20; --cyan:#0c8599;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  }
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--txt); font-family:var(--sans);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; letter-spacing:-.02em}
code{font-family:var(--mono); font-size:.88em; background:var(--panel3);
  padding:.12em .4em; border-radius:5px; border:1px solid var(--line)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}


/* =============================================================================
   Sinhala support.
   No web fonts are loaded, so this leans on the Sinhala faces that ship with
   each platform: Noto Sans Sinhala on Android/Linux/ChromeOS, Sinhala Sangam MN
   on macOS/iOS, Iskoola Pota on Windows. Sinhala glyphs are taller and carry
   more detail than Latin, so they need a little more size and line height to
   stay readable at the same apparent weight.
   ========================================================================== */
:root{
  --sinhala: "Noto Sans Sinhala", "Iskoola Pota", "Sinhala Sangam MN",
             "Nirmala UI", "Noto Serif Sinhala", sans-serif;
}
html[data-lang="si"] body{
  font-family: var(--sinhala);
  font-size: 17.5px;
  line-height: 1.82;
}
html[data-lang="si"] h1,
html[data-lang="si"] h2,
html[data-lang="si"] h3,
html[data-lang="si"] h4{ font-family: var(--sinhala); line-height:1.4; letter-spacing:0 }
html[data-lang="si"] .lede,
html[data-lang="si"] .card .hk,
html[data-lang="si"] .sectiondesc,
html[data-lang="si"] p{ line-height:1.85 }
/* keep anything meant to be read as code or a number in the mono face, since
   technical terms and numerals stay in English throughout */
html[data-lang="si"] code,
html[data-lang="si"] pre,
html[data-lang="si"] .mono,
html[data-lang="si"] .big,
html[data-lang="si"] .badge,
html[data-lang="si"] .cell,
html[data-lang="si"] .bit,
html[data-lang="si"] svg text{ font-family: var(--mono) }
/* Sinhala words are long; give pills and nav room rather than clipping */
html[data-lang="si"] .pill{ letter-spacing:0; text-transform:none; font-size:.7rem }
html[data-lang="si"] .stepnum,
html[data-lang="si"] .lab-head,
html[data-lang="si"] .callout .tag,
html[data-lang="si"] .quiz .q::before{ letter-spacing:.02em; text-transform:none }
html[data-lang="si"] .narrate .lbl{ letter-spacing:.02em; text-transform:none }

/* ------------------------------------------------------------ the switcher */
.langsw{display:inline-flex; border:1px solid var(--line2); border-radius:8px; overflow:hidden; flex:none}
.langbtn{font:inherit; font-size:.78rem; font-weight:600; color:var(--dim); background:transparent;
  border:none; padding:5px 10px; cursor:pointer; line-height:1.6}
.langbtn + .langbtn{border-left:1px solid var(--line2)}
.langbtn:hover{color:var(--txt)}
.langbtn.on{background:var(--accent); color:#fff}
.langbtn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
html[data-lang="si"] .langbtn{font-family:var(--sinhala)}