/* tokens.css — the shared "Newsprint" identity: vendored fonts + the full colour/spacing token set (light + dark). Linked directly by every shell that wears it (mobile/index.html, test-engine.html), ahead of that shell's own stylesheet — never @imported from inside one, which would hide it behind a round trip. Font URLs are relative to this file, which lives at the web root next to fonts/. */ /* ---- Self-hosted fonts (vendored WOFF2, Latin subset) ------------------- */ /* Newsreader (serif) · Inter (sans) · JetBrains Mono (cipher). All SIL OFL 1.1 (licenses in fonts/OFL-*.txt). Vendored so the "Newsprint" identity renders identically on every OS instead of falling back to system-ui/serif stacks. * * font-display splits by whether the face is on the FIRST PAINT: * * optional the three faces the home screen paints with. `swap` guarantees a * flash: the browser paints Georgia/system-ui and then reflows into * the real face. `optional` never swaps — the face either wins its * 100ms block period or sits out the page load. Preloading it (see * the shells' ) is what makes it win: it is already in the * memory cache when the block period starts. No flash, no reflow. * * swap everything else. These first render on a screen you navigate to, * by which point the face has long since downloaded, so there is * nothing to swap; `swap` just keeps them from being skipped for a * whole session on a slow first load (which `optional` allows). * * The paper puzzles draw Inter and JetBrains Mono onto a canvas, and await * document.fonts.load() over them before the first draw — that is a fetch, not a * render, so font-display does not gate it. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 700; font-display: optional; src: url("fonts/newsreader-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: optional; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: optional; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); } :root { --paper-bg: #efeae0; --surface: #f7f4ec; --surface-2: #e9e3d6; --ink: #201b17; --ink-soft: #4a4038; --muted: #837a6e; --rule: #d8cfbf; --rule-strong: #c3b9a4; --accent: #b4552d; --accent-press: #97431f; --accent-soft: rgba(180, 85, 45, 0.13); --win: #4b7a3f; --lose: #b02a1f; /* the losing counterpart of --win (Mines, Inertia) */ --radius: 3px; --radius-sm: 2px; --canvas-paper: #faf7f0; /* printed-sheet paper; always light, both themes */ /* Engine line-grid style (the flat Cube-look): ink colour + stroke width for every game's grid/outlines. Light-reference values — the engine's dark mode lightness-flips the ink (black -> white). */ --engine-line-color: #000000; --engine-line-width: 1; /* ---- DOM-rendered boards ------------------------------------------------ Games with `renderer: "dom"` are drawn in SVG by web/js/boards/ and get their colours from HERE, not from C's game_colours(). That is the point of the split: a canvas-rendered game's palette is computed in C against a LIGHT reference and then algorithmically lightness-flipped for dark mode (see softenPrimary/flipLightness in web/js/engine/engine.js), so the dark palette is a derivation and cannot be art-directed. These can. */ --board-paper: var(--canvas-paper); /* the sheet the board is drawn on */ --board-ink: var(--ink); /* digits, glyphs, text */ --board-line: var(--rule-strong); /* thin grid lines */ --board-rule: var(--ink); /* heavy rules (block/region borders) */ --board-given: var(--ink); /* an immutable clue */ --board-user: var(--accent); /* a value YOU entered */ --board-pencil: var(--muted); /* pencil marks */ --board-sel: #dad8d4; /* selection wash (was sel_accent in C) */ --board-err: #e3b8b8; /* error wash (was err_accent in C) */ --board-tile: var(--surface); /* a movable piece (Fifteen) */ --board-tile-edge: var(--rule-strong); /* Fifteen's sliding block, extruded: face + the two lit/shaded side faces. In C this was draw_cube(), ~50 lines of cabinet projection. */ --board-block: var(--accent); --board-block-top: #d98a5f; /* lit edge */ --board-block-side: #8f3f1e; /* shaded edge */ --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --sidebar-w: 238px; --head-h: 56px; /* shared height: sidebar brand + play/maker header on one row */ --sw-grid: #b4552d; --sw-path: #3f6f86; --sw-region: #5f7a3a; --sw-action: #a87c2e; --sw-deduction: #7a5570; --sw-paper: #9a6a4a; --sw-other: #837a6e; } [data-theme="dark"] { --paper-bg: #14110d; --surface: #1e1a15; --surface-2: #29231b; --ink: #ece4d7; --ink-soft: #cfc5b5; --muted: #988d7c; --rule: #332c22; --rule-strong: #473c2e; --accent: #d9793a; --accent-press: #ec9052; --accent-soft: rgba(217, 121, 58, 0.16); --win: #7ba86a; --lose: #d9584a; --sw-grid: #c76a3d; --sw-path: #5a90a8; --sw-region: #7d9a54; --sw-action: #c39a4a; --sw-deduction: #a07894; --sw-paper: #c08a63; --sw-other: #988d7c; /* DOM-rendered boards. These are CHOSEN for dark, not derived from the light palette — which is exactly what C's canvas path cannot do, since it computes one palette against a light reference and flips its lightness. A wash that reads right on cream is not a lightness-flip away from one that reads right on near-black. */ --board-paper: #1a1712; --board-sel: #3a352c; --board-err: #4a2b2b; --board-tile: #2b2620; --board-block-top: #ec9052; --board-block-side: #8a4520; }