/* Raziel design tokens — DARK v0.5 (2026-07-16) Single source for all gated surfaces. v0.5 = two corrections from Simon's live look, both recorded at their own call sites below: (1) THE CREAM CORRECTION — the light colourway's surface trio was near-white, not the cream/ivory this file claimed it was; warmed, with every affected ratio re-measured rather than carried over. (2) THE PACE BIAS — the motion ladder is a notch slower, still inside every HARD ceiling in rules/motion.md. v0.3 = A1: PALETTE A PROMOTED (locked by Simon 2026-07-13 on the raziel-home-v3 comparison; outstanding since then). Until this landed, every page re-invented the palette and the gold role-fix was enforced nowhere. Source of truth for the values: prototypes/raziel-home-v3.html body[data-palette="a"] (canonical ?palette=a) + Marketing/brand/raziel-logo-v8.html (the locked mark). The palette switcher is DEAD — A won, B (emerald) and C (platinum) are not coming back. Semantic tokens now live in :root. ------------------------------------------------------------------ THE GOLD ROLE-FIX (the whole point of Palette A — read before use) ------------------------------------------------------------------ Gold is a MATERIAL, not a hue. On screen it only reads as metal via moving highlights, and those only work LARGE. At small sizes it collapses to flat mustard and reads CHEAP (Simon, live look 13/07: "in regular smaller typography it comes across as cheap, it only works in large space where all the tricks can be applied"). THEREFORE: - GOLD = the logo + LARGE metallic moments ONLY (display words, hero numerals, the mark). Always with the ramp + specular. - WARM BONE --acc-small (#e0d8c6) = the WORKHORSE for ALL small type, markers, kickers, labels, statuses, UI accents. ~13:1 on bg-0. If it is small, it is bone. No exceptions. - CRIMSON = motion only. Never a static fill. Never at rest. - Never area-fill gold. Thin things and big moments, nothing between. HARD RULE: gated surfaces use tokens only — no magic values in page CSS. A full dual-theme still lands after the language locks. What v0.4 adds below is narrower and separate: a light SURFACE, for the occasional contrasting band on an otherwise dark page. Read THE LIGHT COLOURWAY block before you use it. The role-fix does not relax on light, it inverts, and the metal does not survive at all. ------------------------------------------------------------------ */ /* Display face — SELF-HOSTED, no CDN (vendor/, OFL, sha256 in LICENSES.md). Declared here so pages that link these tokens inherit the face and cannot re-invent the @font-face or reach for a CDN. NOTE: only weight 600 latin is vendored — Space Grotesk is the DISPLAY voice, not the body face. See --font-sans below. */ @font-face { font-family: "Space Grotesk"; src: url("/vendor/fonts/space-grotesk/space-grotesk-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root[data-theme="dark"], :root { /* Surface ladder — warm charcoal, 4 steps, each ~4-6% lighter. Never #000. */ --bg-0: #0b0a08; /* canvas */ --bg-1: #14120f; /* card */ --bg-2: #1a1815; /* raised / hover */ --bg-3: #201d19; /* highest surface */ /* Hairlines — borders lighten as elevation rises (elevation, not shadows) */ --line-0: #24211c; --line-1: #2e2a24; --line-2: #38332c; /* Glass — max ONE glass surface per view, text on it must hold 4.5:1 */ --bg-glass: rgba(255, 253, 248, 0.04); --glass-border: rgba(255, 253, 248, 0.09); --glass-blur: 14px; --glass-panel: rgba(255, 253, 248, 0.05); /* the ONE hero panel */ /* Specular sheen ladder — glass depth. Thin light, never fills. */ --spec-0: rgba(255, 253, 248, 0.03); /* faint sheen wash on glass */ --spec-1: rgba(245, 242, 236, 0.06); /* 1px top-edge highlight */ --spec-2: rgba(245, 242, 236, 0.12); /* crisp specular line */ /* Text ladder — warm, 4 steps. No pure #fff anywhere; near-white = headlines only. */ --ink-hi: #f5f2ec; /* headlines */ --ink-body: #c9c5bc; /* body (>=4.5:1 on all bg steps) */ --ink-mute: #8f8b82; /* captions, meta */ --ink-faint: #615e56; /* disabled / faintest */ /* ---- PALETTE A: the metal (LARGE moments + the mark ONLY) ---- */ --gold: #e2c379; /* champagne base */ --gold-hi: #f4e4b5; /* ramp top stop */ --gold-deep: #c09a4c; /* ramp bottom stop */ --gold-hairline: #96793b; --gold-spec: #faf3dc; /* the moving specular band that makes it metal */ /* The ramp is multi-stop and off-axis on purpose: a 2-stop vertical gradient reads as flat mustard. The 52%->60% dark pinch is the fold that sells it as a metal surface catching one light. */ --grad-gold: linear-gradient(168deg, #f6ebc8 0%, #e9cf8c 30%, #d5ae5c 52%, #b98f3f 60%, #e6c87f 85%, #c29a4a 100%); /* ---- PALETTE A: the workhorse (EVERYTHING small) ---- */ --acc-small: #e0d8c6; /* warm bone — all small type accents, ~13:1 on bg-0 */ --acc-ui: #e0d8c6; /* interactive accent: selected chip, focus ring, toggle */ --acc-hairline: #6e6656; /* hover hairline borders */ --caret-c: #e2c379; /* hero caret — thin non-text, large enough for metal */ --dot-c: #e0d8c6; /* live dot */ --dot-ring: #6e6656; /* ---- PALETTE A: semantic assignments ---- */ --grad-display: var(--grad-gold); /* cycling display word */ --grad-payoff: var(--grad-gold); /* the payoff word */ --acc-glow: rgba(226, 195, 121, 0.14); /* ONE glow per page, hero only */ --wire: #6a6252; /* network strokes at rest */ --wire-hot: #e2c379; /* a lit connection */ --ovr-rim: #96793b; /* featured node rim */ --logo-stroke: #e2c379; --logo-stroke-hi: #f4e4b5; --logo-core: #f4e4b5; --orb-hi: #f4e4b5; --orb-deep: #c09a4c; --orb-hairline: #96793b; /* Crimson — MOTION ONLY, never static, never at rest. #d6334f is the value Simon locked 2026-06-10 as the one occasional accent. (v0.2 carried #b3202e, which was never locked and never sourced — corrected here. The v8 mark's hotter in-motion ember tint #ff3a52 stays local to the logo file: it is the mark's spark, not a page token. Its LIGHT counterpart #c01b34 no longer does: Simon issued it 15/07 as part of the light colourway, so it is recorded below as --lt-crimson-motion. That supersedes this note's v0.3 claim that both ember tints were logo-local.) */ --crimson-motion: #d6334f; /* Aliases — v2/v3/v4 prototypes still reference these names. Migrate call sites to the canonical names above, then delete. */ --gold-glow: var(--acc-glow); /* Type — Space Grotesk 600 = DISPLAY voice (the locked wordmark face, gold on the capital R only). Only 600 latin is vendored, so the body face is a separate stack. Two weights carry the page: 600 display, 400 body; 500 buttons/labels only. ⚠ OPEN: --font-sans names Inter, but Inter is NOT vendored and CDNs are banned, so body type currently resolves to system-ui on every machine. Either vendor Inter 400/500 or make the system stack the honest, intended choice. Flagged to Simon 15/07, not silently decided. */ --font-sans: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Space Grotesk", var(--font-sans); --text-display: clamp(2.5rem, 1.7rem + 4vw, 4.5rem); /* h1: 72 desktop / 40 mobile */ --text-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); --text-h3: clamp(1.375rem, 1.25rem + 0.7vw, 1.75rem); --text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); --text-body: 1.0625rem; --text-sm: 0.875rem; --text-eyebrow: 0.8125rem; /* uppercase + tracking, metadata-carrying only */ --leading-display: 1.07; --leading-head: 1.15; --leading-title: 1.25; --leading-body: 1.55; --tracking-display: -0.03em; --tracking-h2: -0.02em; --tracking-eyebrow: 0.08em; --measure: 65ch; /* body max line length */ --measure-lead: 55ch; /* Space — 4px base scale; sections 96px desktop / 48px mobile */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; --section: var(--sp-24); --section-mobile: var(--sp-12); --container: 1240px; /* identical across all pages */ --gutter: 24px; --gutter-mobile: 16px; /* Shape — radius is NOT uniform (uniform radius everywhere = AI tell) */ --r-sm: 6px; /* controls */ --r-md: 10px; /* cards */ --r-lg: 16px; /* screenshot panels (Linear's value) */ --r-pill: 999px; /* Motion — from rules/motion.md. Exits 20-30% faster than enters. v0.5 PACE BIAS. Simon, live look 15/07: "all the animations need to slow down a bit, it looks too much like flashing". Everything below is biased slower, and every value is still inside motion.md's HARD ceilings, which are not negotiable and are the reason this is a bias and not a free-for-all: reveals <=700ms, page moments <=1000ms, element transitions <=300ms, stagger cap 150ms. TWO THINGS DELIBERATELY DID NOT MOVE: - --t-micro stays 150ms. motion.md: frequency inverts duration, and hover/press/focus fire hundreds of times a session. Slowing these does not read as calm, it reads as lag. - The rest of the ladder is nowhere near its ceiling on purpose. motion.md's whole thesis is that expensive motion is FAST and eased-out while slow motion is what reads cheap, so "slower" here means a notch, not a crawl. The page's actual flashing was a compounding rAF bug in the specular rake plus the rake's own speed (both fixed at source in raziel-home-v5.html), not these reveals. If more slowness is wanted after a live look, take it from the rake first and this ladder second. */ --t-micro: 150ms; /* hover, press, focus — DO NOT slow, see above */ --t-move: 300ms; /* dropdowns, tooltips, expands — at the HARD ceiling */ --t-exit: 225ms; /* exit counterpart of --t-move (25% faster) */ --t-reveal: 640ms; /* scroll reveals — HARD ceiling is 700 */ --t-hero: 880ms; /* page-level moments — HARD ceiling is 1000 */ --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out — all enters */ --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); /* emphasized-accelerate — exits */ --ease-move: cubic-bezier(0.2, 0, 0, 1); /* on-screen moves */ --reveal-rise: 24px; /* slide-up distance (16-32px band, max 40) */ --reveal-rise-sm: 20px; /* showpiece group rise */ --reveal-scale: 0.97; /* never scale from 0 */ --stagger: 100ms; /* sibling stagger — top of the 50-100ms band, cap 150 */ --para-shift: 48px; /* orb + glow scroll drift, ~5% of scroll delta */ /* Reveal trigger: top crosses 80% viewport; ONCE only; hidden state applied via .js class, never base CSS (no-JS users must see content). */ } /* ================================================================== THE LIGHT COLOURWAY (v0.4, 2026-07-15) — read before you use it ================================================================== Simon, live look 15/07: "we need some white/contrasting sections". A page that is dark end to end reads flat, and monotone-dark is itself a template tell. This is NOT a light theme and it is not the dual-theme plan. It is a light SURFACE, for the occasional band that should stop the scroll and read like paper. The page stays dark. A light band is a contrast EVENT, and an event only works if it is rare. The values are the locked light colourway. They are not new: they are what Marketing/brand/raziel-logo-v8.html already uses on light surfaces. This block only writes them down so no page has to re-invent them, which is the exact failure the favicon drift was. These are RAW PALETTE values and nothing consumes them directly. A page opts a band in with a class that re-points the SEMANTIC tokens (--bg-*, --ink-*, --gold-*, --grad-*) at these. That is what lets every component work on both surfaces with no second stylesheet and no component ever knowing which surface it is on. ------------------------------------------------------------------ THE GOLD ROLE-FIX ON LIGHT: it inverts, and the metal dies ------------------------------------------------------------------ Gold DEEPENS on light, it never brightens. That is necessary and it is not sufficient. The deepened ramp still cannot carry TEXT here. Measured against --lt-surface: --lt-gold-hi #d9b96a 1.59:1 --lt-gold #c09a4c 2.22:1 --lt-gold-deep #8a6a1e 4.25:1 (v0.5: re-measured against the cream surface. v0.4's near-white read 1.72 / 2.40 / 4.59, so cream tightens every stop and the conclusion below only hardens.) Large text needs 3:1, so two of the three stops fail outright and a word wearing the ramp fails across most of its own width. The same ramp on --bg-0 runs 6.66:1 to 16.62:1. The metal works on dark, and it works ONLY on dark. THEREFORE, on light: - Gold is the LOGO (a logotype is contrast-exempt, and the capital R is what this ramp exists for) plus thin NON-TEXT rules. That is the whole list. - There is NO metallic display word on a light band, ever. A section that owns a metal moment therefore STAYS DARK. That is not taste, it is the ramp's arithmetic, and flat solid gold is not the way out: flat gold is the mustard failure the role-fix exists to prevent. - Small type is INK. Same law as dark, opposite direction: on dark the accent is LIGHTER than body, on light it is DARKER. ------------------------------------------------------------------ THE INK LADDER IS TWO STEPS ON LIGHT, NOT FOUR ------------------------------------------------------------------ --lt-muted #8a8371 measures 3.18:1 on --lt-surface (v0.5 cream; it was 3.43:1 on v0.4's near-white). Legal for a non-text stroke (needs 3:1), illegal for the 13-14px type that --ink-mute carries everywhere on our pages (needs 4.5:1). Its dark counterpart #8f8b82 is 5.83:1, so #8a8371 is NOT an honest like-for-like swap and a band that treats it as one ships a contrast failure in its captions. ⚠ 3.18:1 is the tightest number in this file. --lt-muted has ~0.18 of headroom over the 3:1 non-text floor, so the cream surface CANNOT be warmed further without darkening --lt-muted in the same edit. If a future pass deepens --lt-surface, re-measure this one first. So on light the text ladder collapses to two steps, ink and body-ink, and hierarchy is carried by size, case and tracking instead of by a third grey. #8a8371 keeps the non-text work it can actually hold: dashes, rules, faint marks. ================================================================== */ :root{ /* v0.5: THE CREAM CORRECTION. These three were #f7f4ec / #efeade / #e6dfcc — near-white, and Simon called it on the live page 16/07: "we also said it needs to be cream/ivory, not such a harsh white". He is right and the file was already lying about it: the block below is titled the CREAM/IVORY colourway and #f7f4ec is white with a hint of warmth, not cream. Warmed onto the bone axis the brand already owns (--acc-small #e0d8c6), keeping the exact surface->raised->line step deltas the old trio had, so nothing about the band's internal hierarchy moves. Every ratio below is re-measured against the new surface, not carried over. */ --lt-surface: #f2ebdb; /* canvas of a light band */ --lt-raised: #eae1cd; /* raised / card / input fill on that band */ --lt-ink: #141210; /* headlines AND all small accent type. 15.74:1 */ --lt-ink-body: #4a4438; /* body, and every small step under it. 8.13:1 */ --lt-muted: #8a8371; /* NON-TEXT ONLY: strokes, dashes. 3.18:1 */ --lt-line: #e1d6bb; /* the one hairline */ /* The deepened ramp. Logo and thin rules only, per the block above. */ --lt-gold-hi: #d9b96a; --lt-gold: #c09a4c; --lt-gold-deep: #8a6a1e; --lt-gold-hairline: #8a6a1e; /* The dark ramp's off-axis 168deg and its 52% fold are kept: the fold is what sells it as a metal surface catching one light, and it is doing that job on the logo's R here too. Three stops, not six, because three is what Simon issued. */ --lt-grad-gold: linear-gradient(168deg, #d9b96a 0%, #c09a4c 52%, #8a6a1e 100%); /* Motion only, exactly as on dark. Never a static fill, never at rest. Recorded because it is part of the colourway Simon issued; nothing consumes it yet. */ --lt-crimson-motion: #c01b34; } /* Reduced motion — HARD requirement on every page. Crossfade, don't freeze. */ @media (prefers-reduced-motion: reduce) { :root { --t-reveal: 150ms; --t-hero: 150ms; --reveal-rise: 0px; --reveal-rise-sm: 0px; --reveal-scale: 1; --stagger: 0ms; --para-shift: 0px; } }