/* ========================================================================== Grafted design tokens — "Daylight" Decided 1 August 2026. Supersedes the Ink and Gold palette for all surfaces except the icon tile and the footer band (see §6). Every pairing below was checked with the WCAG 2.1 relative luminance formula. Ratios are recorded in comments. Do not introduce a colour that is not in this file, and do not use a token outside the role it names. TWO PLACES CARRY LITERALS OUTSIDE THIS FILE, both unavoidable: 1. in index.html carries #FBFAF6 — a meta tag cannot reference a custom property. 2. brand/grafted-mark-{spruce,paper}.svg carry #0B5A46 and #FBFAF6 in their fill attribute — an SVG file cannot read the page's tokens. Both are generated from grafted-mark-gold.svg by fill swap alone; the path is untouched. If --paper or --spruce changes, regenerate those three together. ========================================================================== */ :root{ /* --- 1. Neutrals ------------------------------------------------------- Warm, not grey. Paper is the page; white is a raised surface on it. */ --paper: #FBFAF6; /* page background */ --surface: #FFFFFF; /* cards, forms, anything raised */ --surface-sunk: #F3F2EC; /* inputs, code, inset areas */ --ink: #16191C; /* body text 16.9:1 on paper */ --ink-muted: #5C6470; /* secondary text 5.7:1 on paper */ --line: #E2E0D6; /* decorative dividers, card edges */ /* CORRECTED 1 Aug: was #8F8D7F. That value is 3.20:1 on --paper but only 2.98:1 on --surface-sunk — and the input rule below pairs the two, so the inside edge of every input border missed 1.4.11. #8C8A7C clears 3:1 on all three surfaces it can touch: paper 3.33, white 3.48, sunk 3.10. */ --line-strong: #8C8A7C; /* input borders 3.10:1 vs sunk, meets 1.4.11 */ /* --- 2. Primary: spruce ------------------------------------------------ Carries the graft metaphor. Reads as growth, not as money. */ --spruce: #0B5A46; /* default 8.2:1 on white */ --spruce-hover: #084537; /* hover 11.0:1 on white */ --spruce-active: #05392C; /* pressed, footer band 12.9:1 on white */ --spruce-tint: #E7F0EB; /* filled panels, success background */ --spruce-tint-line: #CBDDD2; /* border for the above */ --on-spruce: #FFFFFF; /* text on any spruce fill */ /* --- 3. Gold: verification only ---------------------------------------- Gold no longer means Grafted. Gold means verified. It appears on the verified badge and nowhere else on a light surface. It is NEVER used as text, a link or a button fill: gold on paper is 1.6:1 and illegible. */ --gold: #F0C24B; /* badge fill */ --on-gold: #3A2E06; /* badge text 8.0:1 on gold */ /* --- 4. States --------------------------------------------------------- Two feedback colours only. Spruce means the check passed. Red means the shift is held back. A third amber state would collide with verified, so pending is neutral, not yellow. */ --pass: var(--spruce); --pass-bg: var(--spruce-tint); --held: #B3261E; /* icon and fill 6.5:1 on white */ --held-text: #7A1913; /* text 9.6:1 on held-bg */ --held-bg: #FDF0EE; --held-line: #F2CFCA; --on-held: #FFFFFF; --pending: var(--ink-muted); --pending-bg: var(--surface-sunk); /* --- 5. Focus ---------------------------------------------------------- Two rings, so focus is visible on paper and on a spruce fill alike. */ --focus: #0B5A46; --focus-halo: #FFFFFF; /* --- 6. Ink and gold, retained ------------------------------------------ Not discarded, concentrated. The icon tile stays dark because a paper tile disappears in a browser tab strip, and gold on ink is the one place gold still passes (8.1:1). Also used for the footer band if a dark close to the page is wanted instead of spruce-active. */ --tile: #0C0E13; --tile-mark: #D4A017; /* --- 7. Type and shape (unchanged, recorded so nothing drifts) --------- */ --radius-sm: 6px; --radius: 10px; --radius-pill: 999px; } /* -------------------------------------------------------------------------- Applied roles. Keep these thin: tokens above, components here, nothing hardcoded anywhere else. -------------------------------------------------------------------------- */ body{ background:var(--paper); color:var(--ink); } a{ color:var(--spruce); text-underline-offset:2px; } a:hover{ color:var(--spruce-hover); } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--focus-halo); border-radius:var(--radius-sm); } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); } /* Buttons ---------------------------------------------------------------- */ .btn-primary{ background:var(--spruce); color:var(--on-spruce); border:1px solid var(--spruce); border-radius:var(--radius-sm); } .btn-primary:hover{ background:var(--spruce-hover); border-color:var(--spruce-hover); } .btn-primary:active{ background:var(--spruce-active); border-color:var(--spruce-active); } .btn-primary[disabled]{ background:var(--line); border-color:var(--line); color:var(--ink-muted); } .btn-secondary{ background:transparent; color:var(--spruce); border:1px solid var(--line-strong); border-radius:var(--radius-sm); } .btn-secondary:hover{ background:var(--spruce-tint); border-color:var(--spruce); } /* Inputs ----------------------------------------------------------------- */ input, select, textarea{ background:var(--surface-sunk); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius-sm); } input::placeholder{ color:var(--ink-muted); opacity:1; } input:focus, select:focus, textarea:focus{ border-color:var(--spruce); } input[aria-invalid="true"]{ border-color:var(--held); } /* The verified badge, the only gold on the page ------------------------- */ .badge-verified{ background:var(--gold); color:var(--on-gold); border-radius:var(--radius-pill); font-weight:700; } /* Compliance results ----------------------------------------------------- */ .check-pass{ background:var(--pass-bg); border:1px solid var(--spruce-tint-line); color:var(--ink); } .check-held{ background:var(--held-bg); border:1px solid var(--held-line); color:var(--held-text); } .check-pending{ background:var(--pending-bg); border:1px solid var(--line); color:var(--pending); } /* Footer band ------------------------------------------------------------ */ .site-footer{ background:var(--spruce-active); color:var(--paper); } /* 12.4:1 */ .site-footer a{ color:#9FB3AA; } /* 5.8:1 */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }