/* ============================================================ ImpromptBrü — sub-brand token layer Chris's public PKM / blog. A SIBLING property to cwagner.co, not a section of it: same indigo spine, same type, same spacing. Two things change. 1. WARMER PAPER. The page steps one notch deeper and browner, as though it had been sitting out. 2. A DIFFERENT ACCENT. Where cwagner.co points with amber, ImpromptBrü points with JADE. It is the sub-brand's accent, not a decorative trace: eyebrows, rules, links, the callout field, the brew-stage marker, and the BrewMark interior all take it. Amber does not appear on an ImpromptBrü surface — one accent per property, and here it is green. Derivation, sampled off reference/impromptbru-logo-pre2026.png rather than recalled: the pre-2026 mint is #A7D4AA (hue 124deg, L 74%), which measures 1.48:1 on the paper below and could not carry anything. #2A8560 is lightness down 40 points and hue rotated 32deg to 156deg, toward the blue-green side so it sits with the indigo spine. The old wordmark's brown (#B68567) has no successor: it was the wordmark's colour, never the accent, and the jade took that job. Scope it, do not fork it: ⚠️ SET BRAND AND THEME ON THE SAME ELEMENT. These overrides and the parent's [data-theme="light"|"dark"] blocks have equal specificity, so a nested [data-theme] on an inner element re-declares the parent values closer to the node and silently wins: the accent snaps back to AMBER inside that subtree. On the site both live on and this never arises. In a card, a preview pane, or any panel that pins its own theme, write data-brand beside it. The --ib-* primitives follow the theme, so the single override block below serves light and night alike. Pure CSS, so it survives the Astro/VaultCMS port untouched. ============================================================ */ :root { /* Paper — the warmer field. Deeper and browner than --brand-cream. */ --ib-paper: #F7F1E7; --ib-paper-raised: #FCF8F1; /* MUST stay lighter than paper: cards lift */ --ib-border: #E7DBC7; --ib-rule: #E4D8C6; /* Jade — the accent, in four steps that mirror the amber ramp. --ib-jade is the MARK step: 4.04:1 on paper, which clears the 3:1 non-text bar for rules, dots, ring and the BrewMark interior, and fails AA as small text. Any jade WORD takes --ib-jade-ink, which is deeper AND more saturated than the mark step — chroma is what makes a small accent word read as an accent rather than as dark ink. */ --ib-jade: #2A8560; --ib-jade-ink: #00794A; /* 4.88:1 on paper — accent text, links */ --ib-jade-wash: #C2E3D0; /* callout + stage-pill field */ --ib-jade-on-wash: #005E3C; /* 5.70:1 on the wash */ --ib-on-jade: #FFFFFF; /* label on a solid jade fill: 4.54:1 */ /* Inks re-tuned for paper. #F7F1E7 is darker than cream, so the cream-tuned faint step drops to 4.37:1 and fails AA. This is the same surface-specific ink case the README documents for shell. */ --ib-text-faint: #635C78; /* 5.69:1 on paper */ } [data-theme="dark"] { --ib-paper: #1F1A31; --ib-paper-raised: #332B4D; --ib-border: rgba(237, 233, 245, 0.14); --ib-rule: rgba(237, 233, 245, 0.09); --ib-jade: #7FB79A; /* 7.31:1 on night paper */ --ib-jade-ink: #7FB79A; --ib-jade-wash: #204236; --ib-jade-on-wash: #8FC7A8; --ib-on-jade: #17122B; /* night jade is a LIGHT fill: 7.90:1 */ --ib-text-faint: #9E95C0; } @media (prefers-color-scheme: dark) { :root { --ib-paper: #1F1A31; --ib-paper-raised: #332B4D; --ib-border: rgba(237, 233, 245, 0.14); --ib-rule: rgba(237, 233, 245, 0.09); --ib-jade: #7FB79A; --ib-jade-ink: #7FB79A; --ib-jade-wash: #204236; --ib-jade-on-wash: #8FC7A8; --ib-on-jade: #17122B; --ib-text-faint: #9E95C0; } } [data-theme="light"] { --ib-paper: #F7F1E7; --ib-paper-raised: #FCF8F1; --ib-border: #E7DBC7; --ib-rule: #E4D8C6; --ib-jade: #2A8560; --ib-jade-ink: #00794A; --ib-jade-wash: #C2E3D0; --ib-jade-on-wash: #005E3C; --ib-on-jade: #FFFFFF; --ib-text-faint: #635C78; } /* ---------- THE SCOPE ---------- One block, both themes, because --ib-* already follows the theme. Paper, lines, the faint ink, and THE ACCENT are re-pointed; the brew stage is added. Heading ink, body ink, the violet spine, type and spacing are untouched — that is what makes this a sibling rather than a second brand. */ [data-brand="impromptbru"] { --color-bg-page: var(--ib-paper); --color-bg-surface: var(--ib-paper); --color-bg-surface-raised: var(--ib-paper-raised); --color-border: var(--ib-border); --color-border-subtle: var(--ib-border); --color-rule: var(--ib-rule); --color-text-faint: var(--ib-text-faint); /* The accent goes green. Every component that reads --color-accent or --color-text-accent follows without a single override. */ --color-accent: var(--ib-jade); --color-accent-hover: var(--ib-jade-ink); --color-text-accent: var(--ib-jade-ink); --color-ring: var(--ib-jade); --color-bg-callout: var(--ib-jade-wash); --color-text-accent-on-peach: var(--ib-jade-on-wash); /* text on the callout field */ --color-on-accent: var(--ib-on-jade); /* jade is a dark fill on light */ --color-badge-amber-bg: var(--ib-jade-wash); --color-badge-amber-ink: var(--ib-jade-on-wash); /* Brew stage — a USE of the accent, not a fourth colour. */ --color-stage: var(--ib-jade); --color-stage-ink: var(--ib-jade-ink); --color-stage-wash: var(--ib-jade-wash); /* Brew stage, the ORDINAL part. Three stages in one accent means the states cannot be told apart by hue, so they are told apart by LEVEL: the marker is a vessel filling up. Steeping is barely in, brewing is exactly half, poured is full. Half is the middle step because a HORIZON across the middle of a circle is unmistakable at 11px, where 60-something percent reads as "nearly full" and collapses into poured. Ordinal, colour-blind safe, survives being printed. Percentages, not pixels, so one marker drawing serves 11px in a dense row and 16px on a note header. */ --stage-level-steeping: 26%; --stage-level-brewing: 50%; --stage-level-poured: 100%; --color-stage-rim: var(--ib-jade); /* the marker ring: non-text, 3:1 bar */ --color-stage-fill: var(--ib-jade); /* the level inside it */ /* Type marks. A blended stream has to be readable before a word is read, so a post and a note differ in BOTH shape and ink: the post takes the parent's violet spine and a diamond, the note takes the accent and a circle. Hue alone would fail for a red-green reader; shape alone would be too quiet at 11px. Neither is a new colour. */ --color-type-post: var(--color-primary); --color-type-note: var(--ib-jade); }