/* ============================================================================= intabulo — the four themes and the fonts they draw with. Only tokens live here: font stacks, and one block of custom properties per theme in light, chosen-dark and system-dark. Nothing in this file draws anything. Everything that draws is in intabulo.css, which is loaded after it — that order is what makes a component able to read a token. It was one file until 2026-07-30, when it passed the house limit of 2000 lines. Four designs times three colour blocks cannot be joined into one selector list because a media query cannot be part of one, so the file only ever grows; splitting it at the seam between tokens and components is the cut that does not have to be made again. A second and never an import rule, which blocks the first paint. ============================================================================= */ /* ============================================================================= intabulo — one stylesheet, one layout, four themes. ============================================================================= THE LAYOUT is "split": a single vertical hairline divides the page, the argument on the left and the working form on the right, with a banded row underneath. Every page uses the same shell — header rule, main, footer rule. THE THEMES are token sets, not second layouts: split dark by default layered near-blacks, warm amber, serif heads workshop light by default parchment and walnut, madder red, ruled blanks studio light by default bright control room, brass, mono figures, left rail — THE DEFAULT DESIGN edition light by default ink on cream, all serif, no boxes at all HOW A THEME IS CHOSEN — the server renders both attributes on : [data-theme="X"] the theme's LIGHT values [data-theme="X"][data-mode="dark"] its DARK values [data-theme="X"]:not([data-mode]) its OWN DEFAULT, so a page rendered without data-mode still looks right [data-mode="auto"] follows the operating system, inside @media (prefers-color-scheme: dark) No JavaScript applies a theme. The attributes are server-rendered, so the page cannot flash the wrong one. EVERY THEME DEFINES EVERY TOKEN. A token used but left out of one theme is an invisible bug that only shows in that theme, so the four token blocks are deliberately written to the same shape, in the same order. Contrast: body inks are 4.5:1 or better against every ground they sit on, control edges 3:1 or better, in all four themes and both modes. Fonts are system stacks only. Nothing is downloaded, ever. ========================================================================== */ /* ============================================================================= 1. FONT STACKS — the same everywhere; a theme picks from them ========================================================================== */ :root { --stack-serif: "Iowan Old Style", "Palatino Linotype", Palatino, P052, "URW Palladio L", "URW Bookman", C059, "Century Schoolbook L", "Nimbus Roman", "DejaVu Serif", "Liberation Serif", Georgia, serif; --stack-book: "New Century Schoolbook", "Century Schoolbook", C059, "URW Bookman", "Nimbus Roman", "Liberation Serif", "DejaVu Serif", Georgia, serif; --stack-sans: "Nimbus Sans", "Helvetica Neue", Helvetica, "Liberation Sans", "DejaVu Sans", Arial, sans-serif; --stack-narrow: "Helvetica Neue Condensed", "Liberation Sans Narrow", "Nimbus Sans Narrow", "Nimbus Sans", "Helvetica Neue", "Liberation Sans", Arial, sans-serif; --stack-mono: "Nimbus Mono PS", "Liberation Mono", "DejaVu Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ============================================================================= 2. THEME "SPLIT" — desaturated layered near-blacks, one warm amber, a serif for headings, panels with a soft border. ========================================================================== */ [data-theme="split"] { /* --- shape, type, density: the same in both modes --- */ --font-body: var(--stack-sans); --font-head: var(--stack-serif); --font-mono: var(--stack-mono); --figure-font: var(--stack-mono); --fs-mark: 0.6875rem; --fs-fine: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-display: clamp(1.875rem, 1.15rem + 2.9vw, 2.5rem); --lh-body: 1.55; --lh-head: 1.15; --body-nums: normal; --figure-nums: tabular-nums; --head-weight: 400; --head-tracking: -0.015em; --display-weight: 400; --display-tracking: -0.02em; --label-font: var(--stack-sans); --label-size: var(--fs-sm); --label-weight: 400; --label-transform: none; --label-tracking: 0; --mark-size: var(--fs-mark); --mark-tracking: 0.12em; --wrap: 1180px; --pad: 1.75rem; --gut: 2.25rem; --radius: 3px; --radius-sm: 2px; --gap: 1rem; --block: 1.25rem; --section: 2rem; --ctl-h: 2.5rem; --ctl-h-sm: 2rem; --ctl-pad-x: 0.75rem; --ctl-radius: 3px; --ctl-size: var(--fs-md); --ctl-fill: var(--well); --ctl-border: 1px solid var(--edge); --ctl-border-bottom: 1px solid var(--edge); --panel-fill: var(--panel-bg); --panel-border: 1px solid var(--line); --panel-rule: 1px solid var(--line); --panel-rail: 1px solid var(--line); --panel-radius: 3px; --panel-pad: 1.5rem; --panel-shadow: none; --split-rule: 1px solid var(--line); --btn-font: var(--stack-sans); --btn-size: var(--fs-md); --btn-weight: 500; --btn-transform: none; --btn-tracking: 0; --btn-radius: 3px; --btn-pad-x: 1.25rem; --focus-w: 2px; --focus-offset: 2px; --motion: 0.14s; /* --- light values --- */ color-scheme: light; --bg: #f6f6f3; --bg-2: #fbfbf9; --panel-bg: #ffffff; --panel-bg-2: #f0f0eb; --well: #eceae5; --line: #dcdcd5; --line-soft: #e8e8e2; --edge: #767670; --ink: #1b1d20; --ink-2: #4a4f55; --ink-3: #585e65; --accent: #8a5c12; --accent-ink: #fffdf6; --accent-strong: #6f4a0d; --accent-soft: rgba(138, 92, 18, 0.10); --ok: #1c6f47; --warn: #74570e; --bad: #a52f24; --grain-a: transparent; --grain-b: transparent; --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } /* dark: chosen, or the theme's own default when no mode is rendered */ [data-theme="split"][data-mode="dark"], [data-theme="split"]:not([data-mode]) { color-scheme: dark; --bg: #131519; --bg-2: #171a1f; --panel-bg: #191c21; --panel-bg-2: #1d2126; --well: #1d2126; --line: #2b3037; --line-soft: #23272d; --edge: #6b727c; --ink: #e6e3dc; --ink-2: #a9afb7; --ink-3: #9aa1a9; --accent: #d9a85c; --accent-ink: #17140c; --accent-strong: #e8bd7d; --accent-soft: rgba(217, 168, 92, 0.13); --ok: #6fce9f; --warn: #e0bd57; --bad: #f08585; --grain-a: transparent; --grain-b: transparent; --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } /* ============================================================================= 3. THEME "WORKSHOP" — parchment and walnut, deep red-brown, serif heads, hairline rules instead of heavy borders, one faint paper grain. ========================================================================== */ [data-theme="workshop"] { --font-body: var(--stack-sans); --font-head: var(--stack-serif); --font-mono: var(--stack-mono); --figure-font: var(--stack-mono); --fs-mark: 0.6875rem; --fs-fine: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-display: clamp(2.25rem, 1.35rem + 3.6vw, 3.4rem); --lh-body: 1.55; --lh-head: 1.2; --body-nums: normal; --figure-nums: tabular-nums; --head-weight: 400; --head-tracking: -0.008em; --display-weight: 400; --display-tracking: -0.02em; --label-font: var(--stack-mono); --label-size: var(--fs-mark); --label-weight: 700; --label-transform: uppercase; --label-tracking: 0.14em; --mark-size: var(--fs-mark); --mark-tracking: 0.16em; --wrap: 1180px; --pad: 1.75rem; --gut: 2rem; --radius: 2px; --radius-sm: 2px; --gap: 0.875rem; --block: 1.125rem; --section: 1.75rem; --ctl-h: 2.25rem; --ctl-h-sm: 2rem; --ctl-pad-x: 0; --ctl-radius: 0; --ctl-size: var(--fs-md); --ctl-fill: transparent; --ctl-border: 0 solid transparent; --ctl-border-bottom: 1px solid var(--edge); --panel-fill: var(--panel-bg); --panel-border: 1px solid var(--line); --panel-rule: 1px solid var(--line); --panel-rail: 1px solid var(--line); --panel-radius: 2px; --panel-pad: 1.4rem; --panel-shadow: none; --split-rule: 1px solid var(--line); --btn-font: var(--stack-sans); --btn-size: var(--fs-fine); --btn-weight: 700; --btn-transform: uppercase; --btn-tracking: 0.16em; --btn-radius: 2px; --btn-pad-x: 1.15rem; --focus-w: 2px; --focus-offset: 2px; --motion: 0.12s; /* --- light: the default for this theme --- */ color-scheme: light; --bg: #ebe3d2; --bg-2: #f2ecdd; --panel-bg: #f4eee0; --panel-bg-2: #eae2ce; --well: #f4eee0; --line: #cdbfa6; --line-soft: #dcd1b9; --edge: #7d6b4d; --ink: #2b2018; --ink-2: #574839; --ink-3: #61513e; --accent: #8c2f39; --accent-ink: #f7f1e4; --accent-strong: #6f2029; --accent-soft: rgba(140, 47, 57, 0.10); --ok: #2a6a3a; --warn: #7a5510; --bad: #9c2b23; --grain-a: rgba(70, 52, 32, 0.035); --grain-b: rgba(70, 52, 32, 0.030); --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } [data-theme="workshop"][data-mode="dark"] { color-scheme: dark; --bg: #1b1510; --bg-2: #221b14; --panel-bg: #241d16; --panel-bg-2: #2c241b; --well: #241d16; --line: #4a3c2e; --line-soft: #332920; --edge: #8a765e; --ink: #ebe0ca; --ink-2: #bcab91; --ink-3: #ae9d85; --accent: #e0868d; --accent-ink: #20130e; --accent-strong: #eda3a8; --accent-soft: rgba(224, 134, 141, 0.13); --ok: #7cc98f; --warn: #dcb55c; --bad: #ef8f86; --grain-a: rgba(255, 242, 216, 0.030); --grain-b: rgba(255, 242, 216, 0.026); --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } /* ============================================================================= 4. THEME "STUDIO" — the default, and light by default. A bright control room with a brass accent, compact drawn controls, mono with tabular numerals, a thin accent rail on the left. Its charcoal is still there, one click away, for a reader who asks for dark. ========================================================================== */ /* `html:not([data-theme])` is a safety net, not the mechanism: a page served before the attribute is rendered still gets the default theme rather than no theme at all. It rides on studio because studio is what `THEME_DEFAULT` in app/theme.py says, and the two have to name the same design. It is never the way a theme is chosen. */ [data-theme="studio"], html:not([data-theme]) { --font-body: var(--stack-sans); --font-head: var(--stack-narrow); --font-mono: var(--stack-mono); --figure-font: var(--stack-mono); --fs-mark: 0.65625rem; --fs-fine: 0.75rem; --fs-sm: 0.78125rem; --fs-md: 0.9375rem; --fs-lg: 1.09375rem; --fs-xl: 1.3125rem; --fs-display: clamp(2rem, 1.15rem + 3.4vw, 2.625rem); --lh-body: 1.5; --lh-head: 1.2; --body-nums: normal; --figure-nums: tabular-nums; --head-weight: 700; --head-tracking: 0.01em; --display-weight: 700; --display-tracking: -0.012em; --label-font: var(--stack-mono); --label-size: var(--fs-mark); --label-weight: 400; --label-transform: uppercase; --label-tracking: 0.14em; --mark-size: var(--fs-mark); --mark-tracking: 0.16em; --wrap: 1180px; --pad: 1.5rem; --gut: 1.5rem; --radius: 0; --radius-sm: 0; --gap: 0.9rem; --block: 1rem; --section: 1.25rem; --ctl-h: 2.5rem; --ctl-h-sm: 2rem; --ctl-pad-x: 0.75rem; --ctl-radius: 0; --ctl-size: var(--fs-md); --ctl-fill: var(--well); --ctl-border: 1px solid var(--edge); --ctl-border-bottom: 1px solid var(--edge); --panel-fill: var(--panel-bg); --panel-border: 1px solid var(--line); --panel-rule: 1px solid var(--line); --panel-rail: 2px solid var(--accent); --panel-radius: 0; --panel-pad: 1rem; --panel-shadow: var(--shadow); --split-rule: 2px solid var(--accent); --btn-font: var(--stack-mono); --btn-size: var(--fs-mark); --btn-weight: 400; --btn-transform: uppercase; --btn-tracking: 0.16em; --btn-radius: 0; --btn-pad-x: 1.25rem; --focus-w: 2px; --focus-offset: 2px; --motion: 0.15s; /* --- light: a bright control room, not an inverted photograph --- */ color-scheme: light; --bg: #e4e7ea; --bg-2: #eef0f2; --panel-bg: #ffffff; --panel-bg-2: #f7f9fa; --well: #f1f4f6; --line: #d2d7dc; --line-soft: #dfe3e7; --edge: #6c757e; --ink: #12161a; --ink-2: #4a5259; --ink-3: #525a61; --accent: #7a5c13; --accent-ink: #ffffff; --accent-strong: #5f4709; --accent-soft: rgba(122, 92, 19, 0.12); --ok: #1c6f47; --warn: #74570e; --bad: #a52f24; --grain-a: transparent; --grain-b: transparent; --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 26px -20px rgba(20, 30, 40, 0.55); --well-shadow: 0 1px 2px rgba(20, 30, 40, 0.07) inset; --caret: url("data:image/svg+xml;utf8,"); } /* dark only when the reader asks: studio's light values above are its default, so this block must NOT claim `:not([data-mode])` — that is the one line that decides which shade a first-time visitor sees. */ [data-theme="studio"][data-mode="dark"] { color-scheme: dark; --bg: #0a0b0d; --bg-2: #101215; --panel-bg: #15181c; --panel-bg-2: #1a1e22; --well: #0d0f11; --line: #252b31; --line-soft: #1c2126; --edge: #6a747d; --ink: #e9e6e0; --ink-2: #a4abb2; --ink-3: #98a0a7; --accent: #cfa54a; --accent-ink: #16120a; --accent-strong: #e0b96a; --accent-soft: rgba(207, 165, 74, 0.16); --ok: #6fce9f; --warn: #e0bd57; --bad: #f08585; --grain-a: transparent; --grain-b: transparent; --shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 12px 34px -18px rgba(0, 0, 0, 0.9); --well-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; --caret: url("data:image/svg+xml;utf8,"); } /* ============================================================================= 5. THEME "EDITION" — ink on cream, serif throughout, no panel borders at all: hairline rules and space part the sections, fields are ruled blanks. ========================================================================== */ [data-theme="edition"] { --font-body: var(--stack-serif); --font-head: var(--stack-serif); --font-mono: var(--stack-mono); --figure-font: var(--stack-mono); --fs-mark: 0.702rem; --fs-fine: 0.79rem; --fs-sm: 0.889rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.266rem; --fs-display: clamp(2.028rem, 1.35rem + 2.7vw, 2.566rem); --lh-body: 1.5; --lh-head: 1.2; --body-nums: oldstyle-nums proportional-nums; --figure-nums: lining-nums tabular-nums; --head-weight: 400; --head-tracking: -0.008em; --display-weight: 400; --display-tracking: -0.012em; --label-font: var(--stack-book); --label-size: var(--fs-mark); --label-weight: 400; --label-transform: uppercase; --label-tracking: 0.14em; --mark-size: var(--fs-mark); --mark-tracking: 0.14em; --wrap: 64rem; --pad: 2.25rem; --gut: 2.25rem; --radius: 0; --radius-sm: 0; --gap: 1rem; --block: 1.1rem; --section: 1.6rem; --ctl-h: 2.25rem; --ctl-h-sm: 1.9rem; --ctl-pad-x: 0; --ctl-radius: 0; --ctl-size: var(--fs-md); --ctl-fill: transparent; --ctl-border: 0 solid transparent; --ctl-border-bottom: 1px solid var(--edge); --panel-fill: transparent; --panel-border: 0 solid transparent; --panel-rule: 1px solid var(--line); --panel-rail: 0 solid transparent; --panel-radius: 0; --panel-pad: 1.5rem 0 0; --panel-shadow: none; --split-rule: 1px solid var(--line); --btn-font: var(--stack-book); --btn-size: var(--fs-sm); --btn-weight: 400; --btn-transform: uppercase; --btn-tracking: 0.14em; --btn-radius: 0; --btn-pad-x: 1.9rem; --focus-w: 2px; --focus-offset: 3px; --motion: 0.12s; /* --- light: the default for this theme --- */ color-scheme: light; --bg: #f2ecde; --bg-2: #f7f2e6; --panel-bg: #f2ecde; --panel-bg-2: #eae3d1; --well: #f2ecde; --line: #cbc0ab; --line-soft: #ded5c2; --edge: #877a60; --ink: #211d18; --ink-2: #5d5346; --ink-3: #665c4e; --accent: #8e1f17; --accent-ink: #f7f2e6; --accent-strong: #6f150f; --accent-soft: rgba(142, 31, 23, 0.09); --ok: #2a6a3a; --warn: #77550f; --bad: #9c2b23; --grain-a: transparent; --grain-b: transparent; --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } [data-theme="edition"][data-mode="dark"] { color-scheme: dark; --bg: #16120e; --bg-2: #1d1813; --panel-bg: #16120e; --panel-bg-2: #1d1813; --well: #16120e; --line: #423a30; --line-soft: #2b241d; --edge: #8a7f6b; --ink: #efe7d8; --ink-2: #a79e8d; --ink-3: #9e9483; --accent: #e08877; --accent-ink: #1a100c; --accent-strong: #ef9382; --accent-soft: rgba(224, 136, 119, 0.12); --ok: #7cc98f; --warn: #dcb55c; --bad: #ef8f86; --grain-a: transparent; --grain-b: transparent; --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } /* ============================================================================= 6. MODE "AUTO" — the same dark values, handed to the operating system. Written out per theme because a media query cannot join a selector list. ========================================================================== */ @media (prefers-color-scheme: dark) { [data-theme="split"][data-mode="auto"] { color-scheme: dark; --bg: #131519; --bg-2: #171a1f; --panel-bg: #191c21; --panel-bg-2: #1d2126; --well: #1d2126; --line: #2b3037; --line-soft: #23272d; --edge: #6b727c; --ink: #e6e3dc; --ink-2: #a9afb7; --ink-3: #9aa1a9; --accent: #d9a85c; --accent-ink: #17140c; --accent-strong: #e8bd7d; --accent-soft: rgba(217, 168, 92, 0.13); --ok: #6fce9f; --warn: #e0bd57; --bad: #f08585; --grain-a: transparent; --grain-b: transparent; --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } [data-theme="workshop"][data-mode="auto"] { color-scheme: dark; --bg: #1b1510; --bg-2: #221b14; --panel-bg: #241d16; --panel-bg-2: #2c241b; --well: #241d16; --line: #4a3c2e; --line-soft: #332920; --edge: #8a765e; --ink: #ebe0ca; --ink-2: #bcab91; --ink-3: #ae9d85; --accent: #e0868d; --accent-ink: #20130e; --accent-strong: #eda3a8; --accent-soft: rgba(224, 134, 141, 0.13); --ok: #7cc98f; --warn: #dcb55c; --bad: #ef8f86; --grain-a: rgba(255, 242, 216, 0.030); --grain-b: rgba(255, 242, 216, 0.026); --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } [data-theme="studio"][data-mode="auto"] { color-scheme: dark; --bg: #0a0b0d; --bg-2: #101215; --panel-bg: #15181c; --panel-bg-2: #1a1e22; --well: #0d0f11; --line: #252b31; --line-soft: #1c2126; --edge: #6a747d; --ink: #e9e6e0; --ink-2: #a4abb2; --ink-3: #98a0a7; --accent: #cfa54a; --accent-ink: #16120a; --accent-strong: #e0b96a; --accent-soft: rgba(207, 165, 74, 0.16); --ok: #6fce9f; --warn: #e0bd57; --bad: #f08585; --grain-a: transparent; --grain-b: transparent; --shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 12px 34px -18px rgba(0, 0, 0, 0.9); --well-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; --caret: url("data:image/svg+xml;utf8,"); } [data-theme="edition"][data-mode="auto"] { color-scheme: dark; --bg: #16120e; --bg-2: #1d1813; --panel-bg: #16120e; --panel-bg-2: #1d1813; --well: #16120e; --line: #423a30; --line-soft: #2b241d; --edge: #8a7f6b; --ink: #efe7d8; --ink-2: #a79e8d; --ink-3: #9e9483; --accent: #e08877; --accent-ink: #1a100c; --accent-strong: #ef9382; --accent-soft: rgba(224, 136, 119, 0.12); --ok: #7cc98f; --warn: #dcb55c; --bad: #ef8f86; --grain-a: transparent; --grain-b: transparent; --shadow: none; --well-shadow: none; --caret: url("data:image/svg+xml;utf8,"); } }