/* ========================================================================== IDW-26 - tokens.v1.css Drawing Set IDW-26 "The Sovereign Monolith, Rev B" The single source for every design token (DESIGN-BIBLE-IDW26.md, 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 - Rev D "Surveyed Sheet" voices -------------------------------- display = Bricolage Grotesque (variable optical sizing), body = Hanken Grotesk, machine register = Geist Mono. Every page must load these three families in its Google Fonts link. */ --font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-display:'Bricolage Grotesque',Georgia,serif; --font-mono:'Geist Mono',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); /* 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:#71717a; --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; /* 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; /* 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; --space-section:clamp(80px, 5vw + 48px, 128px); --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; } /* ========================================================================== LIGHT MODE - legal pages only (body.doc-light) and print. The dark floor stays dark on legal pages; the paper sheet uses these. ========================================================================== */ body.doc-light{ --bg:#fafaf9; --bg-elev:#fff; --surface:#fff; --ink-1:#0c0a09; --ink-2:#292524; --ink-3:#57534e; --ink-4:#57534e; --ink-lede:#44403c; --hairline:rgba(12,10,9,.08); --hairline-strong:rgba(12,10,9,.18); --grid-line:rgba(12,10,9,.04); --annot:#57534e; --shadow-slab:inset 0 1px 0 rgba(255,255,255,.5), 0 24px 48px -24px rgba(12,10,9,.25); } @media print{ :root{ --bg:#fafaf9; --bg-elev:#fff; --surface:#fff; --floor:#fff; --ink-1:#0c0a09; --ink-2:#292524; --ink-3:#57534e; --ink-4:#57534e; --ink-lede:#44403c; --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; } body{background:#fff !important;color:#0c0a09 !important} }