/* ============================================================ Ink Fusion v28 — design tokens CMYK process palette + paper stock, type scale, spacing. ============================================================ */ :root { /* paper / ink */ --paper: #efe9db; /* Magenta, darkened for surfaces that carry PAPER TEXT AT NORMAL SIZE. The brand magenta #ec1e79 against --paper is 3.45:1. WCAG AA wants 4.5:1 for normal text; it only wants 3:1 for large text (18.66px bold / 24px), which #ec1e79 already clears. So this is not a replacement for --mag and must not become one: decorative bars, halftones and CMYK swatches carry no text and are correct as they are. The VALUE is the rebuild plan's own --c-mag-ink (WAVE-6 V1). An independently derived #c61161 shipped here first; both pass, but two near-identical dark magentas is exactly the drift a token layer exists to prevent, so this defers to the spec. 4.87:1 on --paper, with margin over the 4.5:1 floor. */ --mag-on-paper: #c2145f; --paper-2: #e6dfcd; --ink: #151310; /* CMYK process + spot */ --cyan: #00a7e1; --mag: #ec1e79; --yel: #ffd400; --orange: #ff5a1f; /* ── BRAND INKS (V1) ────────────────────────────────────────────────────── The process colours are ground and decoration; these are the same hues darkened until they can legally carry text. --mag-on-paper shipped first and set the naming, so cyan and orange follow it rather than the spec's --c-*-ink: one convention inside one file beats matching a document. Ratios measured here, not copied: each computed against BOTH paper values, because --paper-2 is the striped-row ground and every one of these loses roughly 0.4 on it. --cyan-on-paper 5.82 on --paper · 5.30 on --paper-2 AA everywhere --orange-on-paper 4.40 on --paper · 4.01 on --paper-2 ⚠ SEE BELOW ⚠ --orange-on-paper is BELOW the 4.5:1 floor for normal text on both grounds. It is legal for large text only (18.66px bold / 24px) and for icons and borders. It is not a general-purpose text colour and must never be used as one — if you need orange body copy, you need a darker orange. */ --cyan-on-paper: #00607f; --orange-on-paper: #c23c07; /* ── GROUND INKS (V4) — 2026-09-11 ──────────────────────────────────────── The inverse of the brand inks above. Those darken a process colour so it can carry text ON paper; this darkens one so PAPER can carry text on IT. Measured, not copied — cream #efe9db on each: --mag #ec1e79 3.45 ✗ below the 4.5 floor --mag-ground #c91a67 4.53 ✓ AA for normal text Why magenta moved and orange did not: cream on orange is 2.58, and orange has to darken about 30% before cream clears 4.5 — at which point it is brick, not orange. Orange instead keeps its exact brand value and carries INK text (5.95 ✓), which is why you will see `color: var(--ink)` on every orange ground. Magenta only needed ~15% and stays unmistakably magenta. --mag itself is UNCHANGED and stays bright: it is still the right colour for CMYK bars, chips, selection swatches and any decoration carrying no text. Use --mag-ground only where paper-coloured text sits on top. */ --mag-ground: #c91a67; /* ── SEMANTIC SCALE (V3) ────────────────────────────────────────────────── Each state is a DARK for text, icons and borders, and a TINT for fills. This exists because the states were already invented, repeatedly. Counted across site-v28, gs-v28 and the plugin's stylesheets: FIVE different greens (#1e9e50 #188743 #14532d #10b981 #ddecd9), FOUR ambers (#b45309 #92400e #fbbf24 #fff8e6) and FOUR reds (#c22f2f #dc2626 #7c1d1d #f6ddd3). Mostly Tailwind defaults, which is what a palette with no answer gets. Darks, measured against both grounds (AA floor 4.5): success 5.39 / 4.91 warning 5.62 / 5.12 danger 6.04 / 5.50 info 5.37 / 4.89 Tints, carrying ink text: 14.59 / 14.85 / 13.85 / 14.79. THREE RULES THAT ARE VISUAL, NOT COPY (Wave 4 §1.1): 1. `refused` and `error` share the danger colour and NOT the treatment. A refusal is a 2px --danger border on --danger-tint, INLINE and attached to the control, offering "show me". An error is the same colours in a DETACHED toast offering "retry". Never render a refusal in error styling. 2. `warned` is yellow-family, never orange and never red. The quality verdict warn says "210 dpi — usable, slightly soft". Tell someone "usable" in red and they stop believing the red. 3. Disabled never uses opacity. `opacity:.5` over a 2.5px ink border on a halftone gives an unpredictable ratio, so disabled is an explicit foreground/background pair. Its 3.88 is deliberately sub-AA: disabled text is meant to read as unavailable. */ --success: #1d6b3a; --success-tint: #d9e8dc; --warning: #8a4b00; --warning-tint: #f6e4c4; --danger: #a81f14; --danger-tint: #f3d9d4; --info: #00658a; --info-tint: #cfeaf6; --disabled-fg: #79736a; --disabled-bg: #dcd5c4; /* lines */ --line: rgba(21, 19, 16, 0.16); /* type */ --f-display: "Syne", sans-serif; --f-body: "Space Grotesk", system-ui, sans-serif; --f-mono: "Space Mono", monospace; /* layout */ --maxw: 1240px; /* ── MOTION ──────────────────────────────────────────────────────────────── --ease was the site's entire motion vocabulary: one curve, no durations, so every component invented its own literal (0.12s, 0.15s, 0.8s, a bare 1800). DURATION is chosen by how much of the customer's attention the change is entitled to, not by how far anything travels. Steps are ~1.5x rather than linear, because perceived duration does not track distance linearly. tap acknowledging a finger that is still on the glass. No travel, so deliberately under 100ms. state a control latches or unlatches in place. swap content replaced inside a box whose size is already reserved. view the largest move on the page — a panel changes what it shows. reveal something that was not there is now there. */ --dur-tap: 90ms; --dur-state: 140ms; --dur-swap: 220ms; --dur-view: 320ms; --dur-reveal: 480ms; /* --ease is an easeOutQuint: ~90% of travel in the first 30% of the duration, then a long crawl. Correct for an 800ms scroll reveal, wrong for a 140ms state change, where the tail reads as smeared rather than crisp. It KEEPS its single job on .reveal and is not reused. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-state: cubic-bezier(0.2, 0, 0, 1); /* workhorse: in-place change */ --ease-in: cubic-bezier(0, 0, 0.2, 1); /* something arriving */ --ease-out: cubic-bezier(0.4, 0, 1, 1); /* something leaving */ --ease-snap: steps(1, end); /* a DELIBERATE no-tween, named so it cannot be mistaken for an omission — the custom-size rectangle must not lag a keystroke behind the number. */ } /* REDUCED MOTION: shorten, do not delete. WCAG 2.3.3 and current practice are to reduce or replace non-essential motion. A state change that fades still communicates; one that teleports does not. Redefining the tokens keeps every transition DECLARED while collapsing the time, which is why this is a token override and not a blanket kill. base.css still carries a global `transition-duration: 0.01s !important` as a backstop for third-party CSS — pages.css re-asserts these values for the DTF calculator, which is the only scope built against them. */ @media (prefers-reduced-motion: reduce) { :root { --dur-tap: 0ms; --dur-state: 100ms; --dur-swap: 120ms; --dur-view: 120ms; --dur-reveal: 120ms; } }