/* ========================================================================= Strata — design tokens Generated from DESIGN.md (chain: DESIGN.md -> tokens.json -> this file). One file, three practices, two themes. Nothing in the codebase should contain a colour, size, or spacing literal that is not defined here. Shared byte-identically by all three practice sites. The source of truth is shared/css/tokens.css at the monorepo root; each site carries a verified copy at site/css/tokens.css (S11). The base :root accent is the StratusWorks amber; each practice is an override, which is the mechanism the design handover specifies. Every page therefore MUST carry its own data-practice="..." on — without it the site silently renders in the parent's hue. The check tool asserts it per page. Practice theming: set data-practice="stratusworks" | "cloudlift" | "clarustech" on . Colour scheme: prefers-color-scheme, plus data-theme attribute hooks for an explicit override (S1, S5). The footer appearance control was withdrawn on 12 August 2026 (owner decision): automatic switching only. ========================================================================= */ /* ---- self-hosted faces, latin subset, no third-party origin (S3) ---- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/archivo-600-v1.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/archivo-700-v1.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-sans-400-v1.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/instrument-sans-600-v1.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-400-v1.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-500-v1.woff2') format('woff2'); } html { color-scheme: light dark; } /* An explicit choice has to move the UA's own surfaces too — scrollbars, the canvas behind an overscroll, the date picker — or the page and the browser chrome around it disagree. Both selectors outrank the bare `html` above on specificity, so source order here is not load-bearing. */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } :root { /* ---- neutral ramp — light (warm, paper-based) ---- */ --surface-raised: #FFFEFB; --surface: #F7F5F1; --surface-sunken: #ECE8E0; --line: #D8D3C9; --line-strong: #B9B3A7; --text-muted: #5C564C; /* 6.6:1 on --surface — one step up from #6B6459, which was comfortable only on a good display */ --text-secondary: #4A4F55; /* 7.6:1 on --surface */ --text: #16181A; --connector: #A8815F; /* diagram rules only */ /* ---- accent — StratusWorks (amber), light theme ---- */ --accent: #A44E13; /* 5.2:1 on --surface, 4.7:1 on --surface-sunken */ --accent-hover: #8A400E; --accent-contrast: #F7F5F1; /* text on an accent ground */ --accent-tint: #F6EADD; --accent-tint-line: #E4CDB4; --accent-fill: #C4611C; /* strata fills, nodes — no contrast minimum */ /* ---- inverse ground — the graphite emphasis band and the footer ---- Light theme: a graphite island on a paper page. The accent switches to its light-ground partner because #A44E13 on graphite measures 3.1:1 and fails; #E08A3C measures 6.7:1. This is the "every accent is a pair" rule, applied within a single theme rather than between two. */ --inverse-surface: #16181A; --inverse-raised: #202427; --inverse-line: #303335; --inverse-text: #DDE2E4; --inverse-secondary: #AEB5B9; --inverse-muted: #A7AEB2; --inverse-accent: #E08A3C; --inverse-accent-hover: #F0A45C; --inverse-accent-contrast: #16181A; /* ---- status — shared by all practices ---- */ --positive: #2C6E32; --caution: #7A5E0F; --critical: #A03530; /* ---- type ---- */ --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Instrument Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --text-display: clamp(2.1875rem, 1.329rem + 3.52vw, 4.5rem); /* 35 → 72 */ --text-h2: clamp(1.8125rem, 1.557rem + 1.05vw, 2.5rem); /* 29 → 40 */ --text-h3: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem); /* 19 → 22 */ --text-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem); /* 17 → 20 */ --text-body: 1.0625rem; /* 17px — fixed, never fluid, every device */ --text-small: 0.9375rem; /* 15px */ --text-code: 0.8125rem; /* 13px mono */ --text-marker: 0.71875rem; /* 11.5px mono, 0.16em tracking, uppercase */ --text-metric: 1.75rem; /* 28px mono — the "after" value of a metric pair */ --leading-display: 1.02; --leading-h2: 1.12; --leading-h3: 1.2; --leading-body: 1.6; --tracking-display: -0.04em; --tracking-h2: -0.032em; --tracking-h3: -0.025em; --tracking-marker: 0.16em; --measure: 32em; /* ≈64 characters — em, never px */ /* ---- spacing — 8px base, ten steps, no value outside them ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* section rhythm — the measures that shrink with the viewport. Values match the handover table at 1440 / 768 / 390. */ --container: 1240px; --section-padding: clamp(40px, 5.6vw, 80px); /* 80 / 56 / 40 — 17% tighter than the handover table; the hero keeps the original via --hero-padding */ --hero-padding: clamp(48px, 7vw, 96px); /* 96 / 64 / 48 */ --container-margin: clamp(20px, 3vw, 32px); /* 32 / 24 / 20 */ --gutter: clamp(16px, 2vw, 32px); /* 32 / 20 / 16 */ --head-gap: clamp(24px, 3.5vw, 48px); /* 48 / 32 / 24 */ --card-padding: clamp(20px, 2.5vw, 24px); /* 24 / 24 / 20 */ --grid-gap: clamp(12px, 1.5vw, 16px); /* 16 / 16 / 12 */ /* ClarusTech's two signature measures. The hanging label column is what makes this practice's pages read as a review document rather than a brochure: the section number sits BESIDE the heading instead of above it. Both are fixed px on purpose — they size a label, not a column of prose, so they must not grow with the viewport. They collapse instead, below 900px. */ --margin-label: 190px; /* section number column, left of the heading */ --term-column: 170px; /* mono term column of the review-document table */ /* ---- other ---- */ --radius: 0; /* there is no border radius in this system */ --shadow: none; /* there are no shadows either */ --focus-ring: 2px solid var(--text); --focus-offset: 2px; --duration-state: 120ms; --duration-reveal: 400ms; --easing: cubic-bezier(.2,.7,.3,1); --target-min: 44px; } /* ---- practice hues, light theme ---- The base :root above already carries the StratusWorks amber, so restating it here looks redundant — it is not. On a page whose sets data-practice="clarustech", the override wins at :root and every descendant inherits blue, which makes data-practice="stratusworks" on a nested sibling lockup a no-op. The parent practice needs a selector of its own to be reachable from inside a themed page. Any change to the amber values above must be made here too; tools/checks.sh asserts the two agree. */ [data-practice="stratusworks"] { --accent: #A44E13; --accent-hover: #8A400E; --accent-tint: #F6EADD; --accent-tint-line: #E4CDB4; --accent-fill: #C4611C; --connector: #A8815F; --inverse-accent: #E08A3C; --inverse-accent-hover: #F0A45C; --inverse-accent-contrast: #16181A; } [data-practice="clarustech"] { --accent: #1F6B4A; /* 5.9:1 on --surface */ --accent-hover: #17553A; --accent-tint: #E5F2EB; --accent-tint-line: #BFDECD; --accent-fill: #1F6B4A; /* The warm tan connector belongs to the amber practice; beside a green accent it reads as a second colour system. Retuned to the same VISIBILITY, not the same hue: 3.43:1 on paper against StratusWorks' 3.23:1 and CloudLift's 3.39:1. The handover supplies no connector for this practice at all, and the one it does supply for CloudLift measures 1.77:1 and disappears at 1px, so matching a measured ratio rather than a published hex is the rule here. */ --connector: #57906F; --inverse-accent: #6FC49A; /* 8.0:1 on graphite */ --inverse-accent-hover: #8FD6B2; --inverse-accent-contrast: #0F1214; } [data-practice="cloudlift"] { --accent: #1D5C86; /* 5.9:1 on --surface */ --accent-hover: #164A6D; --accent-tint: #E6EFF6; --accent-tint-line: #C2D9E9; --accent-fill: #1D5C86; --connector: #5F8AA8; --inverse-accent: #74AED6; /* 8.5:1 on graphite */ --inverse-accent-hover: #93C2E2; --inverse-accent-contrast: #0F1214; } /* ========================================================================= Dark theme — authored, not inverted. Cooler neutrals; text stops short of paper-white to cut halation; elevation reverses (raised surfaces move toward light). The two identical value sets below are the Widely Available pattern: one for the system preference, one for an explicit data-theme choice. light-dark() would dedupe them but is only Newly Available. ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-raised: #202427; --surface: #16181A; --surface-sunken: #0C0E0F; /* a wider step from --surface: dark needs more separation than light to read as a ground change */ --line: #303335; /* neutral, not the blue-grey that read as a second colour system at the top of the page */ --line-strong: #454A4D; --text-muted: #A7AEB2; /* 8.0:1 on --surface */ --text-secondary: #AEB5B9; /* lifted: 6.96:1 cleared AA but read heavy at 20px */ --text: #DDE2E4; --connector: #8A6A3E; /* #6A4E2E measured ~1.6:1 — invisible at 1px */ --accent: #E08A3C; /* 6.7:1 on --surface */ --accent-hover: #F0A45C; /* hover LIGHTENS on dark */ --accent-contrast: #16181A; --accent-tint: #2A1B0F; --accent-tint-line: #4A3116; --accent-fill: #E08A3C; --positive: #7FCB86; --caution: #D9B44A; --critical: #E8918B; /* The page is already graphite, so the band cannot invert — but it must not recede onto --surface-sunken either, or the emphasis band and the alternating bands become the same colour and the page loses a ground. It rises instead, which is the same direction elevation moves on dark. */ --inverse-surface: #202427; --inverse-raised: #2A2F33; --inverse-line: #454A4D; --focus-ring: 2px solid var(--text); } /* A DESCENDANT selector, not :root itself: the amber has to land on a nested sibling lockup. It still carries the same two :not() guards as every other block here — without them it would outrank the light values above on source order alone and the sibling mark would stay dark after choosing Light. */ :root:not([data-theme="light"]) [data-practice="stratusworks"] { --accent: #E08A3C; --accent-hover: #F0A45C; --accent-contrast: #16181A; --accent-tint: #2A1B0F; --accent-tint-line: #4A3116; --accent-fill: #E08A3C; --connector: #8A6A3E; } /* Each practice needs TWO selectors: the compound one for when the practice is the page's own (data-practice on ), and the descendant one for a nested sibling lockup. Without the descendant form, a footer lockup marked data-practice="cloudlift" falls through to the LIGHT cloudlift block above and renders a light-theme green on a dark page. That shipped as a live defect in the sibling build, where the footer nests two practice lockups and neither followed the dark theme; it was invisible because each hue still looked plausible on its own. Keep both selectors for every practice. */ :root:not([data-theme="light"])[data-practice="clarustech"], :root:not([data-theme="light"]) [data-practice="clarustech"] { --accent: #6FC49A; --accent-hover: #8FD6B2; --accent-contrast: #0F1214; --accent-tint: #0E2820; --accent-tint-line: #1B4534; --accent-fill: #6FC49A; --connector: #417F60; /* 3.75:1 on --surface, matching the amber 3.57:1 */ } :root:not([data-theme="light"])[data-practice="cloudlift"], :root:not([data-theme="light"]) [data-practice="cloudlift"] { --accent: #74AED6; --accent-hover: #93C2E2; --accent-contrast: #0F1214; --accent-tint: #0F2635; --accent-tint-line: #1C4257; --accent-fill: #74AED6; --connector: #4A7699; } } :root[data-theme="dark"] { --surface-raised: #202427; --surface: #16181A; --surface-sunken: #0C0E0F; --line: #303335; --line-strong: #454A4D; --text-muted: #A7AEB2; --text-secondary: #AEB5B9; --text: #DDE2E4; --connector: #8A6A3E; --accent: #E08A3C; --accent-hover: #F0A45C; --accent-contrast: #16181A; --accent-tint: #2A1B0F; --accent-tint-line: #4A3116; --accent-fill: #E08A3C; --positive: #7FCB86; --caution: #D9B44A; --critical: #E8918B; --inverse-surface: #202427; --inverse-raised: #2A2F33; --inverse-line: #454A4D; --focus-ring: 2px solid var(--text); } :root[data-theme="dark"] [data-practice="stratusworks"] { --accent: #E08A3C; --accent-hover: #F0A45C; --accent-contrast: #16181A; --accent-tint: #2A1B0F; --accent-tint-line: #4A3116; --accent-fill: #E08A3C; --connector: #8A6A3E; } :root[data-theme="dark"][data-practice="clarustech"], :root[data-theme="dark"] [data-practice="clarustech"] { --accent: #6FC49A; --accent-hover: #8FD6B2; --accent-contrast: #0F1214; --accent-tint: #0E2820; --accent-tint-line: #1B4534; --accent-fill: #6FC49A; --connector: #417F60; } :root[data-theme="dark"][data-practice="cloudlift"], :root[data-theme="dark"] [data-practice="cloudlift"] { --accent: #74AED6; --accent-hover: #93C2E2; --accent-contrast: #0F1214; --accent-tint: #0F2635; --accent-tint-line: #1C4257; --accent-fill: #74AED6; --connector: #4A7699; } /* ---- motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }