/* ============================================================ CULT+MATH — Design Tokens · LIGHT POLARITY Ipalibo Da-Wariboko · August 25, 2026 · CULT+MATH LLC Direction B. The estate inverts to a light editorial system. Dark is reserved for Zombie Corp (zc.css). TRIGGER: a named reader reporting the dark surface hard to read, more than once. Not a design opinion. HOW THIS FILE WAS CHANGED, AND HOW IT MUST BE CHANGED AGAIN. Values only. NOT ONE TOKEN NAME MOVED. The first attempt at this inversion shipped a new file with new names — --ink, --accent-shape, --body. Every page still referenced --white (505 uses), --muted (485), --green (265). Every var() resolved to nothing. The homepage fell back to browser defaults: black on white, links in default blue, no contrast anywhere. It was caught by looking at the page. That is cm_84 exactly — correct where written, wrong at a boundary never crossed, silent until run — committed by the refactor that was meant to prevent it. A token file is an interface. Renaming is a breaking change to 91 files. If a name must change, it is aliased first and retired file by file, never swapped. CONTRAST IS MEASURED IN APCA, NOT WCAG 2, inherited from the dark file of August 24 and not relaxed on the way across. Lc 90 small text 11-14px Lc 75 body 15-17px w400 Lc 60 large/bold 18px+ Lc 45 headings 24px+ WCAG 2 PASSED A VALUE APCA REJECTS. A label grey of #6E6E6A measured 4.90:1 (a comfortable WCAG AA pass) and Lc 72.3 — below the floor for any small text, and destined for every eyebrow on the site. Not shipped. --muted resolves to on-surface-variant (#42423E, Lc 90.4), the strictest floor, because 485 usages cannot be audited by size and the value must be safe wherever it lands. ============================================================ */ :root { /* --- TYPEFACES ------------------------------------------ MD3 maps two reference faces: "brand" carries display and headline; "plain" carries title, body and label. Ours are Playfair and DM Sans. Roboto is not used. */ --md-ref-typeface-brand: 'Playfair Display', Georgia, serif; --md-ref-typeface-plain: 'DM Sans', system-ui, -apple-system, sans-serif; --md-ref-typeface-mono: 'DM Mono', ui-monospace, monospace; /* --- TYPE SCALE ----------------------------------------- MD3 baseline sizes. The floor is 11px (label small) and labels are 500 weight, never 300. Body is 400 — light weights thin out against dark surfaces. */ /* Display — hero only. One per page, maximum. */ --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-large-size: clamp(38px, 6.4vw, 66px); --md-sys-typescale-display-large-line-height: 1.06; --md-sys-typescale-display-large-weight: 800; --md-sys-typescale-display-large-tracking: -0.025em; --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-small-size: clamp(30px, 4.4vw, 36px); --md-sys-typescale-display-small-line-height: 1.12; --md-sys-typescale-display-small-weight: 700; --md-sys-typescale-display-small-tracking: -0.02em; /* Headline — section openers. */ --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line-height: 1.2; --md-sys-typescale-headline-medium-weight: 700; --md-sys-typescale-headline-medium-tracking: -0.01em; --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-line-height: 1.25; --md-sys-typescale-headline-small-weight: 700; --md-sys-typescale-headline-small-tracking: -0.01em; /* Title — card headings, sub-sections. */ --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-line-height: 1.28; --md-sys-typescale-title-large-weight: 700; --md-sys-typescale-title-large-tracking: -0.008em; --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-title-medium-size: 17px; --md-sys-typescale-title-medium-line-height: 1.4; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-tracking: 0; /* Body — everything a person actually reads. Body large is the marketing default. Reading measure is capped at --cm-measure; long-form uses --cm-measure-long. */ --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-large-size: 19px; --md-sys-typescale-body-large-line-height: 1.78; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-tracking: 0; --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-medium-size: 16px; --md-sys-typescale-body-medium-line-height: 1.72; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-tracking: 0; --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-small-size: 13px; --md-sys-typescale-body-small-line-height: 1.6; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-tracking: 0; /* Label — eyebrows, tags, nav, buttons, meta. These were 9-11.5px. MD3's own floor is 11px, and label text is 500 weight. Tracking is reduced from 0.16em: uppercase + heavy tracking + small size is the exact combination that made the old site hard to read. */ --md-sys-typescale-label-large-font: var(--md-ref-typeface-mono); --md-sys-typescale-label-large-size: 15px; --md-sys-typescale-label-large-line-height: 1.45; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-tracking: 0.08em; --md-sys-typescale-label-medium-font: var(--md-ref-typeface-mono); --md-sys-typescale-label-medium-size: 14px; --md-sys-typescale-label-medium-line-height: 1.5; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-tracking: 0.09em; --md-sys-typescale-label-small-font: var(--md-ref-typeface-mono); --md-sys-typescale-label-small-size: 13px; --md-sys-typescale-label-small-line-height: 1.5; --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-tracking: 0.09em; /* --- COLOR ROLES ---------------------------------------- MD3 tone-based surfaces. The page stays #0A0A0A — the spec's argument against near-black is about bright imagery, and this site is text. What we do adopt is the container ladder: the old page-to-card step was too small to read as a container at all. CONTRAST IS MEASURED IN APCA, NOT WCAG 2 RATIOS. August 24, 2026. WCAG 2.x contrast is a symmetric luminance ratio: it ignores polarity, size and weight, and systematically OVERSTATES contrast when both colours are near black. On a #0A0A0A ground its numbers are not usable. APCA (Myndex, the WCAG 3 candidate) is polarity- and size-aware, and is what this file now reasons in. APCA readability floors, light-on-dark: Lc 90 small text, 12-14px Lc 75 body text, 15-17px weight 400 <- our floor Lc 60 large or bold, 18px+ Lc 45 large bold headings, 24px+ on-surface-variant (#A8A6A0) reads 8.13:1 under WCAG 2 and passes AA comfortably. Under APCA it is Lc 54 — below the floor for ANY text. It was the default body colour on every page until this date. It is now a NON-TEXT token: use it for nothing a person reads. The old --muted (#7A7A7A) was retired earlier for the same reason, caught by the weaker measurement. This is the same defect found again with a better instrument. */ /* Ground lifted off pure black, August 24 2026. Halation — the bloom around light strokes on a near-black field — is part of why light text reads thin at body sizes. #151515 costs almost nothing in contrast (Lc 104 -> 103.7 for headlines) and removes the bloom. The container ladder is re-spaced off the new base. */ --md-sys-color-surface: #FAFAF8; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F6F6F2; --md-sys-color-surface-container: #FFFFFF; --md-sys-color-surface-container-high: #F2F2EE; --md-sys-color-surface-container-highest: #EDEDE8; --md-sys-color-on-surface: #121212; /* headings · APCA Lc 104 */ --md-sys-color-on-surface-body: #2C2C2A; /* ALL BODY TEXT · APCA Lc 89 */ --md-sys-color-on-surface-variant: #42423E; /* meta, 14px+ only · APCA Lc 82 */ /* THE RULE THIS GROUND IMPOSES, and it is permanent: a dark field cannot carry quiet secondary text. On paper you can drop a full step in tone and stay readable; here you cannot. The ramp above spans Lc 104 to 82 and stops. There is no dimmer token and one will not be added. Hierarchy on this site comes from SIZE, WEIGHT, RULE and SPACE. Never from making something dimmer. Every legibility failure to date came from reaching for a quieter grey. */ /* RESOLVED, Aug 24 2026. Green is two things, not one. MARK green is the brand colour at full saturation. It is a SHAPE colour: rules, fills, button backgrounds, the wordmark plus, and display type at 32px+. At Lc 60 it cannot carry text a person reads at label or body size. TEXT green is what green looks like when it has to be read. Reaching for mark green on a 12px label is the single most repeated defect in this system. Two names make it impossible to do by accident. */ --md-sys-color-primary: #0A6B3B; /* MARK green · Lc 60 · shapes + 32px+ */ --md-sys-color-primary-text: #085430; /* TEXT green · Lc 72 · labels 14px+ */ --md-sys-color-on-primary: #FFFFFF; /* ink ON the mark green fill */ --md-sys-color-primary-container: #E8F3EC; --md-sys-color-on-primary-container: #085430; --md-sys-color-error: #9B2226; --md-sys-color-error-container: #2A0A0A; --md-sys-color-outline: #C4C4BD; --md-sys-color-outline-variant: #DCDCD6; /* --- SHAPE + MEASURE ------------------------------------ */ --md-sys-shape-corner-extra-small: 3px; --md-sys-shape-corner-small: 6px; --md-sys-shape-corner-medium: 10px; /* The reading measure. Body copy was running to 980px — about 115 characters a line, against a comfortable 45-75. This is the blog's reading layer, promoted to apply everywhere. */ --cm-measure: 660px; --cm-measure-long: 680px; --cm-gutter: 30px; --cm-page-max: 1000px; /* --- LEGACY ALIASES ------------------------------------- Existing rules across the site still reference these names. Mapped here so nothing breaks mid-refactor. Retire them file by file, then delete this block. */ --black: var(--md-sys-color-surface); --dark: var(--md-sys-color-surface-container-low); --surface: var(--md-sys-color-surface-container-high); --card: var(--md-sys-color-surface-container); --green: var(--md-sys-color-primary); /* MARK — shapes only */ --on-green: var(--md-sys-color-on-primary); /* ink on a mark-green fill */ --green-text-on-dark: var(--md-sys-color-primary-text); /* TEXT — labels */ --green-dim: var(--md-sys-color-primary-container); --green-text: var(--md-sys-color-on-primary-container); --white: var(--md-sys-color-on-surface); --body-text: var(--md-sys-color-on-surface-body); /* Aug 24, 2026 — both of these resolved to on-surface-variant (Lc 54) and were carrying the body copy on every page. They now resolve to on-surface-body (Lc 83). Fixed here rather than in 65 places across 5 files, so no page can drift back. If you need a genuinely dim value for a NON-TEXT element, reference --md-sys-color-on-surface-variant directly and say in a comment why it is not text. */ --muted-lt: var(--md-sys-color-on-surface-variant); /* #42423E · Lc 90.4 */ --muted: var(--md-sys-color-on-surface-variant); /* #42423E · Lc 90.4 — safe at ALL sizes */ --border: var(--md-sys-color-outline-variant); --border-md: var(--md-sys-color-outline); /* NEW, Aug 25 2026. --border is Lc 18.4 and is DECORATIVE ONLY. WCAG 1.4.11 needs 3:1 for an interactive boundary. Inputs, checkboxes and any control edge use this and nothing else. */ --border-control: #8E8E88; /* Lc 60.3 */ /* Evidence elements. Division is NEVER coloured as a failure. */ --ev-creates: var(--md-sys-color-primary); --ev-divides: #C9CCC6; --ev-unclassifiable: #EDEDE8; --measure: var(--cm-measure-long); --serif: var(--md-ref-typeface-brand); --sans: var(--md-ref-typeface-plain); --mono: var(--md-ref-typeface-mono); } /* ============================================================ BASE ============================================================ */ body { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface-body); font-family: var(--md-sys-typescale-body-large-font); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); font-weight: var(--md-sys-typescale-body-large-weight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ TYPE ROLE CLASSES Apply these instead of setting sizes inline. ============================================================ */ .md-display-large, .md-display-small, .md-headline-medium, .md-headline-small, .md-title-large, .md-title-medium, .md-body-large, .md-body-medium, .md-body-small, .md-label-large, .md-label-medium, .md-label-small { margin: 0; } .md-display-large { font-family: var(--md-sys-typescale-display-large-font); font-size: var(--md-sys-typescale-display-large-size); line-height: var(--md-sys-typescale-display-large-line-height); font-weight: var(--md-sys-typescale-display-large-weight); letter-spacing: var(--md-sys-typescale-display-large-tracking); color: var(--md-sys-color-on-surface); } .md-display-small { font-family: var(--md-sys-typescale-display-small-font); font-size: var(--md-sys-typescale-display-small-size); line-height: var(--md-sys-typescale-display-small-line-height); font-weight: var(--md-sys-typescale-display-small-weight); letter-spacing: var(--md-sys-typescale-display-small-tracking); color: var(--md-sys-color-on-surface); } .md-headline-medium { font-family: var(--md-sys-typescale-headline-medium-font); font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); font-weight: var(--md-sys-typescale-headline-medium-weight); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); color: var(--md-sys-color-on-surface); } .md-headline-small { font-family: var(--md-sys-typescale-headline-small-font); font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); font-weight: var(--md-sys-typescale-headline-small-weight); letter-spacing: var(--md-sys-typescale-headline-small-tracking); color: var(--md-sys-color-on-surface); } .md-title-large { font-family: var(--md-sys-typescale-title-large-font); font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); font-weight: var(--md-sys-typescale-title-large-weight); letter-spacing: var(--md-sys-typescale-title-large-tracking); color: var(--md-sys-color-on-surface); } .md-title-medium { font-family: var(--md-sys-typescale-title-medium-font); font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); font-weight: var(--md-sys-typescale-title-medium-weight); color: var(--md-sys-color-on-surface); } .md-body-large { font-family: var(--md-sys-typescale-body-large-font); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); font-weight: var(--md-sys-typescale-body-large-weight); color: var(--md-sys-color-on-surface-body); max-width: var(--cm-measure); } .md-body-medium { font-family: var(--md-sys-typescale-body-medium-font); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); font-weight: var(--md-sys-typescale-body-medium-weight); color: var(--md-sys-color-on-surface-body); } .md-body-small { font-family: var(--md-sys-typescale-body-small-font); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); font-weight: var(--md-sys-typescale-body-small-weight); color: var(--md-sys-color-on-surface-body); } .md-label-large { font-family: var(--md-sys-typescale-label-large-font); font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line-height); font-weight: var(--md-sys-typescale-label-large-weight); letter-spacing: var(--md-sys-typescale-label-large-tracking); text-transform: uppercase; } .md-label-medium { font-family: var(--md-sys-typescale-label-medium-font); font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line-height); font-weight: var(--md-sys-typescale-label-medium-weight); letter-spacing: var(--md-sys-typescale-label-medium-tracking); text-transform: uppercase; } .md-label-small { font-family: var(--md-sys-typescale-label-small-font); font-size: var(--md-sys-typescale-label-small-size); line-height: var(--md-sys-typescale-label-small-line-height); font-weight: var(--md-sys-typescale-label-small-weight); letter-spacing: var(--md-sys-typescale-label-small-tracking); text-transform: uppercase; } /* ============================================================ ACCESSIBILITY FLOOR ============================================================ */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 3px; border-radius: var(--md-sys-shape-corner-extra-small); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }