/* ============================================================================= tokens.css — Kiln, the platform's visual system. THE single :root. ============================================================================= Source of truth: the Kiln design system (Claude Design project "CLAUDE DESIGN EXAMPLE 1"), files `Kiln Design System.dc.html` and `Kiln Portal - Atkins Platform.dc.html`. Read those before changing a value. Two blocks live here: 1. KILN — the real tokens. All new work uses these. 2. LEGACY BRIDGE — the pre-Kiln variable names (--color-dark, --font-mono, --max …) re-pointed at their Kiln equivalents. The bridge exists so the rollout can be gradual. Roughly ninety pages still reference the old names; mapping them here means those pages pick up the Kiln palette without being edited, instead of sitting half-restyled behind a half-finished migration. Each one drops its legacy names as it is reworked, and the bridge is deleted when the last reference goes. DO NOT add a second :root anywhere. theme_css() is the one exception — it emits a :root last in to apply per-venue overrides, which is the whole point of the cascade contract described in helpers.php. ========================================================================== */ :root { /* ── KILN · neutrals ────────────────────────────────────────────────────── Six neutrals carry the entire interface. Hierarchy is canvas → surface → ink and nothing else. There are no shadows in this system. */ --kiln-canvas: #EDEBE6; /* page background — warm limestone */ --kiln-surface: #FBFAF7; /* cards, panels — one step lighter */ --kiln-hover: #E5E2DB; /* row/button hover ONLY, never at rest */ --kiln-hairline: #D6D3CB; /* every 1px border and section rule */ --kiln-rule-inner: #E4E1DA; /* rules nested inside a surface */ --kiln-rule-row: #E0DDD6; /* hairline-row dividers */ --kiln-ink: #16181C; /* headings, body, dark panels, primary */ --kiln-muted: #6A665E; /* labels + qualifiers. The darkest muted. */ --kiln-body: #35322C; /* lead paragraphs */ --kiln-body-soft: #4B4841; /* secondary body + row descriptions */ --kiln-hero-grid: #E2DFD8; /* the hero's six-column ghost grid */ /* On ink. #96928B is the darkest muted permitted on a dark surface. */ --kiln-on-ink: #FBFAF7; --kiln-on-ink-line: #D8D4CC; /* footer list items — one step above body */ --kiln-on-ink-body: #C9C5BD; --kiln-on-ink-quiet: #A9A49B; --kiln-on-ink-muted: #96928B; --kiln-on-ink-rule: #2E2C28; --kiln-on-ink-track: #3A3833; /* range track on ink */ /* A surface lifted off an ink ground. Kiln has no shadows, so a card on a dark section is distinguished by being one step lighter — the same canvas -> surface move, inverted. 1.14:1 against the ink: visible as a shape, deliberately not readable as text. */ --kiln-ink-raised: #212429; /* ── KILN · the same neutrals as RGB triplets ───────────────────────────── A stylesheet needing ink at 55% cannot do that with a hex token, so the public site carried twenty-six raw rgba() calls instead — and every one of them held the PRE-KILN brand (rgba(30,44,52) was the old dark, rgba(98,181, 229) the old accent). The legacy bridge could not reach inside an rgba(), so those were the exact spots where the old brand survived the overhaul. Triplets fix that: rgb(var(--kiln-ink-rgb) / 0.55) is themeable, because theme_css() re-emits these per venue alongside the hexes. Never write a raw rgba() with brand values again. */ --kiln-ink-rgb: 22 24 28; --kiln-surface-rgb: 251 250 247; --kiln-canvas-rgb: 237 235 230; --kiln-s1-rgb: 224 80 15; --kiln-s2-rgb: 16 199 188; --kiln-s3-rgb: 122 79 232; --kiln-new-rgb: 201 242 77; /* The alpha steps actually in use, named for their job so a page does not invent a twenty-seventh opacity. */ --kiln-scrim: rgb(var(--kiln-ink-rgb) / 0.55); /* image overlay, top */ --kiln-scrim-deep: rgb(var(--kiln-ink-rgb) / 0.85); /* image overlay, foot */ --kiln-glass: rgb(var(--kiln-surface-rgb) / 0.92); /* nav on scroll */ --kiln-on-ink-08: rgb(var(--kiln-surface-rgb) / 0.08); --kiln-on-ink-18: rgb(var(--kiln-surface-rgb) / 0.18); --kiln-on-ink-30: rgb(var(--kiln-surface-rgb) / 0.30); --kiln-on-ink-60: rgb(var(--kiln-surface-rgb) / 0.60); /* Print. White is a property of paper, not of the brand — but naming it says so, and keeps the literal out of the stylesheets. */ --kiln-print-paper: #FFFFFF; /* ── KILN · text ON an accent, derived ──────────────────────────────────── Non-negotiable #2 says contrast is derived, never eyeballed — but CSS cannot compute a contrast ratio, so a stylesheet that needs a tick mark on an accent has historically just written #fff and hoped. Measured against the real palette that is wrong twice out of four: Stage 02 wants ink at 8.39:1, and the New flag wants ink at 13.79:1. White on either is a failure that looks fine to whoever picked it. theme_css() recomputes all four per venue with kiln_on(). These are only the static fallback for a page rendering without PHP. */ /* On-colours for a mark drawn on the RAW accent — a chip fill, a tick, a pill. Derived by kiln_on() and overridden per venue by theme_css(); two of the four come out INK, which is why this is never assumed. */ --kiln-on-s1: #16181C; /* INK on #E0500F — 4.51, vs 3.78 for paper */ --kiln-on-s2: #16181C; /* INK on #10C7BC — not white */ --kiln-on-s3: #FBFAF7; /* paper on #7A4FE8 */ --kiln-on-new: #16181C; /* INK on #C9F24D — not white */ /* A SECTION GROUND is a different job: body copy sits on it, so the hue is darkened until PAPER clears AA and text on a coloured band is always white. kiln_ground() derives these; theme_css() overrides per venue. Only the ground shifts — rules, dots and fills keep the raw hue. */ --kiln-s1-ground: #CA480D; /* darkened; paper 4.53 */ --kiln-s2-ground: #10C7BC; /* untouched; INK 8.39 */ --kiln-s3-ground: #7A4FE8; /* untouched; paper 4.89 */ --kiln-s4-ground: #C9F24D; /* untouched; INK 13.79 */ /* And the text on each. Derived by kiln_ground_on(), overridden per venue by theme_css(). Two of the four are ink, so paper is never assumed. */ --kiln-s1-ground-on: #FBFAF7; --kiln-s2-ground-on: #16181C; --kiln-s3-ground-on: #FBFAF7; --kiln-s4-ground-on: #16181C; /* ── KILN · work-stream accents ─────────────────────────────────────────── Four maximum. An accent identifies a work stream or the sign of a figure — never decoration. A fifth stream reuses an existing hue with a distinct label. These are overridden per venue by theme_css(). Permitted placements, and no others: the 3px stage rule, a filled index pill, an 8px status dot, a row's hover edge. */ --kiln-s1: #E0500F; /* Stage 01 Understand — and all negatives */ --kiln-s2: #10C7BC; /* Stage 02 Develop & test */ --kiln-s3: #7A4FE8; /* Stage 03 Assess — and positive movement */ --kiln-new: #C9F24D; /* "New since last login". Never a stream. */ /* Figure-safe variants — the accent shaded until it clears 3:1 on canvas. Use the RAW hue for a 3px stage rule, an 8px dot or a bar fill, where nothing is read off the colour. Use these anywhere the colour has to be legible: a figure at 24px+, or a 1px rule. Stage 02 is why this exists. Raw #10C7BC is 1.78:1 against canvas — fine as a 3px band, invisible as a hairline and unreadable as a number. theme_css() recomputes all three per venue, so these static values are only the fallback when no venue override is set. */ --kiln-s1-fig: #E0500F; /* 3.31:1 — already clears, unshaded */ --kiln-s2-fig: #0C8F87; /* 3.33:1 — shaded from #10C7BC */ --kiln-s3-fig: #7A4FE8; /* 4.29:1 — already clears, unshaded */ /* Signed figures on ink use tints, not the accents — the accents do not hold up against #16181C. */ --kiln-on-ink-pos: #7FD6A8; /* 10.23:1 on ink */ --kiln-on-ink-neg: #FF9166; /* 8.04:1 */ --kiln-on-ink-warn: #FFC178; /* 11.13:1 */ --kiln-on-ink-neu: #6FE3DA; /* 11.57:1 */ /* ── KILN · type ────────────────────────────────────────────────────────── Archivo does all the structural work. Instrument Serif italic appears once per page, on one word inside the largest headline. There is no mono in this system and no third family. */ --kiln-sans: Archivo, ui-sans-serif, system-ui, -apple-system, sans-serif; --kiln-serif: 'Instrument Serif', Georgia, serif; --kiln-display: clamp(38px, 6.6vw, 112px); --kiln-display-tight: clamp(40px, 7.4vw, 124px); --kiln-h2: clamp(28px, 4vw, 64px); --kiln-h2-lg: clamp(30px, 4.4vw, 76px); --kiln-h3: clamp(26px, 3vw, 44px); --kiln-row-title: clamp(17px, 1.6vw, 23px); --kiln-figure: clamp(30px, 3.4vw, 54px); --kiln-figure-sm: clamp(24px, 2.2vw, 34px); --kiln-body-size: 15px; --kiln-label: 11px; --kiln-track-display: -0.042em; --kiln-track-figure: -0.045em; --kiln-track-title: -0.03em; --kiln-track-label: 0.14em; --kiln-lead-display: 0.88; --kiln-lead-h2: 0.92; --kiln-lead-body: 1.55; /* ── KILN · shape & space ───────────────────────────────────────────────── Three radii, one hairline weight, no shadows. */ --kiln-r-surface: 16px; /* cards, panels, accordions */ --kiln-r-inner: 10px; /* blocks nested inside a surface */ --kiln-r-pill: 800px; /* anything interactive or label-like */ --kiln-max: 1440px; /* the portal */ --kiln-max-doc: 1280px; /* system + document pages */ --kiln-gutter: clamp(16px, 3vw, 40px); --kiln-section-y: clamp(28px, 3.4vw, 56px); --kiln-surface-p: clamp(22px, 2.6vw, 34px); --kiln-grid-gap: 12px; --sidebar-w: 240px; /* admin shell */ /* ── KILN · motion ──────────────────────────────────────────────────────── Motion is confirmation, never entertainment. */ --kiln-ease: cubic-bezier(0.22, 1, 0.36, 1); --kiln-reveal: 700ms; --kiln-reveal-rise: 16px; --kiln-hover-t: 160ms; --kiln-accordion: 340ms; /* ═══════════════════════════════════════════════════════════════════════ LEGACY BRIDGE — pre-Kiln names, re-pointed. Remove a line once nothing references it. Do not add to this block. ═══════════════════════════════════════════════════════════════════════ */ --color-dark: var(--kiln-ink); --color-light: var(--kiln-surface); --color-paper: var(--kiln-canvas); --color-main: var(--kiln-s1); --color-rule: var(--kiln-hairline); --color-mute: var(--kiln-muted); --color-faint: #8B8781; /* The old system used a mono for nav, labels, eyebrows and tags. Kiln forbids a mono outright — that role is Archivo 500/600 at 11px/0.14em. Pointing --font-mono at Archivo restyles every legacy label without touching it. */ --font-serif: var(--kiln-serif); --font-sans: var(--kiln-sans); --font-mono: var(--kiln-sans); --max: var(--kiln-max-doc); --col: 680px; --ease: var(--kiln-ease); /* Deck tone aliases. The deck's content primitives (deck.css) talk in pos/neg/warn/neu; Kiln has four accents and no separate semantic ramp, so they map onto the stream hues rather than introducing a fifth and sixth. Negative takes Stage 01 and positive Stage 03, which is the data convention the design system already states. Warn reuses Stage 01 — orange is the attention hue — and neutral reuses Stage 02. Small text never takes one; a figure may, at 24px and above. These point at the FIGURE-SAFE variants, not the raw hues, because the deck uses them for 1px pill borders and metric figures — both of which have to be legible. The raw hue is still the right choice for a 3px stage rule or a bar fill, and those reference --kiln-s1/2/3 directly. */ --dk-pos: var(--kiln-s3-fig); --dk-neg: var(--kiln-s1-fig); --dk-warn: var(--kiln-s1-fig); --dk-neu: var(--kiln-s2-fig); /* The default bar fill. A fill is a large block of colour, so the raw hue is the right choice here — but it has to be a TOKEN rather than a literal var(--kiln-s2), because a ground has to be able to re-point it. Read off the raw hue it sat on before, so nothing changes on the canvas. */ --dk-fill: var(--kiln-s2); /* Event categories encode meaning rather than brand, so they are not themeable and were never part of the venue palette. Kiln's four-accent ceiling governs work streams, not this taxonomy — but the two must not be confused, so these keep their own namespace and their own hues. */ --cat-innovation: #62B5E5; --cat-showcase: #7B68EE; --cat-workshop: #48C9B0; --cat-industry: #F39C12; --cat-cultural: #E74C3C; --cat-internal: #8B8781; /* =========================================================================== ATKINS DECK — the dark ground =========================================================================== The client deck runs a dark inversion of Kiln. It is a separate namespace, NOT a redefinition of --kiln-*, because /admin and /public keep the warm limestone canvas and all three share this file. Repointing --kiln-canvas here would flip the whole platform. It lives in tokens.css for the same reason everything else does: rule 3 forbids a colour literal in any other stylesheet, so client/css/atkins.css resolves every value through these names and holds no hex of its own. Kiln's structure is intact — six neutrals, four accents, three radii, no shadow, two typefaces. What changes is which end of the ramp is the ground. The accents are the -fig (figure-safe) variants, because on a dark ground the raw hues that read as a 3px band do not read as body copy. */ /* Neutrals — canvas -> surface -> raised, then the warm greys on top. Taken from the Claude Design file "Atkins Platform.dc.html" (2026-09-25): a near-black warm ground, darker than the Kiln ink it replaced. The hairlines are white at low alpha, as in the design, so a rule reads the same on the canvas and on a card. */ --atk-canvas: #0A0908; /* page ground */ --atk-canvas-2: #100E0C; /* recessed wells: image plates, previews */ --atk-surface: #161311; /* cards and panels, one step up */ --atk-hover: #1E1A16; /* row/button hover ONLY, never at rest */ --atk-raised: #2A241E; /* the third step — tracks, scrollbar thumbs */ --atk-hairline: rgba(255, 255, 255, 0.07); /* every 1px border and section rule */ --atk-rule-inner: rgba(255, 255, 255, 0.05); /* the softer rule inside a card */ --atk-line-strong: rgba(255, 255, 255, 0.14); /* a border asked to be seen */ --atk-deep: #060504; /* the footer slab, below canvas */ --atk-bar: #191512; /* the top bar — one step warmer than canvas */ /* Type on the dark ground. --atk-muted is the darkest permitted for small text; anything quieter fails contrast and belongs to rules, not words. */ --atk-text: #F5F1EC; --atk-text-dim: #C6BEB4; --atk-muted: #8A8175; --atk-muted-2: #6B645B; /* labels beside a heading, never alone */ /* Ink for text sitting ON an accent. Every accent below is light enough to carry the canvas colour, so this is always the dark end. */ --atk-on-accent: #0A0908; /* Work-stream accents — the design's six, in its band order (BAND_TONES in atkins-app.jsx): deliverable, design, september, partnership, ok, commercial. The deck runs six hues rather than Kiln's four because the design codes six nav groups and bands; that was the client's call on 2026-09-25, and /admin and /public keep the ceiling. */ --atk-s1: #E8C07A; /* deliverable · Current Position */ --atk-s2: #2FBFB4; /* design · The Opportunity */ --atk-s3: #9E78E8; /* september · Investment */ --atk-s4: #F2A93B; /* partnership · Delivery */ --atk-s5: #7AC778; /* ok · Commercial Potential, Next Steps */ --atk-s6: #FF5A3C; /* commercial · and every negative figure */ --atk-warn: #E8A93B; /* an unresolved figure, not a work stream */ --atk-danger: #FF5A6E; /* The three investment levels. Medal colours, not work streams — they name bronze, silver and gold and nothing else may use them. */ --atk-bronze: #B08D57; --atk-silver: #B6BCC4; --atk-gold: #D9A94A; /* Paper — the ground architect's drawings sit on (JHA page), and its ink. */ --atk-paper: #F4F0E6; --atk-paper-rgb: 244 240 230; --atk-paper-ink: #2A2620; /* RGB triplets, so a band can take the same hue at low alpha without the literal coming back. Used as rgb(var(--atk-s1-rgb) / 0.10). */ --atk-s1-rgb: 232 192 122; --atk-s2-rgb: 47 191 180; --atk-s3-rgb: 158 120 232; --atk-s4-rgb: 242 169 59; --atk-s5-rgb: 122 199 120; --atk-s6-rgb: 255 90 60; --atk-canvas-rgb: 10 9 8; --atk-deep-rgb: 6 5 4; /* The active stream. Every deck page sets --atk-accent once, on .page, and each primitive reads it -- so a section band, an eyebrow, a rule, a bullet and a button all recolour together. Same mechanism as Kiln's grounds: re-point the token, do not restyle the component. */ --atk-accent: var(--atk-s1); --atk-accent-rgb: var(--atk-s1-rgb); } /* Reduced motion — the system's reveal, drift and hover transitions all stop. The fail-safe in kiln.js still forces revealed content visible. */ @media (prefers-reduced-motion: reduce) { :root { --kiln-reveal: 1ms; --kiln-reveal-rise: 0px; --kiln-hover-t: 1ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }