/* ============================================================ AI SpeedForce — design tokens Single source of truth. Nothing below this file hardcodes a colour, size, radius, duration or z-index. Colour is derived from assets/img/aisf-logo.png by k-means (k=6, 92,172 opaque px) plus a chroma-weighted pass for the bolt. Hexes annotated [logo] are used verbatim from that extraction; the bolt stops are its four vertical band means. ============================================================ */ :root { color-scheme: dark; /* ---------- Surfaces (dark-first) ---------- */ --c-ink: #120C1C; /* page base, plum-black, hue 265 */ --c-ink-deep: #0C0714; /* footer, deepest well */ --c-surface: #1D1430; /* raised panel */ --c-surface-2: #2A1E42; /* hover / nested panel */ --c-line: #3E2853; /* hairline [logo 27.0%] */ --c-line-soft: rgba(62, 40, 83, 0.55); --c-line-bright:#563870; /* focused / active edge */ /* ---------- Text ---------- */ --c-chrome: #EEE8E8; /* primary text [logo 12.7%] */ --c-mauve: #C09BB8; /* muted text [logo 8.4%] */ --c-mauve-dim: #8E7A93; /* tertiary, mono meta */ /* ---------- Accent: the bolt. The only accent. ---------- */ --c-accent: #F17969; /* coral, bolt midpoint 7.01:1 on ink */ --c-accent-warm: #F5A65C; /* amber, bolt head 9.58:1 */ --c-accent-rose: #E7537D; /* rose, bolt body 5.42:1 */ --c-accent-mag: #DB4D93; /* magenta, bolt tail 5.02:1 */ /* Fills behind text. These stay the same in both themes, and the text on them is always --c-on-accent (ink): 5.02:1 or better on every stop. */ --c-on-accent: #120C1C; --c-fill-warm: #F5A65C; --c-fill-rose: #E7537D; /* Platform logos are other companies' marks and are never recoloured. They sit on this white badge in BOTH themes so every one reads, including the dark-on-transparent WordPress and BigCommerce marks. */ --c-logo-bg: #FFFFFF; /* Chart status fills (good / held / stopped). Validated with the dataviz palette checker against --c-surface in each theme: dark set passes all six checks; light set passes with CVD in the 6-8 band, so every chart that uses them also carries a legend, 2px gaps and per-mark labels. */ --c-chart-good: #35A877; --c-chart-held: #CC7630; --c-chart-stop: #E0487A; --c-accent-quiet: rgba(241, 121, 105, 0.14); --c-accent-edge: rgba(241, 121, 105, 0.34); --c-accent-ring: rgba(241, 121, 105, 0.10); /* focus halo on the trace */ --c-wash-strong: rgba(219, 77, 147, 0.22); /* bolt wash, banners + OG */ --c-wash: rgba(219, 77, 147, 0.16); /* bolt wash, CTA band */ --c-wash-soft: rgba(219, 77, 147, 0.13); /* bolt wash, page header */ --c-wash-faint: rgba(219, 77, 147, 0.10); /* bolt wash, trace panel */ --c-veil: rgba(18, 12, 28, 0.82); /* sticky header over content */ --c-hatch: rgba(62, 40, 83, 0.28); /* placeholder hatching */ --c-todo: #FFD166; /* unresolved legal variable */ --c-todo-bg: rgba(255, 209, 102, 0.12); --c-verify: #7FC8F8; /* claim needing confirmation */ --c-verify-bg: rgba(127, 200, 248, 0.12); --grad-bolt: linear-gradient(155deg, #F5A65C 0%, #F17969 38%, #E7537D 72%, #DB4D93 100%); --grad-bolt-x: linear-gradient(90deg, #F5A65C 0%, #F17969 38%, #E7537D 72%, #DB4D93 100%); /* ---------- Semantic ---------- */ --c-ok: #6FD3A4; --c-wait: #F5A65C; --c-focus: #F5A65C; /* ---------- Type families ---------- */ --font-display: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif; --font-body: "IBM Plex Sans", "Plex Sans Fallback", Arial, sans-serif; --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ---------- Type scale (fluid) ---------- */ --fs-label: 0.6875rem; /* 11, mono */ --fs-2xs: 0.75rem; /* 12 */ --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: clamp(1rem, 0.973rem + 0.12vw, 1.0625rem); /* 16 → 17 */ --fs-lg: clamp(1.0625rem, 1.01rem + 0.26vw, 1.1875rem); --fs-xl: clamp(1.1875rem, 1.10rem + 0.40vw, 1.375rem); --fs-2xl: clamp(1.375rem, 1.21rem + 0.75vw, 1.75rem); --fs-3xl: clamp(1.75rem, 1.45rem + 1.35vw, 2.5rem); --fs-4xl: clamp(2.125rem, 1.60rem + 2.35vw, 3.375rem); --fs-5xl: clamp(2.5rem, 1.72rem + 3.50vw, 4.25rem); /* page titles (h1): one step below --fs-5xl, which read too large in the two-column heroes. 32px on a phone, 50px on a wide screen. */ --fs-display: clamp(2rem, 1.55rem + 1.9vw, 3.125rem); --lh-tight: 1.06; --lh-snug: 1.2; --lh-normal: 1.35; --lh-prose: 1.62; --lh-legal: 1.78; /* generous leading for long-form legal */ --tr-tight: -0.022em; /* display sizes */ --tr-snug: -0.012em; --tr-wide: 0.10em; /* mono labels */ /* ---------- Spacing ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(3.5rem, 2.4rem + 5vw, 7rem); /* ---------- Radii + the bolt cut ---------- --cut is the 45deg chamfer. It appears ONLY on instrumented surfaces (trace, run cards, matrix, CTA band). Never on buttons, inputs, pills or prose. See .is-cut in aisf.css. */ --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-pill: 999px; --cut: 18px; /* ---------- Borders ---------- */ --bd: 1px solid var(--c-line); --bd-soft: 1px solid var(--c-line-soft); /* ---------- Shadows (plum-tinted, never neutral black) ---------- */ --sh-sm: 0 1px 2px rgba(6, 3, 12, 0.4); --sh: 0 12px 32px rgba(6, 3, 12, 0.45); --sh-lg: 0 28px 70px rgba(6, 3, 12, 0.6); --sh-accent: 0 10px 34px rgba(219, 77, 147, 0.22); /* ---------- Motion ---------- */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 420ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Run-trace choreography ---------- Read by initTrace() at runtime, so the whole sequence retunes from here. Values are milliseconds; the JS parses the number off the front. */ --trace-lead: 240ms; /* pause before the first node resolves */ --trace-step: 520ms; /* dwell on an ordinary node */ --trace-settle: 130ms; /* beat between nodes */ --trace-gate: 950ms; /* the human-approval hold. THE tunable one. */ --trace-count: 420ms; /* counter roll-up duration */ --trace-wire: 380ms; /* connector advance between two nodes */ --ease-wire: cubic-bezier(0.35, 0, 0.15, 1); /* ---------- Layout ---------- */ --container: 1180px; --measure: 62ch; --measure-legal: 68ch; /* legal prose runs slightly wider */ --rail: 8.5rem; /* instrument rail width */ /* Header is tokenised so every page, including legal, 404 and /brand/, shares one geometry. --header-h stays as the sticky-offset alias. */ --hdr-h-sm: 72px; --hdr-h-lg: 80px; --logo-h-sm: 38px; /* within the 36-40 band */ --logo-h-lg: 42px; /* within the 40-44 band */ /* Split lockup (PROPOSAL, see /brand/). Icon crop + live wordmark. */ --icon-h-sm: 30px; --icon-h-lg: 34px; --fs-lockup-sm: 1.0625rem; /* 17 */ --fs-lockup-lg: 1.1875rem; /* 19 */ --header-h: var(--hdr-h-sm); /* ---------- z-index ---------- */ --z-base: 1; --z-sticky: 10; --z-header: 100; --z-drawer: 300; --z-skip: 400; /* ---------- Breakpoints: THE LADDER ---------- Six tiers, em-based so they track the user's font size rather than a device pixel count. Every media query in aisf.css uses one of these and nothing else. All are min-width: the system is mobile-first, so the narrow layout is the unconditional base and each tier only adds. --bp-sm 40em 640px phone landscape / small tablet 2-up grids, header CTA appears, roomier trace --bp-md 48em 768px tablet portrait wider container gutter, matrix becomes a table --bp-lg 52em 832px large tablet footer expands, CTA band and banners go side-by-side --bp-nav 62em 992px desktop nav bar replaces the drawer, rail and TOCs appear --bp-xl 64em 1024px wide desktop 3-up and 4-up grids --bp-2xl 75em 1200px full width nav returns to its roomy gap --bp-nav and --bp-xl are only 32px apart and deliberately stay separate: --bp-nav is the chrome switch (drawer to nav bar, rail gutter appears) and --bp-xl is the content switch (grids go 3-up and 4-up). Merging them would make four-column grids appear while the page is still only 992px wide. CAVEAT: @media cannot read a custom property, so the values below are documentation and are what JS and the build-time checker read. The literal ems in aisf.css are the ones the browser honours. If you change a value here you MUST change it there too, and `python3 build/responsive/check.py` fails the build if they drift. */ --bp-sm: 40em; --bp-md: 48em; --bp-lg: 52em; --bp-nav: 62em; --bp-xl: 64em; --bp-2xl: 75em; } @media (min-width: 62em) { :root { --header-h: var(--hdr-h-lg); } } /* ---------- Light theme ---------- Dark stays the default and the no-JS look. /assets/js/theme-init.js sets data-theme on before first paint, from the visitor's saved choice or, failing that, their system preference. Only colour tokens change here; every component reads them, so no component needs a light-mode rule. Contrast (WCAG 2.x) against --c-ink / --c-surface-2, the worst case: chrome 17.2 / 15.7, mauve 7.8 / 7.1, mauve-dim 5.8 / 5.3, accent 5.4 / 5.0, accent-warm 5.9 / 5.4, ok 5.0 / 4.6, focus 4.9 / 4.5. */ :root[data-theme="light"] { color-scheme: light; --c-ink: #FBF8FA; --c-ink-deep: #F2ECF3; --c-surface: #FFFFFF; --c-surface-2: #F3EDF5; --c-line: #E2D5E7; --c-line-soft: rgba(110, 80, 130, 0.18); --c-line-bright:#B9A3C6; --c-chrome: #1B1226; --c-mauve: #5B4866; --c-mauve-dim: #6E5C78; /* darker bolt stops, so accent TEXT passes AA on a pale ground */ --c-accent: #B83A2B; --c-accent-warm: #9A4B0B; --c-accent-rose: #B8264F; --c-accent-mag: #A8286B; --c-accent-quiet: rgba(184, 58, 43, 0.08); --c-accent-edge: rgba(184, 58, 43, 0.30); --c-accent-ring: rgba(184, 58, 43, 0.10); --c-wash-strong: rgba(219, 77, 147, 0.14); --c-wash: rgba(219, 77, 147, 0.10); --c-wash-soft: rgba(219, 77, 147, 0.08); --c-wash-faint: rgba(219, 77, 147, 0.06); --c-veil: rgba(251, 248, 250, 0.86); --c-hatch: rgba(110, 80, 130, 0.12); --c-todo: #8A5A00; --c-todo-bg: rgba(255, 209, 102, 0.22); --c-verify: #1F5F8B; --c-verify-bg: rgba(127, 200, 248, 0.20); --c-ok: #1D7A50; --c-wait: #9A4B0B; --c-chart-good: #1D7A50; --c-chart-held: #B8660F; --c-chart-stop: #C0305E; --c-focus: #B0520C; --sh-sm: 0 1px 2px rgba(60, 30, 80, 0.08); --sh: 0 12px 32px rgba(60, 30, 80, 0.10); --sh-lg: 0 28px 70px rgba(60, 30, 80, 0.14); --sh-accent: 0 10px 30px rgba(219, 77, 147, 0.18); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }