/* ============================================================ BOZA v7 — Design tokens (locked style: Heritage Editorial) One source of truth for every block prototype. Swapping this file swaps the entire personality of the library. ============================================================ */ :root{ /* color */ --paper: #FBFAF6; /* page ground */ --tint: #EFF3EE; /* soft green tint sections */ --tint-2: #F5F2EA; /* warm second tint */ --ink: #17251F; /* green-black text and dark sections */ --ink-soft: #55645C; /* muted body text */ --green: #0E6B52; /* heritage green, primary accent */ /* Each of these is declared twice: the literal it replaced, then the mix. A browser without color-mix() drops the mix and keeps the literal; one with it takes the mix, the last declaration winning. */ --green-deep: #0A4E3C; --green-deep: color-mix(in srgb, var(--green) 73%, black); /* pressed / dark sections; was #0A4E3C by hand, the mix is #0A4E3C */ --amber: #D9822B; /* rare warm flourish: marks, rules, dots, icons, quotation glyphs */ --amber-ink:#985B1E; /* the same flourish where it is text somebody reads. #D9822B is 2.80:1 on the paper and 2.61 on the tint, so every date, year, count and numeral the library set in it failed AA -- 121 of them. This clears 4.5 on all four light grounds: paper 5.22, tint 4.86, warm 4.88, the amber tint 4.66. */ --line: #DCE2DB; /* soft rules */ --mark-faint: #A8B3A9; /* a mark that must not read as text: the chevron between breadcrumbs. Was a literal in the hero family until 9 September 2026, with nothing for a dark ground. */ --line-dark: var(--ink); /* joined-frame borders; the ink, which it always equalled */ --tint-deep: #E2ECE4; --tint-deep: color-mix(in srgb, var(--tint) 94%, var(--green)); /* one shade under --tint; was #E2ECE4 by hand, the mix is #E2EBE5. For anything resting inside a surface whose hover is --tint, so it stays visible at the moment of hover instead of dissolving into it. */ --ink-faint:#5D7163; /* captions and image credits on paper. #6F8676 read at 3.76:1 on the paper and 3.50 on the tint; this is 5.02 and 4.67, and it is still the quietest ink there is. */ --amber-soft:#F4BE84; /* the amber that survives a dark ground. #F0B370 was 4.44:1 on the green, which is the ground it exists for. */ /* the dark skin. Every family that needed one used to invent it, which is how the library ended up with five muted greys and fourteen alphas of white. These are the values header, footer and system independently agreed on. */ --on-ink-fg: #fff; --on-ink-mute: #CBD6CF; /* resting links, secondary text */ --on-ink-dim: #A9B5AE; /* body copy on --ink */ --on-ink-dim-green:#B9CCC2; --on-ink-dim-green: color-mix(in srgb, var(--green) 10%, var(--on-ink-mute)); /* body copy on --green-deep; was #B9CCC2, the mix is #B8CBC2 */ --on-ink-faint: #86938B; /* labels, captions, placeholders */ --on-ink-line: rgba(255,255,255,.2); /* hairline rules */ --on-ink-line-soft:rgba(255,255,255,.14); --on-ink-line-strong:rgba(255,255,255,.3);/* a rule that has to be seen, not felt */ --on-ink-border: rgba(255,255,255,.4); /* control outlines */ --on-ink-border-strong:rgba(255,255,255,.5); --on-ink-hot: rgba(255,255,255,.7); /* a control hovered on a photograph */ --on-ink-fill: rgba(255,255,255,.06);/* resting fill */ --on-ink-fill-hi: rgba(255,255,255,.12);/* hover fill. Never equal to the resting one. */ --scrim-modal: rgba(23,37,31,.45); --scrim-modal: color-mix(in srgb, var(--ink) 45%, transparent); /* the ink at .45 */ --scrim-image: rgba(10,26,20,.5); --scrim-image: color-mix(in srgb, color-mix(in srgb, var(--ink) 60%, black) 50%, transparent); /* was rgba(10,26,20,.5); the ink towards black, at .5 */ /* placeholder artwork, written out seventeen times before this existed */ --ph-from: #E3EBE2; --ph-to: #CCDACC; --ph-fg: #8CA391; --ph: linear-gradient(150deg, var(--ph-from), var(--ph-to)); --ph-dark: linear-gradient(150deg, #31473E, #1E2E27); /* semantic (for alerts etc., derived from the family) */ /* A soft alert is a fill, and a fill is invisible on the same fill: the info tier is the tint and so is the tint band, so P5's members notice was a paragraph floating in a section with no panel round it at all. Measured against the three light grounds, info sits 0 from the tint and 11 from the warm, and success sits 10 from the tint. Rather than a table of which tier may stand on which band, every soft tier carries a hairline of its own accent and reads as a panel wherever it lands. */ --info-line:#CBD8CA; /* each soft tier's hairline sits about the same distance under its own fill, so no tier reads as louder than another */ --ok-bg: #E9F2EB; --ok-line: #C3DBCA; --ok-bg: color-mix(in srgb, var(--tint) 98%, var(--green)); --ok-fg: var(--green); --ok-line: color-mix(in srgb, var(--ok-bg) 81%, var(--green)); /* were #E9F2EB, #0E6B52, #C3DBCA by hand */ --warn-bg: #F7ECD9; --warn-fg: var(--amber-ink); --warn-line:#E3C89C; --err-bg: #F5E7E2; --err-fg: #9C3A24; --err-line: #E0C0B4; /* The error colour, lightened for a dark ground, and the same idea as --amber-soft one line above: the warm accent survives the ink by being lifted rather than by being shouted. --err-fg is a paper colour and measures 2.3:1 on --ink, which is not a near miss. Nothing in the library ever drew an error on a dark band -- the state only exists after somebody presses a button -- so it was found on the first form in the footer rather than by a checker. Measured: 8.6 on --ink and 5.2 on --green-deep, which are the only two dark grounds a form is drawn on. A red light enough to clear --green as well is a pink. */ --err-on-ink:#F2AE9E; /* type */ --serif: 'Fraunces', Georgia, serif; --sans: 'Instrument Sans', system-ui, sans-serif; /* Each size is the library's clamp times a scale factor, so a theme can make the headings, the lead or the small size a step larger or smaller with one number, and at 1 the page is the page as drawn (3 September 2026). */ --scale-head: 1; --scale-lead: 1; --scale-small: 1; --fw-head: 520; --fs-hero: calc(clamp(3.2rem, 5.8vw, 5rem) * var(--scale-head)); /* a bare h1 outside a hero, a page title set by hand: between the hero and h2, so a heading a person sets to H1 is larger than the H2 under it (13.0, 11 September 2026) */ --fs-h1: calc(clamp(2.4rem, 4.2vw, 3.6rem) * var(--scale-head)); --fs-h2: calc(clamp(2rem, 3.3vw, 2.9rem) * var(--scale-head)); --fs-h3: calc(1.55rem * var(--scale-head)); --fs-h4: calc(1.25rem * var(--scale-head)); /* the lead scales with the page. It was a fixed 1.28rem, so on a phone the heading above it came down and the lead did not, and the two ended up nearly the same size. */ --fs-lead: calc(clamp(1.06rem, .92rem + .6vw, 1.28rem) * var(--scale-lead)); --fs-body: 1.0625rem; --fs-small: calc(.92rem * var(--scale-small)); /* shape */ /* The hairline. It was written out as `1.5px solid` 244 times, which made the single most repeated decision in the theme the one thing with no place to change it -- and tokens.css claims that swapping this file swaps the whole personality. A heavier or lighter line is a different personality. The soft rule is the second weight and the only other one the library uses. */ /* A pixel since 14.105, from review. It was a pixel and a half, and Chromium draws a 1.5px border as 1px at every density (151, measured), so the Options' Soft and Regular were one line there; Regular is a pixel of the full ink now, Soft the same pixel in a lighter ink (inc/shape.php), and Strong two. */ --line-w: 1px; /* structural: cards, frames, joined cells, controls */ --line-w-soft: 1px; /* soft rules inside a surface */ --line-w-strong: 2px; /* a spinner, a joined gallery, a quote's bar */ /* a tile's frame follows the hairline unless the theme says a tile has none */ --frame-w: var(--line-w); --r-card: 16px; --r-btn: 999px; --r-sm: 10px; /* chips, code, badges, small media */ --r-xs: 6px; /* Two more steps, found on 3 September 2026 when every literal radius was made to read a token: twelve pixels on the things inside a card (a field, an inner picture, an icon square, a menu row) and fourteen on a tile that stands alone (a gallery tile, a photograph, a stage, a map box). */ --r-inner: 12px; --r-tile: 14px; /* control heights. Buttons used to have no height at all: it fell out of padding plus line-height, which is why nothing could reliably sit beside one. These are declared, so a circular icon link and a button of the same size are the same height by construction rather than by coincidence. A small button is also exactly the default icon chip, 44px. */ --h-ctl-s: 44px; --h-ctl: 56px; --h-ctl-l: 64px; /* where the sticky bar's top edge sits: 0 on a page. The theme's adapter points it at WordPress's admin bar when a person is signed in, so the bar is not drawn under it (13.0) */ --hdr-top: 0px; /* the air between the header and anything that holds still under it: the article's side column, a column that stays in view, the chapters' picture (14.88). 28px read as welded to the header on a wide screen. */ --stick-air: clamp(32px,3vw,48px); /* One line weight for every icon, in rendered pixels rather than in the icon's own coordinates. stroke-width is measured in viewBox units, so the same number draws a different line at every size -- which is why the library grew seventeen of them, each block compensating for its own sizes. It compensated well from 12 to 17px, where the rendered line held between 1.28 and 1.42px, and then lost the thread: 1.8px at 22, 2.0 at 24, 3.2 at 38, and a 1.42-to-3.54 spread on the Icons specimen alone. Paired with vector-effect:non-scaling-stroke in base.css, this is that rendered number, once, for all of them. */ --icon-w: 1.35; /* the round icon container. Five steps, and the three that match a button. */ --ic-xs: 30px; --ic-sm: 38px; --ic-md: 44px; --ic-lg: 50px; --ic-xl: 54px; --shadow: 0 1px 2px rgba(23,37,31,.05), 0 14px 34px -18px rgba(23,37,31,.16); --shadow-lg:0 2px 4px rgba(23,37,31,.06), 0 24px 48px -20px rgba(23,37,31,.22); --shadow-dark: 0 14px 34px -14px rgba(0,0,0,.45); /* a lift on a dark ground: the video's play, a cream button hovered on ink */ /* motion. Four clocks, not thirty-two. --ease-out unless the value is being driven by scroll or runs forever, in which case linear. */ --ease-out: cubic-bezier(.22,1,.36,1); --t-fast: .22s; /* state changes: colour, border, background, small nudges */ --t-mid: .5s; /* disclosures, panels, digit rolls, crossfades */ --t-reveal: .9s; /* entrances */ --t-meter: 1.4s; /* rings, bars and count-ups, so a number lands with its meter */ /* on-scroll motion. One intensity dial, not a menu of effects: every gesture in the library reads these two, so a site changes its whole temperament by changing them once. --m-travel 0 with --m-time intact still fades. */ --m-travel: 24px; /* how far a rise-in travels */ --m-time: .8s; /* how long any entrance takes */ --m-stagger:70ms; /* the beat between siblings in a group */ --m-drift: .12; /* parallax: fraction of scroll distance the media lags by */ --m-drift-soft: .06; /* a section's gentler and bolder drift (14.77); */ --m-drift-strong:.18; /* the regular one is --m-drift itself */ /* layout. Media queries cannot read custom properties, so these three are a naming convention rather than a mechanism: every family uses these numbers and no others. The library previously used nineteen. */ --container: 1220px; /* the narrow measure, for a section of running words and for any block that should not use the whole container. Six families had declared it at 820, 860 or 880 before it was one number (round 7); a Section can be set to it since 14.28, where the reviewer asked for "about 880, and match what we have". */ --container-narrow: 860px; /* --bp-phone : 640px one column --bp-tablet: 1000px the halfway layout --bp-wide : 1100px the first step down from the full desktop grid */ /* options */ --u-hint: 0; /* faded 1px underline hint under links: 0 = off (default), .18 = subtle */ --u-hint-nav: 0; /* what the header's nav reads, as its own value and not a reference to --u-hint: the bridge carries every token that references another onto the body, where the reference would resolve against the body's own hint. A site that turns the hint on for its text links (the theme's option sets --u-hint on the body) leaves the nav at this resting value, because a hint under every menu item read as every item being current (B16, the first real site). */ --u-color: var(--green); /* animated underline color; dark sections flip it to white automatically */ }