/* The look of the whole site. Every page links this sheet and takes its colours and
   fonts only from the variables below, so a theme is one block that redefines them.

   theme.js sets data-theme on <html> from the visitor's saved choice before the page
   draws, and lists the themes for the picker on the homepage; a new theme needs a block
   here and a line there. With no theme chosen the site follows the system's light or
   dark mode. The selectors are [data-theme=…] rather than :root[…] so the picker's
   buttons can each wear their own theme as a preview. The blog carries the light and
   dark colours inline, written by SDF Post, and doesn't take themes. */

:root, [data-theme] {
  --font-body: Georgia, "Times New Roman", serif;
  --font-ui: -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 6px;
}

/* Light, the default */
:root, [data-theme="light"], [data-theme="auto"] {
  --bg: #fdfdfb;          /* the page */
  --surface: #ffffff;     /* cards, tables, boards */
  --panel: #f3f3ef;       /* buttons, inputs, code, table heads */
  --text: #222;
  --muted: #777;
  --rule: #ddd;
  --link: #0b5cad;        /* links and the accent: selected tabs, primary buttons */
  --on-link: #fff;        /* text on the accent */
  --good: #2e7d32;
  --bad: #c62828;
  --warn: #b26a00;
  color-scheme: light;
}

/* Dark, chosen or from the system */
[data-theme="dark"] {
  --bg: #16181d; --surface: #1c1f25; --panel: #23262d;
  --text: #ddd; --muted: #999; --rule: #333;
  --link: #8ab4f8; --on-link: #16181d;
  --good: #81c995; --bad: #f28b82; --warn: #fdd663;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), [data-theme="auto"] {
    --bg: #16181d; --surface: #1c1f25; --panel: #23262d;
    --text: #ddd; --muted: #999; --rule: #333;
    --link: #8ab4f8; --on-link: #16181d;
    --good: #81c995; --bad: #f28b82; --warn: #fdd663;
    color-scheme: dark;
  }
}

/* Sepia: old paper and brown ink */
[data-theme="sepia"] {
  --bg: #f4ecd8; --surface: #fbf6e9; --panel: #ebe1c8;
  --text: #3b2f20; --muted: #806b4c; --rule: #d8c9a6;
  --link: #8b4513; --on-link: #fbf6e9;
  --good: #4f7a28; --bad: #a33a2a; --warn: #9a6200;
  color-scheme: light;
}

/* Solarized, the dark half of Ethan Schoonover's palette */
[data-theme="solarized"] {
  --bg: #002b36; --surface: #073642; --panel: #0b3f4c;
  --text: #93a1a1; --muted: #7f9399; --rule: #1b4e5a;
  --link: #268bd2; --on-link: #fdf6e3;
  --good: #859900; --bad: #dc322f; --warn: #b58900;
  color-scheme: dark;
}

/* Phosphor: a green screen, all in monospace, square corners */
[data-theme="phosphor"] {
  --bg: #0a0f0a; --surface: #0d160e; --panel: #122014;
  --text: #33ff66; --muted: #22b04a; --rule: #1d3d24;
  --link: #8dffaa; --on-link: #0a0f0a;
  --good: #33ff66; --bad: #ff6b5c; --warn: #ffd24d;
  --font-body: var(--font-mono); --font-ui: var(--font-mono);
  --radius: 0;
  color-scheme: dark;
}

/* Page */
*, *::before, *::after { box-sizing: border-box; }
body { font: 17px/1.6 var(--font-body); max-width: 40em; margin: 2.5em auto; padding: 0 1.2em; color: var(--text); background: var(--bg); }
body.wide { max-width: 64em; }   /* cheatsheets, boards and games that need the room */
a { color: var(--link); }
h1 { line-height: 1.25; margin: 0 0 0.3em; }
h2 { font: 600 13px/1.5 var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 2.2em 0 0.6em; }
h3 { font: 600 16px/1.4 var(--font-ui); margin: 1.6em 0 0.4em; }
header, .tagline, .small, footer, .note { font: 14px/1.5 var(--font-ui); color: var(--muted); }
header { margin-bottom: 2em; }
.tagline { margin-top: 0; }
footer { margin-top: 3em; border-top: 1px solid var(--rule); padding-top: 1em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
img, canvas, svg { max-width: 100%; }

/* Boxes and lists */
.box, .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9em 1.1em; margin: 1em 0; }
.box { margin: 1.8em 0; }
.box p { margin: 0.2em 0; }
.box .title { font-size: 1.15em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 0.8em; }
.grid > .card { margin: 0; }
ul.links { list-style: none; padding: 0; margin: 0; }
ul.links li { margin: 0.25em 0; }

/* Code and tables */
code, kbd, pre, .cmd { font-family: var(--font-mono); font-size: 0.88em; }
code, kbd, .cmd { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 0.05em 0.35em; white-space: nowrap; }
pre { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8em 1em; overflow-x: auto; line-height: 1.45; }
pre code { background: none; border: 0; padding: 0; white-space: pre; }
table { width: 100%; border-collapse: collapse; margin: 0.6em 0 1.2em; background: var(--surface); font: 15px/1.5 var(--font-ui); }
th, td { border-bottom: 1px solid var(--rule); padding: 0.45em 0.7em; text-align: left; vertical-align: top; }
th { background: var(--panel); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* Controls */
label { font: 15px/1.5 var(--font-ui); }
input, select, textarea, button { font: 15px var(--font-ui); color: var(--text); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.4em 0.7em; }
textarea { width: 100%; line-height: 1.5; }
input[type=number] { width: 5em; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--link); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--muted); }
button:disabled { opacity: 0.5; cursor: default; }
button.primary, button.active { background: var(--link); border-color: var(--link); color: var(--on-link); }
.row { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; margin: 0.8em 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 1em 0; }
.search { width: 100%; margin: 0.6em 0 1em; }
/* The theme picker on the homepage: each button is drawn in the theme it picks. */
.themes { display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0.5em 0; }
.themes button { background: var(--bg); color: var(--text); border-color: var(--rule); font: 12px/1.3 var(--font-ui); border-radius: var(--radius); display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.5em; }
.themes .swatch { width: 1.2em; height: 0.7em; border-radius: 2px; border: 1px solid var(--rule);
  background: linear-gradient(90deg, var(--link) 0 50%, var(--surface) 50% 100%); }
.themes button[aria-pressed="true"] { outline: 2px solid var(--link); outline-offset: 2px; }

.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.hidden { display: none !important; }