/* Built by Offshift design tokens — generated from the design system. Do not hand-edit. */ /* === tokens/colors.css === */ :root{ /* ---- Brand primitives (v1.2.1 — do not alter) ---- */ --offshift-operating-ink:#091411; --offshift-ledger:#EEEADE; --offshift-active-signal:#C8F135; --offshift-system-steel:#8F9D96; --offshift-clear-white:#FFFFFF; --offshift-true-black:#000000; /* ---- Ink field ramp (added: derived from Operating Ink toward System Steel) ---- */ --ink-900:#050D0B; --ink-850:#091411; --ink-800:#0E1C18; --ink-700:#152722; --ink-600:#1D332D; --ink-500:#2A423B; --ink-400:#3D5750; /* ---- Ledger field ramp (added: derived from Ledger) ---- */ --ledger-050:#F8F6EF; --ledger-100:#F3F0E7; --ledger-200:#EEEADE; --ledger-300:#E2DDCC; --ledger-400:#D2CCB7; --ledger-500:#B9B3A0; /* ---- Steel ramp ---- */ --steel-300:#B7C0BA; --steel-400:#A3AEA7; --steel-500:#8F9D96; --steel-600:#6E7C75; /* Steel 650 exists for one reason: metadata on Paper. Steel 600 measures 3.64:1 on --surface-page and 3.22:1 on --surface-sunken, which fails AA at the 11px metadata floor. 650 passes on all three Paper surfaces (5.48 / 6.10 / 4.85) while staying lighter than --text-secondary, so the meta/secondary hierarchy survives. */ --steel-650:#52605B; --steel-700:#4E5B55; /* ---- Active Signal ramp ---- */ --signal-300:#DEF87C; --signal-500:#C8F135; --signal-600:#AFD622; /* hover on dark */ --signal-700:#8FB119; /* press */ --signal-deep:#5F7A10; /* AA text/link colour on Ledger fields */ /* ---- Operational semantics (added) ---- */ --flare-500:#F2A93B; /* work-light amber — warning / attention */ --flare-deep:#8A5606; --fault-500:#D0492F; /* oxide red — critical / blocked */ --fault-deep:#9B2F19; --waiting-500:var(--steel-500); --resolved-500:var(--signal-500); /* ================= SEMANTIC ALIASES ================= */ /* Default theme = Paper (light). Dark fields opt in via [data-field="ink"]. */ --surface-page:var(--ledger-200); --surface-raised:var(--ledger-050); --surface-sunken:var(--ledger-300); --surface-card:var(--ledger-050); --surface-inverse:var(--ink-850); --surface-signal:var(--signal-500); --text-primary:var(--ink-850); --text-secondary:var(--steel-700); --text-meta:var(--steel-650); --text-inverse:var(--ledger-200); --text-link:var(--signal-deep); --text-on-signal:var(--ink-850); --text-positive:var(--signal-deep); --text-negative:var(--fault-deep); --line-hairline:var(--ledger-400); --line-datum:var(--ink-850); --line-strong:var(--ink-850); --line-inverse:var(--ink-600); --focus-ring:var(--ink-850); --focus-halo:var(--signal-500); --state-active:var(--signal-500); --state-waiting:var(--steel-500); --state-attention:var(--flare-500); --state-blocked:var(--fault-500); --state-resolved:var(--signal-500); } /* Ink field: the after-hours surface. Apply to any container, not just . */ [data-field="ink"]{ --surface-page:var(--ink-850); --surface-raised:var(--ink-800); --surface-sunken:var(--ink-900); --surface-card:var(--ink-800); --surface-inverse:var(--ledger-200); --text-primary:var(--ledger-200); --text-secondary:var(--steel-400); --text-meta:var(--steel-500); --text-inverse:var(--ink-850); --text-link:var(--signal-500); --text-positive:var(--signal-500); --text-negative:#F08163; /* Fault and Flare are mixed for daylight; on the Ink field they must lift to stay legible at small sizes and to survive a phone screen in a dark shop. */ --state-attention:#F7BE63; --state-blocked:#F08163; --line-hairline:var(--ink-600); --line-datum:var(--ledger-200); --line-strong:var(--ledger-200); --line-inverse:var(--ledger-400); --focus-ring:var(--signal-500); --focus-halo:var(--ledger-200); color:var(--text-primary); background:var(--surface-page); } /* Signal field: full-bleed Active Signal. Ink is the only text colour allowed on it. */ [data-field="signal"]{ --surface-page:var(--signal-500); --surface-raised:var(--signal-300); --surface-card:var(--signal-300); --text-primary:var(--ink-850); --text-secondary:var(--ink-600); --text-meta:var(--ink-600); --text-positive:var(--ink-850); --text-negative:var(--fault-deep); --line-hairline:rgba(9,20,17,.28); --line-datum:var(--ink-850); --focus-ring:var(--ink-850); color:var(--text-primary); background:var(--surface-page); } /* === tokens/typography.css === */ :root{ /* Archivo and JetBrains Mono are the system's typefaces (SIL OFL, no licence needed). Nimbus is retained only as a fallback for machines that happen to have it. */ --font-display:"Archivo","Nimbus Sans","Helvetica Neue",Arial,sans-serif; --font-body:"Archivo","Nimbus Sans","Helvetica Neue",Arial,sans-serif; --font-technical:"JetBrains Mono","Nimbus Mono PS",ui-monospace,monospace; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800; /* Display voice — short decisive statements. Always tight, never justified. */ --type-display-xl:800 clamp(56px,7.4vw,104px)/0.9 var(--font-display); --type-display-l:800 clamp(42px,5vw,68px)/0.94 var(--font-display); --type-display-m:800 clamp(32px,3.4vw,48px)/1.0 var(--font-display); --type-display-s:700 clamp(26px,2.4vw,34px)/1.06 var(--font-display); --tracking-display:-0.03em; /* Reading voice */ --type-heading-l:700 24px/1.2 var(--font-body); --type-heading-m:700 19px/1.28 var(--font-body); --type-heading-s:600 16px/1.35 var(--font-body); --type-body-l:400 18px/1.55 var(--font-body); --type-body-m:400 15px/1.6 var(--font-body); --type-body-s:400 13px/1.55 var(--font-body); /* Operating voice — labels, versions, states, metadata. Uppercase, tracked. */ --type-label:500 12px/1.15 var(--font-technical); --type-meta:400 11px/1.3 var(--font-technical); --type-code:400 13px/1.5 var(--font-technical); --tracking-label:0.09em; --tracking-meta:0.06em; --measure-prose:64ch; --measure-narrow:44ch; } /* === tokens/space.css === */ :root{ /* 4px base. The operational grid steps in 8s; 2 and 4 exist for hairline optics only. */ --space-0:0px; --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px; --space-6:24px; --space-7:32px; --space-8:48px; --space-9:64px; --space-10:96px; --space-11:128px; --space-12:192px; /* Operational grid: 12 columns, fixed datum gutter on the left. */ --grid-columns:12; /* @kind other */ --grid-gutter:24px; --grid-margin:48px; --grid-datum-gutter:96px; /* reserved left channel for operating-voice labels */ --container-max:1360px; --container-prose:720px; /* Vertical section rhythm */ --section-pad-y:clamp(64px,9vw,144px); --block-gap:clamp(24px,3vw,48px); } /* === tokens/shape.css === */ :root{ /* Sharp geometry. 4px is the ceiling for ordinary UI; 0 is the default. */ --radius-0:0px; --radius-1:2px; --radius-2:4px; --radius-pill:999px; /* status pills and the floating signal square ONLY when circular */ --border-hairline:1px; --border-datum:2px; --border-ring:3px; /* No drop shadows in this system. Depth is expressed as a field change plus a hairline. These two exist for genuine overlays (dialog, menu) where a page must recede. */ --overlay-scrim:rgba(9,20,17,.72); --elevation-overlay:0 24px 64px -24px rgba(9,20,17,.45); /* Paper texture: applied at very low opacity over Ledger fields. */ --texture-paper:radial-gradient(rgba(9,20,17,.035) 1px,transparent 1px); /* @kind other */ --texture-paper-size:3px 3px; } /* === tokens/motion.css === */ :root{ /* The canonical brand sequence: Operating / Five o'clock / Active / Return. 800ms, no loop. */ --motion-operating:800ms; /* @kind other */ --motion-slow:480ms; /* @kind other */ --motion-base:220ms; /* @kind other */ --motion-quick:120ms; /* @kind other */ /* return, resolve, reveal */ --ease-settle:cubic-bezier(.2,.8,.2,1); /* @kind other */ /* state change at five o'clock */ --ease-handoff:cubic-bezier(.65,0,.35,1); /* @kind other */ /* progress and telemetry only */ --ease-linear:linear; /* @kind other */ --motion-stage-operating:0ms; /* @kind other */ --motion-stage-transition:120ms; /* @kind other */ --motion-stage-active:320ms; /* @kind other */ --motion-stage-return:520ms; /* @kind other */ /* Entrance — the ONLY permitted entrance in the system. Content rises and fades; it never slides in from a side, scales up, or blurs in. */ --motion-rise:8px; /* @kind other */ --motion-stagger:60ms; /* @kind other */ } @media (prefers-reduced-motion:reduce){ :root{--motion-operating:1ms; /* @kind other */ --motion-slow:1ms; /* @kind other */ --motion-base:1ms; /* @kind other */ --motion-quick:1ms; /* @kind other */} } /* === tokens/base.css === */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font:var(--type-body-m);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4,p,figure,blockquote{margin:0} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} a{color:var(--text-link);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:color var(--motion-quick) var(--ease-settle),border-color var(--motion-quick) var(--ease-settle)} a:hover{color:var(--text-primary);border-bottom-color:var(--signal-500)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--border-datum) solid var(--focus-ring);outline-offset:2px} ::selection{background:var(--signal-500);color:var(--ink-850)} /* Operating voice helper — every metadata label in the system uses this. */ .os-label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-meta)} .os-meta{font:var(--type-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--text-meta)} /* Paper grain, opt-in on Ledger fields. */ .os-paper{background-image:var(--texture-paper);background-size:var(--texture-paper-size)}