/* ═══════════════════════════════════════════════════════════════════════════════
   nm-theme.css — light and dark, dark by default (11 Sep 2026).

   Two sets of values for the same token names. A page that already draws every colour
   from these tokens gets dark mode by linking this file and adding one line of script
   (nm-theme.js) that applies the remembered choice before first paint.

   Text colours are not inverted: they are chosen so body text sits above 4.5:1 and
   muted text above 3:1 on each surface. The mosaic's twelve colours need no second set;
   measured on #25272C the weakest is 3.2:1 and the palest tints are the strongest.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root{
  --pink:#FF0066; --pink-text:#CC0052; --pink-10:rgba(255,0,102,.08);
  --teal:#33CCCC; --teal-d:#1FA3A3;
  --dark:#2D2D2D; --mid:#5A5A5A; --muted:#8A8A8A; --border:#E8E8E8; --light:#F7F7F5; --white:#FFF;
  --paper:#FBFAF7; --ink:#2A2D34; --rule:#E4E2DC;
  --slate:#6B7280; --card:#FFFFFF; --line:#ECEAE3; --mist:#F2F7F7; --teal-dk:#1FA3A3;
  --orange:#C2410C; --orange-10:rgba(194,65,12,.10); --purple:#7C5CBF; --purple-10:rgba(124,92,191,.12);
  --green:#2E7D32; --green-10:rgba(46,125,50,.10); --amber:#B26A00; --amber-10:rgba(178,106,0,.12);
  --red:#B3261E; --red-10:rgba(179,38,30,.10);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --pink:#FF0066; --pink-text:#FF4D8A; --pink-10:rgba(255,0,102,.16);
  --teal:#33CCCC; --teal-d:#5FD6D6;
  --dark:#F0EEE9; --mid:#C3C0B9; --muted:#8F8C86; --border:#3A3C42; --light:#1A1B1F; --white:#25272C;
  --paper:#2B2D33; --ink:#F0EEE9; --rule:#3A3C42;
  --slate:#A9ADB6; --card:#25272C; --line:#3A3C42; --mist:#1E2A2A; --teal-dk:#5FD6D6;
  --orange:#F4A97A; --orange-10:rgba(244,169,122,.14); --purple:#B9A5F0; --purple-10:rgba(185,165,240,.14);
  --green:#7BD389; --green-10:rgba(123,211,137,.14); --amber:#F2B95C; --amber-10:rgba(242,185,92,.14);
  --red:#FF8A80; --red-10:rgba(255,138,128,.14);
  color-scheme:dark;
}
/* Paper is light. A page printed from the dark theme would be a sheet of ink, so under
   print the light values apply whatever the switch says. */
@media print{
  :root[data-theme="dark"]{
    --pink-text:#CC0052; --pink-10:rgba(255,0,102,.08); --teal-d:#1FA3A3;
    --dark:#2D2D2D; --mid:#5A5A5A; --muted:#8A8A8A; --border:#E8E8E8; --light:#F7F7F5; --white:#FFF;
    --paper:#FBFAF7; --ink:#2A2D34; --rule:#E4E2DC;
    --slate:#6B7280; --card:#FFFFFF; --line:#ECEAE3; --mist:#F2F7F7; --teal-dk:#1FA3A3;
    --orange:#C2410C; --orange-10:rgba(194,65,12,.10); --purple:#7C5CBF; --purple-10:rgba(124,92,191,.12);
    --green:#2E7D32; --green-10:rgba(46,125,50,.10); --amber:#B26A00; --amber-10:rgba(178,106,0,.12);
    --red:#B3261E; --red-10:rgba(179,38,30,.10);
    color-scheme:light;
  }
}
/* The switch. One control, in the topbar, that says what it will do rather than what it is. */
.nm-theme-btn{font-family:'Arimo',Arial,sans-serif;font-size:11.5px;font-weight:700;color:var(--mid);background:transparent;
  border:1.5px solid var(--border);border-radius:20px;padding:5px 11px;cursor:pointer;line-height:1.2}
.nm-theme-btn:hover{color:var(--pink-text);border-color:var(--pink-text)}