/* ========================================================================== LIVING FIELD — DESIGN TOKENS Extracted from SANDBOX_concept_3_living_field_v2.html (approved 2026-08-10). Single source of truth for colour, type, spacing, radii and motion in the Living Field design language. Components consume these tokens only — no raw hex values or magic numbers below this layer. Load order: lf-tokens.css -> lf-components.css -> page styles. ========================================================================== */ /* ========================================================================== FACES Variant B of the font comparison round: Agency for display, Swiza for prose. Richard's call, 2026-08-12. Both were already this site's SSOT fonts and already self-hosted, so this is continuity rather than a new dependency. Each family ships exactly one face — Agency at normal, Swiza at 500. The declared weight range 400–500 maps every weight the language asks for onto the real face, so the browser never synthesises a faux-bold. The consequence, flagged before the decision and accepted: the 400/500 prose/display weight split collapses to a single weight. Hierarchy in the Living Field language is carried by size, colour and the lumen glow, not by weight, so the structure holds. ========================================================================== */ @font-face{ font-family:'Agency'; src:url('/fonts/agency.woff2') format('woff2'), url('/fonts/agency.otf') format('opentype'); font-weight:400 500; font-style:normal; font-display:swap; } @font-face{ font-family:'Swiza'; src:url('/fonts/swiza-medium.woff2') format('woff2'), url('/fonts/swiza-medium.otf') format('opentype'); font-weight:400 500; font-style:normal; font-display:swap; } :root{ /* ---------- COLOUR: ground ------------------------------------------- */ --lf-loam: #0A0F0C; /* page ground, canvas clear colour */ --lf-loam-2: #0F1712; /* raised ground: card fill base */ --lf-moss: #16241C; /* highest ground: card fill top stop */ --lf-loam-deep: #070B09; /* stillness-beat dimming veil */ /* ---------- COLOUR: living ------------------------------------------- */ --lf-lumen: #B8F5C8; /* primary accent — growth, life, CTA */ --lf-lumen-dim: #72A883; /* recessive accent — metadata, captions */ --lf-gold: #F5D06A; /* secondary accent — value, arrival, hover*/ /* ---------- COLOUR: text --------------------------------------------- */ --lf-text: #E6F0E8; --lf-text-dim: #93A89A; /* ---------- COLOUR: channels (for rgba() composition) ----------------- */ /* Kept as raw triplets so alpha can be varied at the point of use, which the canvas renderer and border treatments both require. */ --lf-lumen-rgb: 184,245,200; --lf-gold-rgb: 245,208,106; --lf-loam-rgb: 10,15,12; /* ---------- COLOUR: derived surfaces ---------------------------------- */ --lf-card-bg: linear-gradient(180deg,rgba(22,36,28,.72),rgba(15,23,18,.72)); --lf-card-bg-flat: rgba(15,23,18,.6); --lf-card-bg-soft: rgba(15,23,18,.55); --lf-hairline: rgba(184,245,200,.12); --lf-hairline-2: rgba(184,245,200,.14); --lf-hairline-hover: rgba(184,245,200,.4); --lf-hairline-hover-2: rgba(184,245,200,.42); --lf-hairline-gold: rgba(245,208,106,.5); /* ---------- COLOUR: glow --------------------------------------------- */ --lf-glow-lumen-text: 0 0 30px rgba(184,245,200,.45), 0 0 80px rgba(184,245,200,.2); --lf-glow-gold-sm: 0 0 26px rgba(245,208,106,.35); --lf-glow-gold-md: 0 0 40px rgba(245,208,106,.4); --lf-glow-node: 0 0 18px rgba(245,208,106,.9), 0 0 60px rgba(245,208,106,.45), 0 0 140px rgba(245,208,106,.2); /* Vignette carries a floor tint rather than running fully transparent at centre. In the prototype the plate never actually rendered (the opaque canvas covered it), so the centre could afford to be clear. With the plate visible, a clear centre puts --lf-text-dim prose straight over the brightest part of the image. */ --lf-vignette: radial-gradient(ellipse at 50% 30%, rgba(10,15,12,.30) 35%, rgba(10,15,12,.88) 100%); /* ---------- TYPE: families ------------------------------------------- */ /* Three slots. --lf-hum carries prose, --lf-display carries headings and numerals, --lf-mono carries metadata. Resolved to Variant B (Agency / Swiza) on 2026-08-12. The system stack that the C3v2 prototype was designed in remains the fallback tail, so the language degrades to the prototype's own typography if a face fails to load. */ --lf-hum: 'Swiza', "Avenir Next", Avenir, Seravek, "Segoe UI", system-ui, sans-serif; --lf-display: 'Agency', "Avenir Next", Avenir, Seravek, system-ui, sans-serif; --lf-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- TYPE: scale ---------------------------------------------- */ /* Fluid display sizes clamp between a mobile floor and a desktop ceiling. */ --lf-fs-display: clamp(2.5rem, 6.2vw, 5rem); /* h1 */ --lf-fs-cta: clamp(2.3rem, 5.6vw, 4.4rem); /* closing h2 */ --lf-fs-h2: clamp(1.9rem, 4vw, 3.1rem); --lf-fs-still: clamp(1.5rem, 3.2vw, 2.4rem); /* stillness line */ --lf-fs-stat: clamp(3rem, 6vw, 4.6rem); /* score numeral */ --lf-fs-vital: clamp(1.5rem, 2.6vw, 2rem); /* card headline */ --lf-fs-h3: 1.25rem; --lf-fs-h3-sm: 1.02rem; --lf-fs-lead: 1.12rem; /* hero paragraph */ --lf-fs-intro: 1.06rem; /* chapter intro */ --lf-fs-body: 1rem; --lf-fs-sm: .92rem; --lf-fs-xs: .86rem; /* Monospace metadata sizes — small, tracked, uppercase by convention. */ --lf-fs-mono-lg: .72rem; --lf-fs-mono: .68rem; --lf-fs-mono-sm: .66rem; --lf-fs-mono-xs: .64rem; --lf-fs-mono-2xs: .62rem; /* ---------- TYPE: weight, leading, tracking --------------------------- */ /* The language uses exactly two weights. 500 carries all display work; 400 carries all prose. No bold. */ --lf-fw-display: 500; --lf-fw-body: 400; --lf-lh-display: 1.08; --lf-lh-h2: 1.15; --lf-lh-still: 1.3; --lf-lh-h3: 1.35; --lf-lh-body: 1.6; --lf-lh-card: 1.65; --lf-lh-aside: 1.7; --lf-ls-display: -.015em; --lf-ls-h2: -.012em; --lf-ls-still: -.01em; --lf-ls-tight: .01em; --lf-ls-mono: .14em; --lf-ls-mono-2: .16em; --lf-ls-mono-3: .2em; --lf-ls-mono-4: .22em; --lf-ls-mono-5: .24em; --lf-ls-mono-6: .3em; /* ---------- MEASURE --------------------------------------------------- */ --lf-measure-page: 1160px; /* content column max width */ --lf-measure-display: 16ch; /* h1 */ --lf-measure-cta: 20ch; --lf-measure-h2: 22ch; --lf-measure-still: 34ch; --lf-measure-aside: 30ch; --lf-measure-lead: 46ch; --lf-measure-intro: 52ch; /* ---------- SPACE ----------------------------------------------------- */ --lf-space-3xs: .4rem; --lf-space-2xs: .7rem; --lf-space-xs: 1.2rem; --lf-space-sm: 1.4rem; --lf-space-md: 1.8rem; --lf-space-lg: 2.4rem; --lf-space-xl: 3rem; --lf-space-2xl: 4rem; /* Gutter and chapter rhythm scale with the viewport between the mobile floor and the desktop ceiling, rather than stepping at a breakpoint — the step at 700px was one of the "clunky" transitions (2026-10-01). */ --lf-gutter: clamp(1.3rem, .4rem + 3.2vw, 2.8rem); --lf-gutter-mobile: 1.3rem; --lf-chapter-y: clamp(7rem, 4rem + 7vw, 11rem); --lf-chapter-y-mobile: 7rem; --lf-nav-y: 1.4rem; /* ---------- RADII ----------------------------------------------------- */ --lf-radius-card: 18px; --lf-radius-root: 16px; --lf-radius-pill: 100px; /* ---------- MOTION ---------------------------------------------------- */ --lf-dur-fast: .25s; --lf-dur-mid: .3s; --lf-dur-slow: 1s; --lf-dur-veil: 1.2s; --lf-ease: ease; --lf-reveal-rise: 28px; /* reveal system travel distance */ --lf-count-dur: 1200; /* ms — domain percentage count-up (JS reads) */ --lf-rings-dur: 2200; /* ms — growth rings draw-on (JS reads) */ /* ---------- DEPTH (z-index ladder) ------------------------------------ */ /* 0 field + imagery | 1 veils | 2 content | 60 nav */ --lf-z-field: 0; --lf-z-veil: 1; --lf-z-content: 2; --lf-z-nav: 60; /* ---------- IMAGERY --------------------------------------------------- */ /* Screen-blend opacities for the Higgsfield field plates. See IMAGE-PIPELINE.md for the production recipe. Hero plate is .20, not the prototype's .30. The prototype value was never seen: the opaque canvas hid the plate entirely, so .30 was an untested number. At .30 with the plate actually visible, the hero lead paragraph loses legibility against the bright band of the image. */ --lf-img-opacity-hero: .20; --lf-img-opacity-hero-dim: .08; --lf-img-opacity-section: .10; --lf-img-saturate: .85; --lf-veil-opacity: .62; }