/* aibotkit-child · system.css — the part of the design law theme.json CANNOT hold. * * ⛔ WHY THIS FILE EXISTS. * `theme.json` emits every token once, at `:root`. The law re-points SIX tokens * inside a dark section, and a scoped re-point has no expression in theme.json * at all -- there is no "these values, but only in here". So the tokens live in * theme.json (U2) and the SCOPE lives here (U2b). Nothing is duplicated: this * file only ever points one token at another. * * ⛔ IT IS NOT A PER-PAGE FILE, and must never become one. * docs/reference/gotchas.md trap 27 refuses a new asset keyed on a post id, and * the 14 `page-*.css` files in this directory are generated migration residue * that each carry a "do not hand-edit" banner. This one is hand-authored, global, * and named for what it is. * * ⛔ NO CASCADE LAYER. WordPress's own styles are unlayered and unlayered CSS * beats layered CSS at any specificity -- the same measurement that took the * layer off Tailwind's utilities in U1a. See KD36. * * Source of truth: the `aibotkit-marketing-design-system` skill, which DESIGN.md * is a symlink to. The prototype that proved these values is * docs/research/prototypes/shared/foundation.css:3674-3683. */ /* ── The dark-ground inversion ─────────────────────────────────────────────── * * ⚠ READ THE SELECTOR BEFORE CHANGING IT. `.on-ink` is NOT a claim that the * ground is dark. It is a scoped TOKEN REMAP, and it is correctly carried by the * closing banner on a LIME ground. Keying the inversion on "is it dark" was * tried in the prototype and was wrong. * * ⛔ `.figure--ink` IS EXCLUDED ON PURPOSE. It is the ground under a drawn * product, which keeps its light ink family so the drawing stays separated from * the page floor. * * ⛔ AND THE COST OF GETTING THE LIST WRONG IS MEASURED, NOT THEORETICAL. * `.nevers` was in this list until 2026-09-18. The inversion put `--body` * (#0C0C09) onto #575642 -- 2.626:1, a hard contrast failure on four separate * strings -- and the automated guard did not see it, because a gradient paints * `background-image`, so the colour check read the ground as transparent and * measured the section behind it at 19:1 instead. */ .section--ink, .on-ink:not(.figure--ink) { --wp--custom--color--ink-heading: var(--wp--custom--color--heading); --wp--custom--color--ink-body: var(--wp--custom--color--body); --wp--custom--color--ink-muted: var(--wp--custom--color--secondary); --wp--custom--color--ink-hairline: var(--wp--custom--color--hairline); --wp--custom--color--brand-on-ink: var(--wp--custom--color--brand-text); /* ⭐ THE HERO AND THE CLOSING BANNER NAME DIFFERENT TOKENS ON PURPOSE, and * this line is why. The hero band reads `--brand-lift`; the closing band * reads `--brand`. Inside this remap they resolve to the same colour, so the * two bands look related without being the same declaration. Copying one * stop-for-stop onto the other was a real defect in the prototype. */ --wp--custom--color--brand-lift: var(--wp--custom--color--brand); color: var(--wp--custom--color--body); } /* The focus ring follows the remap rather than being restated. */ .on-ink :focus-visible { outline-color: var(--wp--custom--color--brand-lift); } /* ── Heading tracking, and it follows the SIZE ─────────────────────────────── * * ⛔ THE PARENT THEME SETS `-0.1px` ON EVERY HEADING, AND A FIXED PIXEL VALUE * CANNOT SATISFY A PROPORTIONAL RULE. `twentytwentyfive/theme.json` puts * `letterSpacing: -0.1px` on `elements.heading`. Our own theme.json sets * `letterSpacing: normal` at the ROOT, which is why body text is right, but it * never overrides `elements.heading` -- so the parent's value survived on every * heading of the site. At 42px `-0.1px` is `-0.0024em`, ELEVEN TIMES looser * than the display tier. The bigger the headline, the wronger it got. * * ⚠ MEASURED 2026-09-20, all 38 published URLs at 1440 and 390: * 37 of 38 carried at least one wrong-tier element. The ONE clean URL was * `/ai-chatbot-for-wordpress/`, the page H2 rebuilt. `SVC-7`. * * ⛔ AND CSS CANNOT EXPRESS THE LAW EXACTLY. The tiers are a STEP function of * the rendered size -- 0 below 20px, -0.01em from 20 to 27px, -0.0275em at 28px * and above -- and there is a 0.5px JUMP at 28px. No continuous expression can * cross a jump. The legacy pages make a tag-based rule useless as well: on one * page `h2` renders at 10, 14, 15, 22, 23, 28, 30, 32, 33 and 36px, because the * Elementor migration wrote the size into the CONTENT. * * ⭐ SO THIS IS THE LINE THROUGH THE TWO ENDS, CLAMPED TO THEM. * It is EXACT at 28px and above, EXACT below about 19px, and too loose inside * the 20-27px band -- which is the one band where the difference is invisible. * at 14px → 0 (the law wants 0) ✅ * at 22px → -0.193px (the law wants -0.22px) ✅ inside tolerance * at 28px → -0.770px (the law wants -0.77px) ✅ exact * at 42px → -1.155px (the law wants -1.155px) ✅ exact * The two constants are the line through (20px, 0) and (28px, -0.77px): * slope -0.09625 per px, intercept +1.925px. * * ⛔ DO NOT "SIMPLIFY" THIS TO ONE VALUE. A flat -0.0275em would crush every * 14px heading, and at 390 those outnumber the large ones two to one. * * ⚠ IT DOES NOT REACH A HEADING CARRYING AN INLINE `letter-spacing`. A handful * of migrated headings carry `letter-spacing:-1.5px` in `post_content`; those * are content decisions and are left alone rather than fought with `!important`. * * SPECIFICITY: theme.json prints `:root :where(h1,…)` at (0,1,0). A bare tag * selector would lose, so this one is (0,2,1). * * ⛔ AND THE `:not()` IS NOT TIDINESS -- IT REPAIRS A REGRESSION THIS RULE * CAUSED. Without it, (0,2,1) BEAT the one-class rule that gives the rebuilt * page's card headings their lead tier, and `/ai-chatbot-for-wordpress/` went * from 0 wrong-tier elements to 11 -- every `h3` at 21px in a card. ⚠ It is the * same lesson as `U6`: RAISING ONE RULE'S SPECIFICITY IS NEVER LOCAL. * A `.section` states its own type deliberately. This rule is for everything * the redesign has not reached yet, and it must stay out of the parts it has. */ :root .wp-site-blocks :is(h1, h2, h3, h4, h5, h6):not(.section *) { /* ⚠ THE FLOOR IS THE TOKEN; THE TWO CONSTANTS CANNOT BE. The token is * `-0.0275em`, a LENGTH, so multiplying it would give em-squared -- CSS has * no way to do arithmetic on it. The slope and intercept are DERIVED from it * and stated here: slope = 0.0275 x 28/8 = 0.09625, intercept = 20 x 0.09625 * = 1.925. ⛔ Change the display tier and these two must be recomputed. */ letter-spacing: clamp(var(--wp--custom--tracking--display), 1.925px - 0.09625em, 0px); } /* ⛔ A BARE TAKES THE BROWSER'S 700, AND THE LAW DECLARES THREE WEIGHTS. Measured 2026-09-24: four inside the drawings painted 700 -- the prices and the delivery line -- while painted 500 from elsewhere. The law has always said is the EMPHASIS weight; nothing in the theme set it. */ b, strong { font-weight: var(--wp--custom--weight--emphasis); }