/* ========================================================================== tokens.v1.css The single source for every design token (design bible, section 2). Load order on every page: tokens.v1.css -> frame.v1.css -> components.v1.css No page-local overrides of these values, ever. ========================================================================== */ /* registered properties (animatable custom properties) */ @property --n { syntax: ''; initial-value: 0; inherits: false; } @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } :root{ /* type - corporate font Poppins (CI Manual p.17), self-hosted via next/font in the root layout (no Google Fonts link). One face feeds all three voices (display/body/mono); Geist Mono retired (ADR-0006). The literal family is kept as a fallback tier in case the --idw-poppins variable is ever absent. */ --font:var(--idw-poppins,'Poppins'),system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-display:var(--idw-poppins,'Poppins'),system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-mono:var(--idw-poppins,'Poppins'),ui-monospace,Menlo,monospace; --t-hero:clamp(3.25rem, 0.4rem + 11.6vw, 13rem); --t-h2:clamp(2rem, 1.3rem + 2.7vw, 3.25rem); --t-lede:clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* MICRO-TYPE - the label register, and the one tier that has to run the OTHER way from the display scale. Every small label was authored as a pixel literal against a desktop canvas, so at 390px the labels kept their desktop size while the type around them shrank: 231 sub-12px text instances over five probe pages, floor 8.5px site-wide. The preferred term therefore carries a NEGATIVE vw coefficient, so the tier steps UP as the viewport narrows, and the upper clamp bound is the MOBILE value while the lower bound is the desktop one. --t-label uppercase micro-labels, codes and tags: 12px / 11.6 / 11 --t-small small SENTENCE copy (notes, captions): 12px / 11.4 / 11 at 390 / 820 / 1440. Both LOWER bounds are 11px, so neither tier can render smaller than the literal it replaced (those ran 9-11px) at ANY width - desktop only ever gains, by at most 1px. This is a floor raise, not a rescale. --t-label's phone end was 11.5px and is now 12px (owner decision, 4 August 2026: a 12px floor for label type on phones - a site-wide audit at 390 found label text down at 11.5px and below). The coefficient was steepened from 0.06 to 0.1vw at the same time so the DESKTOP end still clamps to exactly 11px and nothing above 900px moves. The constant is 12.43px, not the 12.39px first shipped: at 12.39 the term resolved to 11.96px on a 430-wide phone (iPhone Pro Max), so the 12px floor the tier exists to hold was permanently missed on that whole class of device. 12.43 - 0.1vw reaches exactly 12px at 430 and still clamps to 11px from 1443px up, so the floor now holds THROUGH 430 and no desktop value moves. Mandatory whitespace either side of the '-': clamp(11px, 12.43px-0.1vw, 12px) is INVALID and every conformant engine discards the whole declaration, silently falling back to the inherited size. */ --t-label:clamp(11px, 12.43px - 0.1vw, 12px); /* the same 430px correction as --t-label above: 12.6px - 0.15vw resolved to 11.96px there, just under the floor. 12.665 reaches 12px at 430 and the desktop end is unchanged (still clamped to 11px). */ --t-small:clamp(11px, 12.665px - 0.15vw, 12px); /* the two MISSING heading rungs. The scale was two deep (--t-hero, --t-h2) plus a lede, so anything needing an intermediate heading invented a local clamp or reached for .display - which is the 88px hero face, 1.7x the canonical 52px h2. Ten unrelated h2 rungs resulted (16, 16.8, 24, 37.6, 40.8, 41.6, 52, 57.6, 88px). --t-h3 24 / 30.3 / 39.9px at 390 / 820 / 1440 - the section-title rung under .h2-sheet. Ceiling set at 40px rather than the 36px first proposed, because the dominant measured intermediate title (.cta-band-title, 16 pages) is 41.6px: a 40px rung absorbs it within 1.7px, where 36px would be a visible 5.6px demotion. --t-h4 17.6 / 19.3 / 21.6px - the card/group-title rung (.api-group-title, .evidence-title, .cm-h2). Landing zones only: .h3-sheet / .h4-sheet in surveyed.v1.css consume these, and nothing is repointed onto them yet. */ --t-h3:clamp(1.5rem, 1.1rem + 1.55vw, 2.5rem); --t-h4:clamp(1.05rem, 1rem + 0.4vw, 1.35rem); /* ground ----------------------------------------------------------- */ --bg:#09090b; /* surface ladder (elevation = luminance, +4-6% per step, max 3) */ --bg-1:#0e0e11; --bg-2:#141417; --bg-3:#1a1a1f; --bg-footer:#060607; /* one step DOWN from ground - closes the page */ --bg-elev:#18181b; --surface:rgba(24,24,27,.7); --floor:#09090b; /* never remapped - the dark floor under legal paper and behind frame header labels */ /* glass (ONLY sticky nav + scenario transport bar, never nested) ---- */ --glass-bg:rgba(24,24,27,.55); --glass-blur:blur(20px) saturate(150%); --glass-border:rgba(63,63,70,.35); --glass-inset:inset 0 1px 0 rgba(255,255,255,.07); /* ink (never use --ink-4 below 14px) -------------------------------- */ --ink-1:#f7f8f8; --ink-2:#e4e4e7; --ink-3:#8a8f98; --ink-4:#82828c; --ink-lede:#c8c9cf; /* between ink-2 and ink-3; remapped in doc-light/print */ --c-danger:#fca5a5; --c-danger-bg:rgba(220,38,38,.15); --c-success:#6ee7b7; --c-success-bg:rgba(5,150,105,.15); /* brand -------------------------------------------------------------- */ --navy:#133070; --amber:#f59c00; --blue:#2563eb; --blue-deep:#1d4ed8; --sky:#60a5fa; --soft:#dbeafe; /* Logo mark's blue half (.idw-b: the "ware" wordmark and the i-dot). The one brand fill that MUST swap by register, because the CI Manual (p.6-12) defines per-background logo variants rather than one fixed colour: standard blue+orange on bright grounds, negative/inverted on dark ones. It is not a free choice - CI brand blue #133070 measures 1.60:1 on --bg #09090b, against 10.8:1 to 12.5:1 on the light grounds, so the inverted variant is simultaneously the CI requirement and the only legible option on dark. A LITERAL #ffffff, not --ink-1: the CI negative variant in brand/"ID-ware Logo (solo) inverted 1.svg" is pure white, and CI Manual p.10 forbids the logo being "changed in its colours" - borrowing the body ink (#f7f8f8) tinted the mark off-white, which is a recolour however small. Every other white on the site keeps using --ink-1; this token is the mark's alone. The orange half (.idw-o) is #f59c00 in every variant, never swaps. */ --logo-mark:#ffffff; /* drafting ----------------------------------------------------------- */ --hairline:rgba(63,63,70,.5); --hairline-strong:rgba(63,63,70,.8); --hairline-bright:rgba(255,255,255,.14); /* hover border brighten target */ --grid-line:rgba(250,250,250,.035); --annot:#a1a1aa; --datum:rgba(96,165,250,.6); --stamp:rgba(245,156,0,.85); --frame:clamp(12px,2vw,28px); --stroke-w:1.25px; /* glows (live on ::after, crossfade via opacity, never box-shadow transitions) ------------------------------------------------------- */ --glow-blue:rgba(37,99,235,.4); --glow-amber:rgba(245,156,0,.3); --glow-pulse:rgba(96,165,250,.55); /* actor colours (fixed, used in ALL diagrams) ------------------------ */ --c-src:#475569; /* Source (HR / SIS / AD) */ --c-idw:#2563eb; /* ID-ware */ --c-usr:#f59e0b; /* User */ --c-est:#059669; /* Estate */ --c-crd:#be185d; /* Card Office */ --c-acs:#0891b2; /* Access Control */ --c-vis:#7c3aed; /* Visitor */ --c-aud:#e11d48; /* Auditor */ /* radii (sharp data chrome; pill ONLY for approved CTAs) ------------- */ --r-0:0; --r-1:2px; --r-2:6px; --r-pill:999px; /* focus ring (one on-brand AA-visible indicator for every control) ---- */ --focus-ring:2px solid var(--blue); --focus-offset:3px; /* shadow ------------------------------------------------------------- */ --edge:inset 0 1px 0 rgba(255,255,255,.06); /* machined top edge */ --shadow-slab:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.45), 0 24px 48px -24px rgba(0,0,0,.6); /* spacing (4px base) ------------------------------------------------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; /* SECTION RHYTHM - one curve, and everything that spaces one major block from the next is derived from it. Tightened ~20-25% against the pre-exercise site (sections were clamp(64px,4.5vw+28px,104px) with a clamp(40px,3vw+16px,64px) seam; --space-section itself was clamp(80px,5vw+48px,128px)). The site read underfilled, with long near-black voids between sections. Curve: 72px up to 825px wide, rising to 96px at 1425px and flat above. The mid-range was pulled back from an earlier clamp(72px,3.75vw+48px,96px) pass, which made 820px AIRIER than the pre-exercise site (78.75 vs 64.9). */ --space-section:clamp(72px, 4vw + 39px, 96px); /* the seam: the lead-in a block gets when the boundary above it is already carrying the rhythm. Floored at 24px so it stays legible where the section curve is at its 72px floor. 24px / 24px / 24.96px at 390 / 820 / 1440. */ --space-seam:max(24px, calc(var(--space-section) * .26)); /* the whole join: last line of one block -> first line of the next, for EVERY major boundary on the site. 96px / 96px / 121px at 390 / 820 / 1440. */ --space-join:calc(var(--space-section) + var(--space-seam)); /* the one intentional exception: the page's OPENING boundary, hero -> first section, is allowed to breathe a little more than a body-to-body seam. 32.4px / 32.4px / 33.7px, for a 104 / 104 / 130px join. */ --space-seam-hero:calc(var(--space-seam) * 1.35); /* .cta-band internal block padding - single-sourced here because the join arithmetic in surveyed.v1.css has to complement it exactly. */ --space-cta-pad:clamp(40px, 6vw, 72px); /* .proof-band internal block padding. The band's padding is set per page (13 pages use exactly this curve, 5 use a variant within 4px of it at every width, and 2 carry it on an inner wrapper instead), so this states the canonical curve the join arithmetic complements rather than imposing it. */ --space-proof-pad:clamp(52px, 7vw, 84px); --measure:64ch; /* easings + motion vocabulary (Rev D) -------------------------------- Vary motion by mass and give it an arrival; one curve at one speed everywhere is itself the "AI-generated" tell. Curves are exact Penner/GSAP ports. */ --ease-monument:cubic-bezier(.22,1,.36,1); /* easeOutQuint - section reveals, the bar */ --ease-draw:cubic-bezier(.65,0,.35,1); /* SVG line draws, 800-1600ms */ --ease-out-soft:cubic-bezier(.33,1,.68,1); /* easeOutCubic - micro-states: hovers, dots, nav */ --ease-expo:cubic-bezier(.16,1,.3,1); /* easeOutExpo - heavy surfaces arriving with weight */ --ease-spring:cubic-bezier(.34,1.56,.64,1); /* easeOutBack - SMALL arrival accents only */ --ease-flip:cubic-bezier(.34,1.28,.64,1); /* gentle overshoot for big flip swings */ --ease-snap:cubic-bezier(.5,0,.1,1); /* hold-then-snap-shut */ /* duration + stagger scale (entrances faster + tighter than expected) */ --t-micro:120ms; --t-fast:200ms; --t-base:280ms; --t-mid:460ms; --t-slab:560ms; --t-draw:640ms; --t-flip:520ms; --stag-tight:60ms; --stag-base:80ms; /* THEME CONTRACT (dark = brand default; html[data-theme="light"] remaps below). These exist so the light theme can reach surfaces that were authored as literals - the whole-page wash, the section veil, the hero scrims and the fixed chrome glass. Native controls/scrollbars follow color-scheme. ------------------------------------------------------- */ color-scheme:dark; /* document/link ink: --blue is 3.43:1 on --bg-elev (fails AA as body ink); --sky measures 6.97:1 dark and remaps to an AA value in light */ --link:var(--sky); /* amber as INK (text/fill), distinct from --amber as a rule/fill colour: #f59c00 measures 2.09:1 on light paper, so light remaps this token */ --amber-ink:#f59c00; /* the machined micro-highlight (was rgba(255,255,255,.02-.10) literals) */ --sheen:rgba(255,255,255,.045); /* darkening overlay for imagery/stages (was rgba(0,0,0,.45-.92) literals) */ --scrim:rgba(0,0,0,.55); /* the section veil painted over the fixed field - THE dark look */ --veil:rgba(8,9,13,.8); /* whole-page ground under/behind the field (the CSS twilight wash) */ --field-wash: radial-gradient(120% 60% at 50% -2%, rgba(37,99,235,.07), transparent 60%), radial-gradient(70% 40% at 88% 6%, rgba(245,156,0,.03), transparent 60%), linear-gradient(180deg, #0b0e16 0%, #0a0b11 30%, #08080b 70%); /* near-opaque fixed chrome (return banner, trial bar, nav no-blur fallback) */ --chrome-bg:rgba(8,9,15,.92); --chrome-bg-strong:rgba(8,9,15,.98); /* hero contrast scrims under the vivid field (x = left fade, y = bottom lift, m = the stacked mobile variant) */ --hero-scrim-x:linear-gradient(90deg, rgba(8,9,15,.88) 0%, rgba(8,9,15,.66) 46%, rgba(8,9,15,.24) 78%, transparent 100%); --hero-scrim-y:linear-gradient(0deg, rgba(8,9,15,.66) 0%, rgba(8,9,15,.06) 42%, transparent 64%); --hero-scrim-m:linear-gradient(0deg, rgba(8,9,15,.86) 0%, rgba(8,9,15,.62) 45%, rgba(8,9,15,.32) 75%, rgba(8,9,15,.12) 100%); } /* ========================================================================== LIGHT THEME - html[data-theme="light"], stamped pre-paint by the layout boot script and toggled by ThemeToggle. Grown from the retired doc-light paper palette (the site's one measured light set) and the print block, extended to every colour-bearing token. Contrast figures are measured against the stated ground. --amber, --navy, the actor palette (--c-src..--c-aud, fills only), type scale, rhythm and easings are theme-stable and deliberately absent here. --blue and --blue-deep are NOT: since 18 August 2026 they take the CI brand blue on this register (see the note beside them below), because the CI Manual reserves the standard blue treatment for bright grounds. ========================================================================== */ html[data-theme="light"]{ color-scheme:light; /* ground - monotonic toward white so elevation = lightness still holds; the ground sits slightly under paper so --bg-elev reads as elevated */ --bg:#f0efec; --bg-1:#f6f5f3; --bg-2:#fbfaf9; --bg-3:#ffffff; --bg-footer:#e7e6e2; --bg-elev:#ffffff; --surface:rgba(255,255,255,.82); --floor:#ffffff; /* glass */ --glass-bg:rgba(255,255,255,.72); --glass-border:rgba(12,10,9,.12); --glass-inset:inset 0 1px 0 rgba(255,255,255,.9); /* ink - >=6.7:1 on the ground above; --ink-4 collapses onto --ink-3 (#82828c is 3.64:1 on light and fails) */ --ink-1:#0c0a09; --ink-2:#292524; --ink-3:#57534e; --ink-4:#57534e; --ink-lede:#44403c; /* CI standard logo variant on a bright ground: brand blue, NOT the body ink. Borrowing --ink-1 here rendered the mark near-black, which is the CI black/white variant and print-only (CI Manual p.6-12). 10.8:1 to 12.5:1 across the light grounds above. */ --logo-mark:var(--navy); /* CI BRAND BLUE on bright grounds. ci-guidelines.md names the site action-blue #2563eb as the main unreconciled CI delta; the CI Manual reserves the standard blue+orange treatment for "all bright and sufficiently contrasting backgrounds", which is exactly this register. Remapped as a TOKEN, not per selector: --blue fills the nav CTA, .cta-pill, .skip-link, three primitives and the focus ring, so overriding one rule left two filled blue buttons on the same screen in two different blues. Measured against the light ground: --navy is 10.84:1 for the button shape (WCAG 1.4.11 wants 3:1) and 12.47:1 for the white label - both better than the #1d4ed8 they replace (5.83:1 / 6.70:1). --blue-deep is the HOVER step, so it must stay visibly distinct from --blue. It takes the CI Manual's own 80% tint of brand blue rather than an invented darker shade; white on it measures 6.90:1, still AA. DARK is deliberately untouched: --navy is 1.60:1 on #09090b and every blue surface would sink into the page. */ --blue:var(--navy); --blue-deep:#42598d; --c-danger:#b91c1c; --c-danger-bg:rgba(220,38,38,.08); --c-success:#047857; --c-success-bg:rgba(5,150,105,.10); /* accents used as ink remap; fills stay brand-stable */ --sky:#1d4ed8; /* 6.42:1 (2.43:1 unmapped) - also feeds --link */ --soft:#1e3a8a; /* #dbeafe is invisible on light */ --amber-ink:#c2410c; /* vivid amber-orange, >=4.5:1 - reads as brand amber (owner: not brown) */ /* drafting */ --hairline:rgba(12,10,9,.10); --hairline-strong:rgba(12,10,9,.20); --hairline-bright:rgba(12,10,9,.32); /* INVERTED - hover-brighten target */ --grid-line:rgba(12,10,9,.05); --annot:#57534e; --datum:rgba(29,78,216,.7); --stamp:rgba(194,65,12,.85); /* glows - additive bloom does not exist on light; soft shadow tints */ --glow-blue:rgba(37,99,235,.18); --glow-amber:rgba(194,65,12,.16); --glow-pulse:rgba(37,99,235,.24); /* shadow */ --edge:inset 0 1px 0 rgba(255,255,255,.9); --shadow-slab:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(12,10,9,.06), 0 18px 36px -18px rgba(12,10,9,.14); /* theme surfaces */ --sheen:rgba(12,10,9,.04); --scrim:rgba(12,10,9,.55); --veil:rgba(252,251,249,.8); --field-wash: radial-gradient(120% 60% at 50% -2%, rgba(37,99,235,.05), transparent 60%), radial-gradient(70% 40% at 88% 6%, rgba(245,156,0,.04), transparent 60%), linear-gradient(180deg, #f4f3f0 0%, #f2f1ee 30%, #efeeeb 70%); --chrome-bg:rgba(255,255,255,.92); --chrome-bg-strong:rgba(255,255,255,.98); /* the field runs in light too (paper palette in field.v1.js) - the hero scrims mirror the dark curves in paper white */ --hero-scrim-x:linear-gradient(90deg, rgba(250,250,248,.92) 0%, rgba(250,250,248,.7) 46%, rgba(250,250,248,.26) 78%, transparent 100%); --hero-scrim-y:linear-gradient(0deg, rgba(250,250,248,.7) 0%, rgba(250,250,248,.08) 42%, transparent 64%); --hero-scrim-m:linear-gradient(0deg, rgba(250,250,248,.88) 0%, rgba(250,250,248,.64) 45%, rgba(250,250,248,.34) 75%, rgba(250,250,248,.14) 100%); } /* DARK STAGES inside the light theme - for surfaces that are dark BY NATURE, not by theme. The test is what the surface IS: application chrome and document panels follow the theme (the hero console and the radiant burst both did on 2026-08-04 - the burst engine gained a source-over light palette, so additive compositing is no longer a reason to pin anything), while a PHYSICAL OBJECT or dark content stays dark and is framed so it reads as an object placed on paper: a phone bezel, a dark video or photo stage, a printed card laminate, a baked dark raster backdrop, a caption chip riding on a photo. Opting in gets the full dark token set plus dark native controls. NOTE: custom properties resolve ON the pinned element, so a pinned object cannot reach a light-theme token for its own outer frame - give those frames explicit light-theme values. This is the generalised successor of the doc-light always-dark-chrome restore blocks (retired 2026-08-03 with the legal-page restyle). */ html[data-theme="light"] [data-stage="dark"]{ color-scheme:dark; --bg:#09090b; --bg-1:#0e0e11; --bg-2:#141417; --bg-3:#1a1a1f; --bg-footer:#060607; --bg-elev:#18181b; --surface:rgba(24,24,27,.7); --floor:#09090b; --glass-bg:rgba(24,24,27,.55); --glass-border:rgba(63,63,70,.35); --glass-inset:inset 0 1px 0 rgba(255,255,255,.07); --ink-1:#f7f8f8; --ink-2:#e4e4e7; --ink-3:#8a8f98; --ink-4:#82828c; --ink-lede:#c8c9cf; /* A pinned dark stage inside the light theme is a dark ground, so the logo returns to the CI negative variant - the light theme's brand blue would measure 1.4:1 here. Re-stated explicitly because the light block above already overrode it. Literal #ffffff for the same reason as the :root default: the CI negative variant is pure white, not the body ink. */ --logo-mark:#ffffff; --c-danger:#fca5a5; --c-danger-bg:rgba(220,38,38,.15); --c-success:#6ee7b7; --c-success-bg:rgba(5,150,105,.15); --sky:#60a5fa; --soft:#dbeafe; --amber-ink:#f59c00; --hairline:rgba(63,63,70,.5); --hairline-strong:rgba(63,63,70,.8); --hairline-bright:rgba(255,255,255,.14); --grid-line:rgba(250,250,250,.035); --annot:#a1a1aa; --datum:rgba(96,165,250,.6); --stamp:rgba(245,156,0,.85); --glow-blue:rgba(37,99,235,.4); --glow-amber:rgba(245,156,0,.3); --glow-pulse:rgba(96,165,250,.55); --edge:inset 0 1px 0 rgba(255,255,255,.06); --shadow-slab:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.45), 0 24px 48px -24px rgba(0,0,0,.6); --sheen:rgba(255,255,255,.045); --scrim:rgba(0,0,0,.55); --veil:rgba(8,9,13,.8); --chrome-bg:rgba(8,9,15,.92); --chrome-bg-strong:rgba(8,9,15,.98); } @media print{ :root{ --bg:#fafaf9; --bg-elev:#fff; --surface:#fff; --floor:#fff; /* the dark surface tiers must degrade to paper too, or any shared primitive that reaches print renders as a black block */ --bg-1:#fff; --bg-2:#fff; --bg-3:#fff; --bg-footer:#fff; --ink-1:#0c0a09; --ink-2:#292524; --ink-3:#57534e; --ink-4:#57534e; --ink-lede:#44403c; /* Print takes the CI standard variant, not the ink. The orange half is a hard #f59c00 that print does not remap, so borrowing the near-black ink here produced a black-and-orange hybrid that is not a defined CI variant at all. Brand blue prints correctly in colour and legibly in mono. */ --logo-mark:var(--navy); --hairline:rgba(12,10,9,.08); --hairline-strong:rgba(12,10,9,.18); --grid-line:rgba(12,10,9,.04); --annot:#57534e; --shadow-slab:none; } /* Two specificity traps the `:root` block above cannot reach, and both would print the mark WHITE ON WHITE. The pre-paint boot script always stamps an explicit data-theme, so `html[data-theme="light"]` (0,1,1) outranks `@media print{:root}` (0,1,0); and a mark inside a pinned dark stage is `html[data-theme="light"] [data-stage="dark"]` (0,2,1). On paper every ground is white, so the mark takes the CI standard variant in both. */ html[data-theme]{--logo-mark:var(--navy)} html[data-theme] [data-stage="dark"]{--logo-mark:var(--navy)} body{background:#fff !important;color:#0c0a09 !important} }