/* ============================================================================ 177X — LIGHT SURFACE Source of truth: 177X-ai/brand. Synced, never edited in a consumer repo. The second canonical expression of the 177X theme. Same brand colours, same typefaces, same accent — flipped. Ground becomes Paper, text becomes Ink. Polarity is a PRODUCT CHOICE, not a brand constraint. A product that reads better light (dense tables read all day, long-form documents) takes this file and is no less 177X for it. What it must NOT do is invent its own greys — that is what this file exists to prevent. Load AFTER house/tokens.css and BEFORE products/: fonts.css → tokens.css → surface-light.css → product.css → app styles THE ACCENT RULE ON LIGHT GROUNDS — this is the constraint that makes light different, not a preference: Voltage on Paper .............. 1.15:1 unusable as text Ink on a Voltage fill ........ 15.19:1 excellent Voltage Deep on Paper ......... 4.81:1 passes AA as text So on light, the accent is a FILL — a lime chip, bar, underline or rule with Ink sitting on it. Reach for Voltage Deep only where the accent genuinely has to be text, such as a link. Setting bright Voltage as a text colour on Paper is the one way to get this wrong, and it will look fine to you on a good monitor while being unreadable to everyone else. ========================================================================== */ :root { /* Surfaces — on light, "raised" means lighter, not darker */ --x-ground: var(--x-paper); --x-surface: #FBFAF4; --x-surface-2: #FFFFFF; /* Foreground */ --x-text: var(--x-ink); --x-text-muted: rgba(11, 11, 13, 0.66); /* NOT A TEXT ROLE, despite the name. Settled 2026-08-07 — read this before using it, because its name invites exactly the wrong thing and a product put real content on it on two screens. 3.08:1 on this ground. That is a NON-TEXT figure: it is for a disabled control, a placeholder in an empty field, a drag handle, an icon at reduced opacity — things WCAG either exempts or measures at 3:1 because they are graphics. Put a sentence on it and the sentence fails AA. THERE IS NO THIRD CONTENT TIER BELOW --x-text-muted, and this role is not it. That was measured rather than asserted. Raising this to the lowest alpha that clears 4.5:1 gives 0.58, which composites to OKLCH L 0.531 on Paper — and --x-label is L 0.524. The two land 0.007 apart: a raised "subtle" IS --x-label, rounded. So the third foreground tier a product wants already exists and is called --x-label (4.82:1 here). The tiers, on Paper: --x-text 17.51:1 (L 0.151) · --x-text-muted 6.19:1 (L 0.466) · --x-label 4.82:1 (L 0.524). The step from text to muted is ΔL 0.315. Between muted and AA there is ΔL 0.065 of room, which is not enough to carry a step anyone can see. That is the whole answer. Tertiary CONTENT therefore goes on --x-text-muted. It is still visibly secondary and it is legible. Its value equals --x-control-edge's below. That is a COINCIDENCE of two roles solving to the same alpha against the same target, not evidence that 45% is a text value — see the note on that role. */ --x-text-subtle: rgba(11, 11, 13, 0.45); /* Corrected 2026-08-03, same reason as the dark surface. Graphite is 4.35:1 on Paper and 4.39:1 on Galvanised — below AA at 9-11px, and it gets worse as the ground cools. */ --x-label: #676A71; /* EDGES: TWO DECORATIVE, ONE NOT. Stated outright because it was previously only inferable, and inferring it wrong produces the same measurement panic twice. WCAG 1.4.11 does not ask for 3:1 on every hairline. It asks for it on the boundaries of components you must perceive in order to OPERATE them, and on graphics carrying meaning. A card edge grouping content and a table row divider are neither — they are structure, and they are allowed to be quiet. So --x-rule and --x-rule-strong are legitimately decorative at 1.49:1, and a report that they "fail" is measuring them against a rule that does not apply to them. A text field's border is the other thing. It is the only cue that an input is there and where it ends, so it IS a component boundary and it does need 3:1 — and until --x-control-edge existed, nothing in this file passed. A design handoff reached for #DEDEDA for exactly this job, which lands near --x-rule-strong and would have failed. If a card edge is genuinely too quiet on a dense screen, the answer is --x-elevation-raised, which is defined here and nulled on dark. Not a heavier hairline, which would drag every divider in the product with it. */ /* Edges — DECORATIVE. See the note above the block on what that means. */ --x-rule: rgba(11, 11, 13, 0.10); --x-rule-strong: rgba(11, 11, 13, 0.18); /* A control boundary, and the only edge role that is not decorative. Ink 45% — the lowest alpha clearing 3:1 on every light backdrop in the system, ground and card alike (Paper 3.07, Chalk 3.08, Bone 3.13, and 3.13-3.15 on their surfaces). On white it resolves to #919192, which is the canonical accessible border grey. IT SHARES ITS VALUE WITH --x-text-subtle, and that has already misled a reader once. Both were solved against a 3:1 target on the same grounds, so of course they landed on the same alpha — but only ONE of them is correct at 3:1. A border is a graphic and 3:1 is its standard; a sentence is text and 4.5:1 is. Do not read this value as proof that 45% carries text. */ --x-control-edge: rgba(11, 11, 13, 0.45); /* Signals — see THE ACCENT RULE above */ --x-accent: var(--x-voltage); /* fills, chips, bars, underlines */ --x-accent-text: var(--x-voltage-deep);/* links, accented numerals */ --x-on-accent: var(--x-ink); /* Ink on a Voltage fill — 15.19:1 */ --x-accent-ground: rgba(200, 242, 58, 0.30); /* tinted accent backing — an ok/positive state, never a fill for text. Pair with --x-text. */ --x-flag: #A8391A; /* Ember darkened for light grounds */ --x-on-flag: var(--x-paper); /* text on a flag fill. the light-ground flag is dark, so Paper sits on it — 5.73:1. */ --x-flag-ground: rgba(168, 57, 26, 0.10); /* --- Provenance keys — CATEGORICAL, never status ----------------------- Where a figure came from. Derived in OKLCH at fixed chroma, solving lightness against this ground so all four land at the SAME contrast: equal luminance is what stops one origin reading as more important than another. Promoted from products/coil/tokens.css because any product that shows provenance will want them, and a categorical set defined per-product is one that diverges. Separated from status by FORM, not hue: provenance tags are OUTLINED, status tags are FILLED. That is what lets --x-origin-human sit close to the flag hue without a hand-entered figure reading as a problem. The `-ground` values are the key at 10% over this surface's raised panel. Measured: keys 5.38–5.43:1 on ground; key-on-own-tint 5.01–5.10:1. */ --x-origin-calc: #006E6F; --x-origin-ai: #6656A7; --x-origin-human: #914A7C; --x-origin-external: #5D645C; --x-origin-calc-ground: #E2ECE7; --x-origin-ai-ground: #ECEAEC; --x-origin-human-ground: #F0E8E8; --x-origin-external-ground: #EBEBE5; /* The `by 177X` by-line used by house/lockup.css. X drops to Voltage Deep — bright Voltage on Paper is 1.15:1 (§ 16.5). */ --x-endorsement: url('./assets/endorsement-paper.svg'); }