/* ===================================================================== theme.css -- Praxis design tokens STAGE 1.1: CSS variable definitions only. No component styles, no layout rules. Component styles arrive with their respective views. ===================================================================== */ :root { /* Fonts THE HOUR, REFINED (v3.232): the UI face leads with the SF system stack -- "twilight's soul, Cupertino's tailoring". DM Sans stays in the stack as the non-Apple fallback, so no glyph coverage is lost. --font-serif (Cormorant Garamond) keeps display/titles/the reader's words; --font-mono (DM Mono) keeps TRUE meta only, per TY-1. Both are unchanged. */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'DM Sans', sans-serif; --font-mono: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace; /* ===================================================================== UMBER palette (June 2026 re-skin) -- design/praxis-umber-mockup.html. Dual-ground: this :root carries the BRIGHT-page values for the shared tokens; the [data-ground="dark"] block below re-points the ~15 ground-sensitive shared tokens to the dark study set. New Umber-named tokens are ADDED here; existing token NAMES are kept and re-pointed, never renamed or deleted. The --tradition-* renderer feed is intentionally left at its values (tradition retint is a separate, deferred task). UPDATED (B2, 2026-07-19): --subtheory-* is NO LONGER frozen at its 9b-ii values. Preston unfroze it for the ruled RD-1 batch; it collapsed 16 -> the five jewel tokens and was RE-FROZEN at five in the same commit. The mapping and the re-freeze notice live at the --subtheory-* block below. */ /* -- dark study surfaces -- RE-POINTED to THE HOUR, REFINED (v3.232). Umber's brown study (#2f1c0e family) becomes the twilight arc. Names are kept, values re-pointed, so every existing consumer crosses over without being edited. Panels are tuned to the MID-ARC so they read correctly at any scroll position on the gradient (a single opaque value cannot match both the #191F33 zenith and the #29200F horizon; mid-arc is the honest compromise, and depth is carried by the shadow trio, not by panel hue). */ --ground: #191F33; --ground-grad: var(--hour-lamp), var(--hour-horizon), var(--hour-arc); --surface-d: #232838; --surface-d2: #2B3042; --sunk-d: #12151F; --dark-2: #1B1F2D; /* -- new Umber: bright page surfaces -- */ --page: #f4efe4; /* R-POLISH S0: v1.1 canon paper (was #f8f1e1) */ --page-2: #fcf6e8; --meta: #9a7e4e; /* THE HOUR: the on-dark text ramp is the cream ramp, not Umber's honey. */ --text-d: var(--on-ground); --muted: var(--on-ground-2); /* -- new Umber: accents -- */ --teal: #2e8a93; --thread: #c2a463; --gold-soft: var(--gold-ember); --gold-ink: #855410; --register-marginalia: var(--teal); --register-journal: #7d6db0; --register-question: #3a5a8a; --grad-soft: linear-gradient(92deg, #e7c46a, #3aa0a9); /* -- new Umber: glass / lines / shadows -- */ /* THE HOUR: glass/lines re-pointed off Umber brown onto the twilight world. Chrome fills stay SOLID-ENOUGH to satisfy the nav no-blur-bleed guardrail; only the nav itself frosts (§2 of the canon), and it is not an ancestor of any absolutely-positioned overflow child. */ --glass-bar: linear-gradient(180deg, rgba(21,24,38,.88), rgba(16,19,30,.78)); --glass-pill: rgba(21,24,38,.78); --glass-border: var(--hairline); --border-2: rgba(240,235,223,.16); --line-page: rgba(36,23,16,.16); --line-page-2: rgba(36,23,16,.30); --wash-page: rgba(36,23,16,.05); --shadow-d: 0 3px 10px rgba(0,0,0,.34), 0 14px 38px rgba(0,0,0,.32); --shadow-page: 3px 5px 12px rgba(28,18,9,.10), 8px 16px 32px rgba(28,18,9,.08); /* Fixed dark scrim for modal/overlay backdrops -- NOT --ink-derived, so it stays a darkening veil no matter which ground --ink resolves to. */ --scrim: rgba(15,9,4,.6); /* ===================================================================== THE HOUR, REFINED -- the ratified world (v3.232, July 19 2026). Source of truth: docs/studio/praxis-the-hour-refined.html (its header comment carries the full token spec). Design history, including the six-world exploration that ratified this one: docs/studio/praxis-illuminated-worlds.html. PG-1 is amended to v2 by this ship: "One twilight world; printed pages are where you work; depth is meaning." Umber's brown study becomes a twilight arc; the working surfaces become vellum PAGES that sit ON that world rather than replacing it. The Umber tokens above are KEPT and re-pointed below (never renamed), so all 4,899 var() consumers in components.css cross over without being touched individually. ===================================================================== */ /* -- the ground: a twilight arc, night-blue falling to ember-brown -- */ --hour-1: #191F33; /* zenith, night blue */ --hour-2: #1B1D2B; /* the turn */ --hour-3: #241C14; /* warming */ --hour-4: #29200F; /* horizon, ember brown */ --hour-lamp: radial-gradient(1200px 640px at 50% -12%, rgba(255,214,150,.08), transparent 60%); --hour-horizon: radial-gradient(1000px 460px at 50% 112%, rgba(255,175,100,.06), transparent 62%); --hour-arc: linear-gradient(178deg, var(--hour-1) 0%, var(--hour-2) 36%, var(--hour-3) 70%, var(--hour-4) 100%); /* -- on-ground text ramp (text ON the world, not on a page) -- */ --on-ground: #F0EBDF; /* heads */ --on-ground-2: #B4AFA2; /* secondary */ --on-ground-3: #8C897E; /* meta */ --hairline: rgba(240,235,223,.10); /* -- gold: world / ember / on-card. SEMANTIC GOLD = presence + attention -- */ --gold-world: #C79A3A; --gold-ember: #DFB759; --gold-on-card: #8F6A12; /* -- the vellum page: a printed sheet laid on the world -- */ --card-1: #FDF9EE; --card-2: #F6EFDC; --card-ink: #262019; --card-ink-2: #5C5340; --card-meta: #8A7F5F; --card-radius: 15px; /* Apple-tight shadow trio: hairline + contact + modest ambient. */ --card-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.26); --card-shadow-h: 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.3), 0 14px 38px rgba(0,0,0,.3); /* -- Yumi's voice ON THE WORLD. #256b80 (the "pale cyan -> AA deep teal" fix) was chosen for a LIGHT page, where it passes. On the twilight world it measures 2.72:1 -- a FAIL. This is the same correction, inverted for the dark ground: measured 7.03:1 on #191F33. The cyan DOT is unchanged; only the text moves, so Yumi keeps her hue and gains her legibility. -- */ --teal-on-ground: #5FB8C4; /* -- the constellation window: lapis, for B2's living miniature -- */ --window-bg: #0D1424; --window-line: rgba(199,154,58,.16); /* -- JEWEL MARKS (canonical, WIRED + RE-FROZEN at B2). CORRECTION (B2): the v3.232 note here said these "retire the --field-N pastel candy". That named the WRONG target and is fixed rather than left to mislead the next reader -- `js/arc-constellation.js` never reads --field-N at all (zero grep hits; corroborated by r-polish-b1.md:654). The renderer's real candy was --subtheory-1..16 / -edge, and THAT is what these retire, via the deterministic collapse documented at the --subtheory-* block below. --field-N remains a separate decorative token used by chrome in components.css, untouched by this batch. Each jewel carries a companion -edge (its deep tone) for the marks' inner-design strokes. -- */ /* AES-1 · THE ONE GLOW. Every mark glow is this token — never a per-hue halo. SEMANTIC GOLD: gold means presence and attention, never decoration. The glow's OPACITY still carries lum(maturity) (annotation density) exactly as before, so the signal is unchanged; only its costume becomes lawful. The jewel hue now lives in the glyph body alone. */ --mark-glow: var(--gold-world); /* AES-2 · the world margin. How much twilight shows around a lit sheet, so a page reads as a sheet ON the world rather than as the world itself. */ --sheet-gap: 18px; /* R-SHELF (v3.242) · the bookcase + wheat-horizon motif. New decorative literals for the Shelf re-composition (brief v4 §3.1 CARVED board + §3.2 BREEZE wheat + F9 horizon); kept in the paper / honey-gold / --gold-hi family, never a new hue system. Wired by name in components.css (Law 6: no raw hex outside theme.css). Cavity fill reuses --surface-2 (no token). */ --shelf-cavity: #efe7d6; /* cavity interior + recessed controls — one step darker than the sheet. Light-safe twin of --surface-2 (which the shelf's dark route flips). */ --board-face: #e3d8c1; /* §3.1 board: two flat tones — face */ --board-under: #b9a97e; /* §3.1 board: underside strip */ --spine-cloth: #4a3f4d; /* cover-less book spine — deep cloth (charm) */ --gold-ink-on-gold:#3d2807; /* dark-brown ink on gold fills — the shelf's established literal (12754/12785…), tokenized so new R-SHELF rules carry no raw hex. */ --wheat-sky-1: #fbf4e0; /* horizon sky, top */ --wheat-sky-2: #f5eccb; /* horizon sky, mid */ --wheat-sky-3: #ecdcac; /* horizon sky, at the soil line */ --wheat-glow: rgba(217,164,65,.28); /* low-sun glow = --gold-hi @alpha */ --wheat-near-1: #c9a95e; /* near stalk, tip */ --wheat-near-2: #a98d4e; /* near stalk, base */ --wheat-ear-1: #e3bd6b; /* near ear */ --wheat-ear-2: #c39a4a; --wheat-far-1: #a48a52; /* far stalk (one tone dimmer than near) */ --wheat-far-2: #8a7040; --wheat-ear-far-1:#c2a05e; /* far ear */ --wheat-ear-far-2:#a5813a; --wheat-soil-1: rgba(122,95,44,0); /* soil gradient, top (transparent) */ --wheat-soil-2: rgba(122,95,44,.22); /* soil gradient, base */ /* AES / B3 rider · --m1 ON PARCHMENT. #D9B24A measures 1.92:1 as a mark FILL on the parchment field (#FDF9EE) — below the 3:1 non-text floor. The ratified --m1 is NOT changed (it is correct on the dark world); instead the two light-ground consumers scope this darker variant, the --teal-on-ground precedent. Recon confirmed the blast radius is exactly the arc-interior field and Home's mini-field — the mark picker and .itx-root render on DARK and must keep the ratified value. B3 SESSION 2 — DARKENED ONE STEP. Session 1 shipped #B08A25 at 3.067:1: over the 3:1 floor, but with no margin at all. #9D7A20 measures 3.81:1 — the same hue, one step down, with room to spare. AND ITS EDGE, which session 1 missed: --m1-edge feeds --subtheory-{1,6,11,16}-edge (:377-392, :706-721), so it renders on these very surfaces. #A67F1E measures 3.517:1 on parchment — DARKER than the new fill, which would INVERT the carve (an edge is a shadow, never a highlight). #725814 keeps the edge at 0.50x the fill's luminance — the ratified #D9B24A/#A67F1E pair sits at 0.4965 and this at 0.5005, i.e. the same ratio to three places, not literally identical — so the carve reads on parchment the way it reads on the dark world. */ --m1-on-ground: #9D7A20; --m1-edge-on-ground: #725814; --m1: #D9B24A; --m1-edge: #A67F1E; /* gold */ --m2: #C75434; --m2-edge: #94371F; /* terracotta */ --m3: #7C8B4F; --m3-edge: #556032; /* olive */ --m4: #3E8A83; --m4-edge: #266059; /* teal */ --m5: #B07514; --m5-edge: #7D5109; /* ochre */ /* == PALETTE-X — the ten mark pigments (ARC STANDARD S1, 2026-07-22) ======= Preston's felt ruling at the mockup's Stage 1 review expands the mark pigment family 5 -> 10, and R-2 (same day) RETIRES GOLD AS A PIGMENT: gold is attention / coal / harvest ONLY, never identity. A pigment never glows. Named, never numbered. ADDITIVE. --m1..--m5 and --subtheory-1..16 above are NOT re-pointed — the book constellation, the spotlight chips and the legacy mark picker all still read them. These ten are a separate set the composed mark reads. AA — measured at the WORST case, the vellum sheet FOOT (--card-2 #F6EFDC), which is the harder end for dark marks (the sheet top is the easy one: moss passed there at 3.22 and FAILED here at 2.96 before it was re-tuned). Floor = 3:1, the WCAG graphical-object minimum. 20/20 PASS, band 3.23-4.62 — deliberately narrow, so no pigment reads heavier than another at field distance. pigment fill hue vs foot edge edge vs foot madder #B8425A 348 4.62 #85293D 7.68 terracotta #C75434 13 3.86 #94371F 6.48 ochre #A65F10 32 4.29 #74400A 7.38 olive #7C8B4F 75 3.23 #556032 5.89 moss #55913F 104 3.32 #3B682B 5.72 verdigris #3C9257 139 3.36 #1F6334 6.33 teal #3E8A83 174 3.54 #266059 6.31 lapis #4A7BB8 213 3.80 #2F5484 6.72 iris #7A6BB8 252 3.96 #55447E 7.28 plum #A85A8E 320 4.05 #7A3D64 6.83 Anchors: terracotta / olive / teal are --m2/--m3/--m4 RAW and unchanged. Ochre is --m5 SHIFTED #B07514 -> #A65F10 (hue 37 -> 32) — a SPACING change, not an AA change (raw ochre passes at 3.39): at 5-wide ochre 37 could coexist with gold 43; at 10-wide six degrees is a collision. Raw --m1 gold #D9B24A measures 1.76:1 on the foot and could never have touched this sheet. RUST is deliberately absent — it lands at hue ~15-20, on top of terracotta; IRIS holds the blue-violet gap instead. */ --pig-madder: #B8425A; --pig-madder-edge: #85293D; --pig-terracotta: #C75434; --pig-terracotta-edge: #94371F; --pig-ochre: #A65F10; --pig-ochre-edge: #74400A; --pig-olive: #7C8B4F; --pig-olive-edge: #556032; --pig-moss: #55913F; --pig-moss-edge: #3B682B; --pig-verdigris: #3C9257; --pig-verdigris-edge: #1F6334; --pig-teal: #3E8A83; --pig-teal-edge: #266059; --pig-lapis: #4A7BB8; --pig-lapis-edge: #2F5484; --pig-iris: #7A6BB8; --pig-iris-edge: #55447E; --pig-plum: #A85A8E; --pig-plum-edge: #7A3D64; /* == THE FIELD's chrome inks (ARC STANDARD S1) ============================ The sky, the Gate Row and the soil row need a few warm values the vellum set does not already carry. They live HERE, named, because the convention is CSS variables only — never a literal inlined in components.css. (Caught by the S1 reviewer gate: the pigment set above was tokenised correctly and these ten were not, in the same commit.) Values are the felt-passed mockup's, on the vellum sheet. --harvest-1/2 the finished arc's warm-gold sheet cast (F4's harvest turn) --card-ink-warm a warm dark ink for display italics + soil-book titles — between --card-ink #262019 and --card-ink-2 #5C5340, carrying more warmth than either --ember-ink the value-ember's text on the sky: quiet, gold-adjacent --gold-hi the light stop of the primary gradient; --gold-ember (#DFB759, above) is its dark stop and is REUSED, not re-declared --gold-ink-door the lifecycle door's label — the gold family, one step quieter than --gold-on-card #8F6A12 so a door invites rather than shouts --cloth-page-1/2 the soil row's coverless book: a printed cloth board, in the paper register (the --cloth-* trio above is the SPINE register — saturated dyes — and is a different material) */ --harvest-1: #FEF7E4; --harvest-2: #F6E8C8; --card-ink-warm: #4A4030; --ember-ink: #7A6636; --gold-hi: #F0D79A; --gold-ink-door: #6b5a24; --cloth-page-1: #FBF4E2; --cloth-page-2: #EFE3C7; /* -- the cloth spines: the bound edge of a printed page (reference `.spine`). Tokens, not literals in components.css -- the same rule the jewel marks follow. Three cloths, each a two-stop gradient pair. -- */ --cloth-ox-1: #8E4434; --cloth-ox-2: #6E3226; --cloth-olive-1: #7A8A4E; --cloth-olive-2: #5E6C3B; --cloth-teal-1: #357B75; --cloth-teal-2: #265A55; /* -- world chrome: the nav -- --nav-frost / --nav-blur are the REFERENCE's frosted values, kept as tokens so the treatment is one edit away if Preston rules for the frost. --nav-solid is what SHIPS: the composite of that frost over the twilight zenith (.60 * #151826 over #191F33), so the look lands without the backdrop-filter the canon guardrail forbids on nav chrome (iOS overflow-composite bug, fixed v3.106 -- see the rule in components.css). */ --nav-frost: rgba(21,24,38,.60); --nav-blur: 22px; --nav-solid: #171B2B; /* -- existing shared tokens, re-pointed to BRIGHT-page base values -- */ /* R-POLISH Slice 0: :root reconciled to the Universal v1.1 token sheet (§3). Global defaults were pre-v1.1 while the scoped light skins already ran v1.1 (the drift the census flagged). Rendered surfaces mostly shadow these via [data-ground="dark"] / scoped blocks, so this is near-zero visual delta; it aligns the default so future unscoped light surfaces are born correct. --gold-deep is ADDED (it was referenced but undefined at :root). */ --ink: #241710; --ink-2: #645940; --ink-3: #978b6d; --ink-4: #978b6d; --gold: #a8761a; --gold-deep: #855410; --bg: var(--page); --surface: #fffdf8; --border: var(--line-page); --br-deep: #1c1209; --surface-2: #efe7d6; --gold-light: var(--gold-ink); --gold-text: var(--gold-ink); --river: #3a5a8a; --color-surface: var(--page); --text-on-dark: #fdfaf3; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --radius-sm: 6px; --radius-lg: 16px; --fs-sm: 0.8125rem; --fs-body: 0.9375rem; --fs-display: 1.5rem; /* Stage 5.4: arc-web spine + node tokens. */ --arc-web-spine-width: 2px; --arc-web-node-cover-height: 100px; --arc-web-node-gap: var(--sp-5); /* ===================================================================== Stage 5.6 sub-step 2: Register tokens + saturation variants. Nine traditions (theory, wisdom, empirical, history, memoir, novel, poetry, place, practice) plus 'unassigned' as the 10th case (which renders no glyph at all, so no token needed). See docs/knowledge-arcs/shelf-and-field-decisions.md §1. Three registers reuse existing palette anchors (theory = cherry oak via --br-deep, wisdom = gold, memoir = water via --river). Three are derived via color-mix from existing tokens (history = bronze, empirical = clay, practice = paper-and-ink). Three are new hex values where the existing palette had no anchor (novel = wheat, poetry = indigo, place = tea). Saturation variants follow the pattern from Stage 5.1: color-mix toward --bg at three discrete ratios. Light = 30/70 (book is in the shelf but barely engaged), mid = 65/35 (actively reading or noting), deep = pure register color (deeply worked through). Discrete bands not continuous opacity — saturation differences at 20px corner-glyph size don't read continuously. The 'unassigned' tradition deliberately has NO token here. The renderer (sub-step 3) returns empty string for unassigned books; the cover renders without a corner glyph, which is itself a signal per the §2.6 "empty space is a real signal" principle. ===================================================================== */ /* Base register colors -- 6 reused/derived, 3 new */ --register-theory: var(--br-deep); --register-wisdom: var(--gold); --register-memoir: var(--river); --register-history: color-mix(in srgb, var(--gold) 60%, var(--br-deep) 40%); --register-empirical: color-mix(in srgb, var(--gold-text) 50%, var(--br-deep) 50%); --register-practice: color-mix(in srgb, var(--ink-2) 60%, var(--ink-4) 40%); --register-novel: #c9a85a; --register-poetry: #3a3573; --register-place: #5a6b3a; /* Light variant -- 30% register color + 70% bg */ --register-theory-light: color-mix(in srgb, var(--register-theory) 30%, var(--bg) 70%); --register-wisdom-light: color-mix(in srgb, var(--register-wisdom) 30%, var(--bg) 70%); --register-empirical-light: color-mix(in srgb, var(--register-empirical) 30%, var(--bg) 70%); --register-history-light: color-mix(in srgb, var(--register-history) 30%, var(--bg) 70%); --register-memoir-light: color-mix(in srgb, var(--register-memoir) 30%, var(--bg) 70%); --register-novel-light: color-mix(in srgb, var(--register-novel) 30%, var(--bg) 70%); --register-poetry-light: color-mix(in srgb, var(--register-poetry) 30%, var(--bg) 70%); --register-place-light: color-mix(in srgb, var(--register-place) 30%, var(--bg) 70%); --register-practice-light: color-mix(in srgb, var(--register-practice) 30%, var(--bg) 70%); /* Mid variant -- 65% register color + 35% bg */ --register-theory-mid: color-mix(in srgb, var(--register-theory) 65%, var(--bg) 35%); --register-wisdom-mid: color-mix(in srgb, var(--register-wisdom) 65%, var(--bg) 35%); --register-empirical-mid: color-mix(in srgb, var(--register-empirical) 65%, var(--bg) 35%); --register-history-mid: color-mix(in srgb, var(--register-history) 65%, var(--bg) 35%); --register-memoir-mid: color-mix(in srgb, var(--register-memoir) 65%, var(--bg) 35%); --register-novel-mid: color-mix(in srgb, var(--register-novel) 65%, var(--bg) 35%); --register-poetry-mid: color-mix(in srgb, var(--register-poetry) 65%, var(--bg) 35%); --register-place-mid: color-mix(in srgb, var(--register-place) 65%, var(--bg) 35%); --register-practice-mid: color-mix(in srgb, var(--register-practice) 65%, var(--bg) 35%); /* Deep variant -- pure register color (Band 3 = 5+ notes) */ --register-theory-deep: var(--register-theory); --register-wisdom-deep: var(--register-wisdom); --register-empirical-deep: var(--register-empirical); --register-history-deep: var(--register-history); --register-memoir-deep: var(--register-memoir); --register-novel-deep: var(--register-novel); --register-poetry-deep: var(--register-poetry); --register-place-deep: var(--register-place); --register-practice-deep: var(--register-practice); /* Arc constellation tokens — additive, not replacing --register-* */ --tradition-ground: #FAEEDA; --tradition-inner-light: #FFF8E7; --thread-color: var(--thread); /* Umber: resonance tan (re-point) */ --thread-color-faint: color-mix(in srgb, var(--thread) 65%, transparent); /* speculative/faint */ --marginalia-color: var(--teal); /* Umber: teal through-line */ --journal-color: #7d6db0; /* Umber: journal register spine (violet) */ --question-color: var(--river); /* question register spine (Umber indigo #3a5a8a) */ --arc-question-glow: var(--gold); /* question gravity glow */ --tradition-theory-halo: #F0A88A; --tradition-wisdom-halo: #F8E078; --tradition-empirical-halo: #F8C8AA; --tradition-history-halo: #E8B068; --tradition-memoir-halo: #C5D080; --tradition-novel-halo: #F5BACE; --tradition-poetry-halo: #8590D8; --tradition-place-halo: #98D4B0; --tradition-practice-halo: #B8896C; /* =================================================================== RD-1 · THE JEWEL COLLAPSE (R-POLISH B2, 2026-07-19). RE-FROZEN AT FIVE. The sixteen colorful pastels are RETIRED; the mark palette is now the five ratified jewel tokens. Preston UNFROZE the sixteen for this ruled batch only -- a ruled L3 batch is the freeze's sanctioned edit -- and the result is RE-FROZEN here at the new five. Casual drift is forbidden again from this line forward: changing these requires another ruled batch, not a passing tune. WHY: the candy pastels were authored for a dark stage and fail on the parchment field (P-C, the candy-palette leak). The jewels are the gold-channel family the L3 legibility proof passed at 36-mark density. THE MAPPING IS DETERMINISTIC AND STABLE -- N -> m((N-1) mod 5)+1: 1,6,11,16 -> m1 gold 2,7,12 -> m2 terracotta 3,8,13 -> m3 olive 4,9,14 -> m4 teal 5,10,15 -> m5 ochre The renderer picks N by id-hash, so an existing sub-theory keeps its N and therefore lands on ONE fixed jewel: identities stay stable across the change, which is what the ruling required. Five jewels across sixteen slots means hue no longer uniquely identifies a sub-theory -- by design: GLYPH SHAPE carries the remaining distinction (the 16-shape _ST_MARK_TABLE is untouched, so every slot is still visually distinct). SCOPE NOTE: this collapses the DEFAULT palette only. The two OPT-IN alternates ([data-st-palette="muted"|"colorful"], below) are user-chosen and deliberately left on their own values -- retiring a palette a user explicitly selected is a different decision, not this batch's. Their candy is therefore still reachable by choice, never by default. Renderer indexes var(--subtheory-N), N = colorIdx + 1 (unchanged). */ --subtheory-1: var(--m1); --subtheory-2: var(--m2); --subtheory-3: var(--m3); --subtheory-4: var(--m4); --subtheory-5: var(--m5); --subtheory-6: var(--m1); --subtheory-7: var(--m2); --subtheory-8: var(--m3); --subtheory-9: var(--m4); --subtheory-10: var(--m5); --subtheory-11: var(--m1); --subtheory-12: var(--m2); --subtheory-13: var(--m3); --subtheory-14: var(--m4); --subtheory-15: var(--m5); --subtheory-16: var(--m1); /* The companion DEEP tones drive each mark's INNER-DESIGN STROKES. Under the collapse they follow their own jewel so a mark reads as one object rather than a jewel body wearing a stranger's outline. Deep variants of the five, re-frozen with them. */ --subtheory-1-edge: var(--m1-edge); --subtheory-2-edge: var(--m2-edge); --subtheory-3-edge: var(--m3-edge); --subtheory-4-edge: var(--m4-edge); --subtheory-5-edge: var(--m5-edge); --subtheory-6-edge: var(--m1-edge); --subtheory-7-edge: var(--m2-edge); --subtheory-8-edge: var(--m3-edge); --subtheory-9-edge: var(--m4-edge); --subtheory-10-edge: var(--m5-edge); --subtheory-11-edge: var(--m1-edge); --subtheory-12-edge: var(--m2-edge); --subtheory-13-edge: var(--m3-edge); --subtheory-14-edge: var(--m4-edge); --subtheory-15-edge: var(--m5-edge); --subtheory-16-edge: var(--m1-edge); /* ===================================================================== Stage 5.1 -- Material system tokens (A1-A4). LIGHT DIRECTION (load-bearing): light rakes from the upper-left of the page at a low warm angle. Every shadow in this stylesheet falls DOWN-AND-RIGHT (positive X offset, positive Y offset). Every lit-edge highlight sits at the TOP + LEFT of a surface. Future rules MUST follow this direction -- mixing directions reads as broken material per the v2 direction-consistency rule. The previous --shadow-1 was two-layer black rgba (A3.1 violation). It is redefined here in the warm --br-deep family; its callers (.yumi-bloom, .yumi-panel) are in 5.1 scope and re-tuned at Checkpoint 2 anyway -- the Yumi panel migrates to --shadow-yumi and the toggle picks up the warm Tier 1 directly. ===================================================================== */ /* Shadow set -- warm-brown, expressed from --br-deep so the token is the single source of truth. NEVER rgba(0,0,0,...) per A3.1. Each tier is two-layer (tight ambient + softer wider cast). Offsets encode the upper-left light direction. */ --shadow-1: 2px 3px 6px color-mix(in srgb, var(--br-deep) 8%, transparent), 4px 8px 18px color-mix(in srgb, var(--br-deep) 6%, transparent); --shadow-2: 3px 5px 12px color-mix(in srgb, var(--br-deep) 10%, transparent), 8px 16px 32px color-mix(in srgb, var(--br-deep) 8%, transparent); --shadow-spotlight: 0 40px 100px -34px rgba(58,40,16,.5); --shadow-yumi: 3px 4px 10px color-mix(in srgb, var(--br-deep) 9%, transparent), 6px 12px 24px color-mix(in srgb, var(--br-deep) 7%, transparent); /* S5: book-detail cover. The mockup (B.6) specifies a literal #000 drop -- a deliberate deviation from the warm-brown A3.1 family for the one heavy media frame. This token is the sole home for the #000; components.css references the var, never the literal. */ --shadow-cover: 0 24px 50px -20px #000; /* Lit-edge highlight (A1.3) -- a warm near-white at low opacity for the top + left of every surface. Derived from --text-on-dark so it sits in the yellow-warm hue family, not pure white. */ --highlight-edge: color-mix(in srgb, var(--text-on-dark) 55%, transparent); /* Radius (A2.3) -- 10px is the consistent card/panel radius. --radius-sm and --radius-lg are retained for pills and Yumi legacy uses; --radius-md is the v2 default for new chrome. */ --radius-md: 10px; /* Motion (A4.2) -- slow ease-out, no overshoot. 350ms is the baseline duration; applied ONLY to the four permitted motions in A4.3 (route cross-fade, card hover lift, nav underline slide, picker/panel fade-and-rise). */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --motion-base: 350ms; /* Stage 5.2 presence dial. 1j shipped at 0.22 with the 70-stalk denser field; 0.22 is the calibrated floor for the visible-ground model (wheat reads in margins and card gutters). Ceiling ~0.32 before the field stops feeling atmospheric. Values below ~0.12 are effectively invisible on the wheat-cream + 5.1-grain background. Tune from 0.22. */ --field-presence: 0.22; /* --- medium-skin additive roles (Umber-re-pointed) --- */ --ground-center: var(--page); --bg-2: var(--page-2); --sunk: #e3d4b0; --glass: rgba(248,241,225,.5); --glass-2: rgba(252,246,232,.82); --glass-spotlight: rgba(48,30,16,.94); --line-2: var(--line-page-2); --river-l: #5a7ab0; --grad: linear-gradient(92deg,#d2a23e,#2e8a93); --radius-xl: 22px; /* --- Batch 1 foundation: deep-honey ground radial + chrome roles --- */ /* Batch 5: the dark goldenrod stops retired -- both now resolve to the paler --bg-2 so the ground reads as light airy honey with no dark band. Tokens kept (not renamed) to avoid touching any consumer. */ --ground-base: var(--bg-2); --ground-edge: var(--bg-2); --wordmark: var(--gold-soft); --wash: var(--wash-page); --radius-pill: 999px; /* --- Batch 2: trust-cluster roles --- */ --on-teal: #06241a; /* dark text on a teal FILL (tog.on, vis.on) */ --panel-yumi: color-mix(in srgb, var(--surface) 93%, var(--marginalia-color) 7%); /* opaque honey with a faint teal cast -- What-Yumi-Sees body */ /* --- Batch 3: danger zone (Account delete) --- */ --danger: #c2603a; --danger-line: rgba(194,96,58,.46); /* --- SCAN surface: camera-chrome family (ground-independent) --- */ /* The viewfinder is always a dark camera regardless of the app ground, so these are literal (not re-pointed in the dark block). DISTINCT from the LIGHT --glass/--glass-2 nav chrome above: the camera needs a near-black ground + dark translucent controls + a warm off-white ink over live video. */ --scan-cam-bg: #0c0a07; /* camera fill / letterbox */ --scan-glass: rgba(20,14,7,.62); /* viewfinder control fill */ --scan-glass-2: rgba(28,20,10,.82); /* stronger chrome (torch tip, receipt) */ --scan-on-dark: #f6efe0; /* ink over live video */ --scan-on-dark-2: rgba(246,239,224,.62); /* secondary ink over live video */ /* typeset cloth-cover fallback (no external image) — cover slot + ink */ --scan-cloth-1: #e3d8c1; /* cover cloth, light (== --board-face) */ --scan-cloth-2: #d3c4a6; /* cover cloth, shade */ --scan-cover-ink: #3a2c17; /* serif title ink on the cloth cover */ --scan-cover-meta:#6b5b3c; /* author meta on the cloth cover */ /* --- Notebook bound-leaf chrome (hybrid spread) --- */ /* Dot-grid leaf texture: a 22px-pitch honey stipple over the leaf fill. Derived from --ink-4 so it reads as faint graphite on wheat. */ --dots: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 26%, transparent) 1.3px, transparent 1.5px); /* Faded brick-red margin rule down the left leaf (notebook ruling). */ --margin-rule: color-mix(in srgb, var(--danger) 30%, transparent); /* --- R9a (AM26): --field-*-deep companion ramp. The bright --field-1..10 (universal-depth.css) are for sky/orbs/bar-fills; these deep companions are the text/rail/dot/border tone on LIGHT surfaces (the --gold/--gold-deep precedent). AA-verified per hue vs --surface-2 (#efe7d6, the worst-case light surface deep text sits on): ratios 4.89-7.17:1, all >= AA 4.5. Same slug-order index as the bright ramp so category N shares hue N across both ramps. */ --field-1-deep:#7a5410; --field-2-deep:#9c3f1e; --field-3-deep:#97423c; --field-4-deep:#a53a62; --field-5-deep:#4d6333; --field-6-deep:#2b6f4f; --field-7-deep:#3a4590; --field-8-deep:#726010; --field-9-deep:#7f5514; --field-10-deep:#68412c; /* --- R9b Lane G (S5): the PROFILE-GALAXY planet hue wheel. A DIVERSE muted full-spectrum wheel (warm + slate/steel blue + dusty teal + plum + sage + olive), deterministic per slug, shared across the category and lens modes. Muted saturation throughout so the gold value-lines/stars/specks keep hierarchy over any planet fill. AA-verified as TEXT on the night ground (#1c1209): 5.49-8.03:1, all >= AA 4.5 (min = plum). Gold-hierarchy checked: a lit gold line (0.56) out-luminates every planet fill (<=0.10). The -d deep companions are the panel-header / catcard-rail / sublink-dot tone on light. */ --pf-hue-1:#d3a35a; --pf-hue-1d:#7a5a1e; /* amber */ --pf-hue-2:#cf8560; --pf-hue-2d:#83421f; /* terracotta */ --pf-hue-3:#cc8a94; --pf-hue-3d:#8a4650; /* rose */ --pf-hue-4:#a880a0; --pf-hue-4d:#63385e; /* plum */ --pf-hue-5:#8496bb; --pf-hue-5d:#3c4d78; /* slate blue */ --pf-hue-6:#5fa89e; --pf-hue-6d:#2c6a60; /* dusty teal */ --pf-hue-7:#90ac7e; --pf-hue-7d:#46603a; /* sage */ --pf-hue-8:#a9a45e; --pf-hue-8d:#5f5b1e; /* olive */ --pf-hue-9:#c08f6e; --pf-hue-9d:#6e4a2c; /* clay */ --pf-hue-10:#7fa4c2; --pf-hue-10d:#3e5a78; /* steel blue */ } /* ===================================================================== UMBER dual-ground override. The :root above is the BRIGHT page; this re-points the ~15 ground-sensitive shared tokens to the dark study set wherever data-ground="dark" is set on (per route, by renderRoute), AND on the always-dark floating chrome (nav, Yumi Bloom/panel, spotlight) so that chrome stays dark/brown even when it floats over a bright page. Components keep referencing var(--ink) etc.; only the resolved values shift here. Custom properties inherit, so descendants follow. */ [data-ground="dark"], .app-nav, .yumi-bloom, .yumi-panel, .spotlight-panel { --ink: var(--text-d); --ink-2: var(--muted); --ink-3: var(--muted); --ink-4: var(--muted); --surface: var(--surface-d); --surface-2: var(--surface-d2); --color-surface: var(--dark-2); --bg: var(--ground); --bg-2: var(--surface-d2); --border: var(--hairline); --line-2: var(--border-2); --wash: rgba(240,235,223,.06); --glass: var(--glass-pill); --glass-2: rgba(21,24,38,.88); --sunk: #2E3446; /* Gold goes BRIGHT on the dark world; the muted gold-ink base is for the light page, where the bright gold fails AA and gold-ink passes (5.7). THE HOUR re-points this to the world gold (#C79A3A). */ --gold: var(--gold-world); --gold-light: var(--gold-soft); --gold-text: var(--gold-soft); /* R-POLISH S0 red-team fix: --gold-deep is now defined at :root (#855410, the light-page AA gold). On the dark study it must NOT stay #855410 (dark-on-dark); re-point it to the bright gold so unscoped dark-ground uses (e.g. .account-readermodel .rm-col-will) stay legible. Scoped .lum-amber-deep skins keep their own #855410 on their light paper via higher specificity. */ --gold-deep: var(--gold-soft); } body { /* Stage 5.1: body bg is transparent so the page-light/grain pseudo (rendered at z-index: -1 in the root stacking context) shows through. The --color-surface fill moves into body::before's stacked background as the bottom-most layer; the page still reads as opaque wheat. No isolation: isolate, no position declaration -- the global stacking model is byte-for-byte unchanged from pre-5.1. */ background: transparent; color: var(--ink); font-family: var(--font-body); } /* ===================================================================== Stage 5.1 -- Page light + grain pseudo-element (A1.2, A2.1). ONE pseudo-element, not two. The pseudo carries the full page ground: three grain layers on top, the radial glow beneath them, and --color-surface as the bottom solid fill. This makes the pseudo fully opaque, so body's transparent background reveals it without needing a body-level stacking context. Stack order in the CSS background list paints FIRST-LISTED ON TOP, so the layers below are written from-viewer-out: 1. Grain layer A (tight, --ink-3 3%) 2. Grain layer B (medium, --br-deep 2%) 3. Grain layer C (wide, --ink-2 2%) 4. Radial glow (warm peak at 12% 8%, A1.2) 5. --color-surface fill (the page wheat ground) Grain bands run at 45deg = UPPER-LEFT to LOWER-RIGHT (parallel to the light rake set in the C1 light-direction comment). Strength ~2/10 -- felt, not seen. The pseudo: - position: fixed (does not scroll-detach) - inset: 0 (covers the full viewport) - pointer-events: none (never intercepts clicks) - z-index: -1 (resolves in the root html stacking context, at step 2, BELOW body's transparent box in step 3 -- so it shows through. Yumi panel/toggle at z=9998/9999 and mobile overlays at z=99/100 all paint at root steps 6-7 above the pseudo, same as pre-5.1). Pure CSS, no raster asset, no new file in assets/, index.html not modified. ===================================================================== */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; /* Umber BRIGHT page ground: a faint warm grain over the flat page fill. The dark-study ground is the [data-ground="dark"]::before override just below (it swaps in --ground-grad). The old wheat radial and its three hardcoded honey stops are retired here in favour of the --page token. */ background: repeating-linear-gradient( 37deg, transparent 0, transparent 3px, color-mix(in srgb, var(--meta) 4%, transparent) 3px, color-mix(in srgb, var(--meta) 4%, transparent) 4px ), var(--page); } /* THE HOUR, REFINED -- the world ground. Swaps the bright page for the twilight arc whenever the active route set data-ground="dark" on . Higher specificity (attr + element + pseudo) than the base body::before. GROUND MECHANISM (pre-ruled by the B1-FIX brief): this is a FIXED-POSITION LAYER (the pseudo above is position:fixed), NOT background-attachment:fixed. The reference mockup uses background-attachment:fixed on ; that is BROKEN ON iOS (it collapses to scroll, tearing the gradient), so the mockup's VALUES are adopted and its MECHANISM is not. --ground-grad resolves to lamp radial + horizon radial + the twilight arc, painted over the --ground fill; no vignette, per the canon. */ body[data-ground="dark"]::before { background: var(--ground-grad), var(--ground); } /* THE HOUR, REFINED -- the grain. A STATIC layer (it neither animates nor parallaxes), held at .015 so it is felt and not seen. Kept as its own pseudo rather than another background layer on ::before so the ground gradient and the texture can be tuned independently -- and so the SCROLL-PERF lever is a single opacity value: if the layer + grain + nav backdrop-blur trio ever stutters at 1920, THIS lightens first. position:fixed + z-index:-1 puts it in the same root stacking step as the ground, above it in paint order, still below