/* architecture.tools — global stylesheet (warm sheet theme) All pages import this. Override locally only when necessary. THEME, in one breath: warm paper instead of cool white; each page is a sheet lifted on that paper; controls are raised "keys" that depress to the family accent when chosen; the fields you type into are recessed wells; structural lines are soft warm hairlines; the accent is reserved for selection + the answer, black for everything secondary. PALETTE: the canonical color tokens (family accents, ink, hairline, the grounds) live in tokens.css, imported below — including --paper, the brand's warm white, defined there and only there. This sheet's working surfaces are --card (the sheet itself, a hair off --paper) and --gray-100 (the page field behind it). Each page declares its tool family on the root element — — and the accent system follows in both schemes; a page that declares nothing gets drafting (the blueprint anchor). The dark scheme at the end of this sheet recuts surfaces, text, lines and shadows once for every page; only the family accent differs. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap'); @import url('tokens.css'); /* canonical palette — resolves relative to this file */ /* A static preview loader here can drop the first rule after @import; this harmless guard absorbs it. Safe to keep in production. */ .theme-guard { color: inherit; } /* ---- FAMILY SELECTION ---- tokens.css defines one accent family per tool genre (see docs/In Progress/calculator-suite-map.md). --family / --family-tint / --family-dark are the three hooks the engine tokens below consume; pages pick a family with data-family on . */ :root, [data-family="drafting"] { --family: var(--drafting); --family-tint: var(--drafting-tint); --family-dark: var(--drafting-dark); } [data-family="picker"] { --family: var(--picker); --family-tint: var(--picker-tint); --family-dark: var(--picker-dark); } [data-family="egress"] { --family: var(--egress); --family-tint: var(--egress-tint); --family-dark: var(--egress-dark); } [data-family="building"] { --family: var(--building); --family-tint: var(--building-tint); --family-dark: var(--building-dark); } [data-family="envelope"] { --family: var(--envelope); --family-tint: var(--envelope-tint); --family-dark: var(--envelope-dark); } [data-family="accessibility"] { --family: var(--accessibility); --family-tint: var(--accessibility-tint); --family-dark: var(--accessibility-dark); } [data-family="material"] { --family: var(--material); --family-tint: var(--material-tint); --family-dark: var(--material-dark); } /* ---- TOKENS ---- */ :root { /* both schemes are first-class — UA widgets/scrollbars follow the page */ color-scheme: light dark; /* Warm neutral foundation. Text, hairlines and --paper come from the canonical palette (tokens.css); the page field behind the sheet is --gray-100 (see body). */ --card: #fbfaf6; /* the sheet / input / control surface */ --card-2: #f2efe7; /* inset boxes (priority / note) */ --ink: var(--ink-text); /* primary text + heavy rules */ --ink-2: #5b5346; /* secondary text */ --ink-3: #8a8170; /* micro-labels */ /* Legacy names, re-valued warm (existing rules keep working) */ --black: var(--ink); --gray-900: #2a241c; --gray-800: var(--gray-900); --gray-700: #5b5346; --gray-600: #6b6354; --gray-500: #8a8170; --gray-400: #a89e8a; --gray-300: #c6bdac; --gray-200: #d8d1c1; --gray-100: #e7e0d1; --gray-50: #f1ece0; --white: var(--card); /* Family accent — selection + the answer (see FAMILY SELECTION above) */ --accent: var(--family); --accent-ink: #fff; /* text on accent */ --accent-soft: var(--family-tint); --selected-bg: var(--accent); --accent-light: var(--accent-soft); /* Answer surfaces (result wells) share ONE tone knob — a half-step below the sheet, well short of the page field. Diagram label halos read it too (e.g. svg.nl text), so a retint never fringes. */ --answer-surface: color-mix(in srgb, var(--card) 50%, var(--card-2)); /* Number-line figure strokes — numberline.js routes its SVG through these so the figure inverts with the scheme. Unused (harmless) off the calculator pages. */ --nl-ink: #0a0a0a; --nl-hatch: #0a0a0a; --nl-tick: #bbb; --nl-axis: #999; /* Type */ --font-body: 'Verlag', 'Jost', 'Futura PT', sans-serif; /* Scale */ --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.625rem; --text-2xl: 2.5rem; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1.25rem; --space-xl: 2rem; --space-2xl: 3rem; /* Soft warm hairlines (was hard near-black); --rule is the palette's canonical hairline */ --rule: var(--hairline); --rule-2: #bbb2a2; --border-light: 1px solid var(--rule); --border-mid: 1px solid var(--rule-2); --border-heavy: 2px solid var(--ink); /* Depth — one tactile material across sheet, keys and wells */ --radius: 0px; --shadow-card: 0 1px 2px rgba(58,48,32,.05), 0 12px 26px rgba(58,48,32,.11), 0 2px 6px rgba(58,48,32,.05); --shadow-key: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(82,64,32,.18), 0 2px 3px rgba(82,64,32,.13); --shadow-key-hover: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 rgba(82,64,32,.16), 0 4px 7px rgba(82,64,32,.16); --shadow-press: inset 0 2px 4px rgba(0,0,0,.40), inset 0 -1px 0 rgba(255,255,255,.07); --shadow-well: inset 0 2px 3px rgba(82,64,32,.16), inset 0 -1px 0 rgba(255,255,255,.45); } /* ---- RESET ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ONE base size site-wide (the picker's iterated 18px is the reference); pages must not override it — the whole rem scale rides on it. */ html { font-size: 18px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* interactive controls are real