/* Relling — v2 design tokens + fonts
Single source of truth for the system. Load FIRST, before page styles:
Author against tokens, never raw hex.
Signal amber is for live/active state only — never decoration.
LIGHT-FIRST. The site reads light (cool neutral canvas); dark bands are
opt-in per section via [data-theme="dark"]. Rhythm comes from inset panel
cards (--radius-panel) and alternating --bg / --surface bands. Controls stay
sharp (--radius: 0); panels/cards carry the rounded language tokens below. */
/* ---- Primary typeface: Söhne (self-hosted, licensed — Klim Type Foundry) ----
Drop the licensed woff2 into /assets/fonts/ (see fonts/README.md).
Only Buch (400) is present; 500/600 are browser-synthesized until the
soehne-kraftig / soehne-halbfett woff2 are added — then uncomment below. */
@font-face {
font-family: 'Söhne';
font-style: normal; font-weight: 400; font-display: swap;
src: url('/assets/fonts/soehne-buch.woff2') format('woff2'); /* Buch / Book */
}
/* @font-face { font-family:'Söhne'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/soehne-kraftig.woff2') format('woff2'); } Kräftig / Medium */
/* @font-face { font-family:'Söhne'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/soehne-halbfett.woff2') format('woff2'); } Halbfett / SemiBold */
/* ---- Sub-font: Mona Sans (variable, OFL — free to self-host AND commit) ----
The single complementary face: labels, meta, numbers, nav, buttons, rails.
Download the variable woff2 from github.com/github/mona-sans and drop it in
/assets/fonts/mona-sans.woff2. Until then, --sub falls back to the system
grotesque so the page still renders cleanly. */
@font-face {
font-family: 'Mona Sans';
font-style: normal; font-weight: 200 900; font-display: swap;
src: url('/assets/fonts/mona-sans.woff2') format('woff2-variations');
}
:root {
color-scheme: light;
/* Fonts — Söhne is primary AND body; Mona Sans is the technical/UI sub-font. */
--grotesk: 'Söhne', 'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--sub: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* ---- Color — Light (default). Cool neutral, no warm tones. ---- */
--bg: #f9fafb; /* canvas */
--surface: #f3f4f6; /* raised / alt band */
--surface-2: #e8eaed; /* sunken / deepest (footer, frames)*/
--hover: #eceff2; /* hover / overlay */
--text: #1a1a1a; /* primary ink */
--text-2: #4a4a4a; /* secondary ink */
--text-mute: #686868; /* muted ink / meta — AA on all light surfaces */
--border: #e2e4e8; /* hairline rule */
--border-strong: #c8ccd2;
--signal: #e6b13f; /* instrument amber — fills / live dot only */
--signal-hi: #d99f2b; /* hover / deeper */
--signal-dim: #8a6010;
--signal-text: #8a6010; /* amber when used AS TEXT (AA on light) */
--on-signal: #2a1d04; /* text/icon on a signal fill — dark ink on amber */
--on-signal-hi: #2a1d04; /* hover fill is still light amber — keep dark ink */
--alert: #c8390d;
--nav-bg: rgba(249, 250, 251, 0.80);
--nav-shadow: 0 1px 2px rgba(20, 22, 26, 0.05), 0 6px 16px rgba(20, 22, 26, 0.06);
/* ---- Space — 4px base step ---- */
--space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
--space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; --space-4xl: 40px;
--gutter: 52px; --section: 96px;
/* ---- Shape & layout ---- */
--radius: 0; /* controls stay sharp */
--radius-panel: clamp(8px, 1vw, 14px); /* inset section / hero panels */
--radius-card: 10px; /* media cards, boards, notes */
--radius-sm: 6px; /* chart bars, chips */
--surface-raised: #ffffff; /* card lifted off the canvas */
--hairline: 1px; --hairline-half: 0.5px;
--margin: clamp(20px, 4.5vw, 64px);
--maxw: 1320px;
/* ---- Data-viz ramp (charts only — warm "today" scale vs signal) ---- */
--viz-warm-1: #ff7847; --viz-warm-2: #ed5f2f; --viz-warm-3: #cf4f24;
--viz-warm-4: #a8421f; --viz-warm-5: #7e351b; --viz-warm-6: #8f3a1d;
/* ---- Motion — smooth, liquid easing ---- */
--ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out: the creamy curve */
--ease-soft: cubic-bezier(0.33, 1, 0.68, 1); /* gentler, for color-only */
}
/* ---- Dark mode — kept available, not the default ---- */
[data-theme="dark"] {
color-scheme: dark;
--bg: #26292c; /* slate grey canvas */
--surface: #2e3134; /* raised slate band */
--surface-2: #1e2123; /* sunken / deepest */
--hover: #383b3f;
--text: #f4f5f5;
--text-2: #a9acae;
--text-mute: #a0a4ab; /* AA on all dark surfaces */
--border: #35383b;
--border-strong: #4a4e51;
--signal: #e6b13f;
--signal-hi: #f2c763;
--signal-dim: #b8851f;
--signal-text: #e6b13f; /* amber as text — AA on dark */
--on-signal: #2a1d04;
--on-signal-hi: #2a1d04; /* bright amber hover fill — keep dark ink */
--surface-raised: #2e3134;
--alert: #e8542a;
--nav-bg: rgba(38, 41, 44, 0.68);
--nav-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.22);
}
/* ---- Page scale ---- */
/* The site is designed against the "More Space" MacBook resolutions
(1710/1800 logical px). On default-scaled laptops (≈1470/1512) the px caps
stop shrinking and everything reads oversized — scale the whole page down
in that band. Full-viewport fills (heroes, the workcell stack) compensate
their 100vh/dvh terms with / var(--pz) so they still meet the real fold;
everything else is meant to shrink. */
:root { --pz: 1; }
@media (min-width: 1240px) {
:root { --pz: 0.85; zoom: 0.85; }
}