/* ========================================================================== wkp.my — DIRECTION D's FAMILY SHEET, adopted by reference. This is NOT a my.-only invention. The design proposal (docs/drafts/2026-08-22-design-system-proposal.md §4, "A shared token sheet — one family, three surfaces") names three surfaces reading one sheet — paper (wingkingpress.com), board (live), my. (my.wingkingpress. com) — "the my. repo/app imports a copy pinned by version; it must be self-hosted there too". §5's ruling block (RULED, 2026-08-22) closes the open question directly: "Items 4-7 — approved as recommended ('I am good with all of it'): ... and the my. spec adopts §4's sheet by reference, making the sheet an interface under deliberate-friction rules." That is ruling item 7. This file IS that adoption, made concrete for the FastAPI app rather than the Astro site — same twelve values, same fonts, same rules, a separate file because my. does not share a build pipeline with site/ and has no mechanism to literally import site/src/styles/ tokens.css across the app boundary. THE TWELVE VALUES BELOW ARE BYTE-EXACT, copied from the plan's own Task 7 Interfaces block (docs/superpowers/plans/2026-08-22-my-phase-1.md), which itself copied them from the proposal's §4 code block — not independently derived, not rounded, not "close enough". A colour one digit off is a different colour and a broken WCAG citation. ========================================================================== */ /* ---- Self-hosted fonts -------------------------------------------------- Copied byte-for-byte from site/public/fonts/ (verified via md5sum before this file was written — six files, six matches) into ./fonts/ alongside this stylesheet. No @import, no to Google, no CDN: my.'s own "zero-third-party" rule (plan Global Constraints: "the paper's zero-third-party rule extends to my."). Every @font-face below is a byte-identical copy of site/src/styles/tokens.css's own declarations — same family names, same weights, same unicode-range subset — so a masthead rendered by my. and one rendered by the paper are the same typeface, not a visually-close substitute picked independently. `url()` paths are relative ("fonts/…"), not root-absolute ("/static/ fonts/…"): this file is always served from the same directory as fonts/, regardless of what path prefix the app mounts static files under, so the relative form survives a mount-point rename for free. -- */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/newsreader-latin-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/newsreader-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- The twelve ruled custom properties (byte-exact) ----------------- Copied without alteration from the plan's Task 7 Interfaces block. Each is its own declaration, but the SUBSTRING "--name:#hex" that appears in the plan card survives intact in every one of them — colon immediately followed by the hex value, no inserted space — which is what "byte-exact" is checked against (tests/my/test_pages.py). */ --surface:#0b0e12; --surface-raised:#161a20; --surface-high:#1f252d; --surface-stage:#1a2338; --stage-rim:#1f2b44; --ink:#f2f4f7; --muted:#a4adb8; --accent:#f0705c; --accent-2:#5ac8dc; --gold:#f5c542; --line:#272d36; --line-strong:#3c444f; /* ---- Ink-on-fill pairs, §4's own sheet (not among the twelve ruled values, but published beside them in the same code block: "--gold- ink: #12151a; /* on a solid gold fill: 11.28:1 */"). Needed the moment any control fills solid with --accent/--accent-2/--gold (the gold-ringed submit, the ON AIR pip) — a text colour ON that fill, not the fill colour again, so this is a distinct token, not a restatement of one of the twelve. Same value the paper's own dark theme already uses for --accent-ink/--accent-2-ink (site/src/styles/tokens.css:269,275), reused here rather than re-measured, because both are the identical near-black ink on the identical fill colours. */ --accent-ink:#12151a; --accent-2-ink:#12151a; --gold-ink:#12151a; /* ---- Type families — the family stacks (plan Task 7: "Newsreader serif for nameplate/questions, Barlow body, Barlow Condensed labels/buttons"), copied verbatim from site/src/styles/tokens.css's own --serif/--sans/--condensed so a masthead rendered by my. and one rendered by the paper fall back through the identical chain if a font ever fails to load. */ --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --condensed: "Barlow Condensed", "Barlow", system-ui, sans-serif; /* ---- Measure — family sheet §4 rule 5: "Every reading surface states its measure: --measure for Barlow, --measure-serif for Newsreader, never the serif at 66ch." Both values reused verbatim from site/src/styles/tokens.css:175,193 — the SAME typefaces at the SAME weights, so the same character-per-line measurement holds; my. does not re-derive it because nothing about serving the font from a second app changes how wide a "0" or a lowercase letter renders. */ --measure: 66ch; --measure-serif: 53ch; /* ---- Data density — family sheet §4: "A's consolidation, unchanged by D", reused here because Task 7 item 3 asks for "the War Desk tables in --fs-data density with tabular-nums" and this is the one token that density is defined against. */ --fs-data: 0.8125rem; --lh-data: 1.35; /* ---- Structure — family sheet §4 rule 6: "--touch-target: 44px and the 12px floor bind my. exactly as they bind the paper." Radii and spacing are NOT among anything §2.4/§4 rules on explicitly; reused from the paper's own scale (site/src/styles/tokens.css:196-209) rather than invented fresh, per this task's own instruction: "where §2.4 is silent, the family sheet decides", and the family sheet's whole premise is that paper/board/my. read ONE sheet. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --touch-target: 44px; color-scheme: dark; } /* ---- The 450 prose weight — §5.5's ruling, applied ------------------ The proposal's §5 item 5 poses the open question: "Whether Newsreader's prose blocks take a 450-500 body weight on the dark ground - one declaration, zero new files, reversible in a line". The RULED block at the top of §5 closes it: "Items 4-7 - approved as recommended ('I am good with all of it'): ... the 450-500 prose weight ships and gets judged in a real browser on /glossary and /keepers". This is that one declaration, at 450 (the low end of the ruled range) — my.'s own prose is short (a claim-page consent line, a fired question), never the forty-line article the ruling names as the actual judging ground, but the mitigation is the SAME typeface at the SAME dark grounds (--surface/--surface-stage), so the identical thin-stroke erosion the ruling names applies here too, and there is no reason for my.'s serif to sit at a different weight than the pages the commissioner actually judged it on. `.question` is named explicitly because press.html's fired question is Newsreader on --surface-stage — the same "serif on dark" case, one room over. Reversible in a line, exactly as ruled. */ .prose, .question { font-weight: 450; }