/** * @onendone/tokens — semantic design tokens (ARCHITECTURE.md §19). * * One token package, consumed by every platform surface: marketing site, * builder, and dashboard. Names are semantic, never numeric (CLAUDE.md: * `--surface`, `--accent` — never `--color1`). * * THEMES (2026-08-13 restyle — "professional, sharper"): two schemes over * one geometry. Light is the default; dark follows the system preference * and an explicit `data-theme` attribute on always wins (the apps' * theme toggle sets it + persists in localStorage as `ond_theme`). * * Token contract (roles, not colors — every consumer styles against these): * --surface page background * --panel raised background: cards, inputs, rows * --panel-strong strongest raised background: drawers, modals, popovers * --surface-deep recessed background: wells, previews, code-ish areas * --ink primary text on surface/panel * --line hairline borders and separators * --action the signature teal — buttons, selection, focus * --on-action text on an --action fill (dark ink in both themes) * --accent terracotta highlight — sparing, never body text * --paper DEPRECATED alias of --ink (legacy text usages only; * never use as a background — that's --panel's job) */ /* ── Self-hosted fonts (2026-08-13, §18: subset + self-hosted) ───────── * Variable latin woff2 pulled from Google Fonts, served from each app's * /assets/fonts/ (this file is served at /assets/tokens.css in both apps, * so the relative URLs resolve identically). ~70KB total. */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Display serif (2026-09-02, "Framework" restyle): Fraunces carries the * big headlines and figures across every platform surface — the sans pair * keeps labels and body. Variable latin, roman + italic. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/fraunces-latin.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('fonts/fraunces-italic-latin.woff2') format('woff2'); } :root { /* ── Light scheme ("Boardroom light") ──────────────────────────────── */ /* Brand family (2026-08-21): one palette across the marketing site, * builder, and dashboard — steel blue from the Owline mark on warm * near-white, replacing the old teal/terracotta pairing. */ --surface: #faf9f7; --panel: #ffffff; --panel-strong: #ffffff; --surface-deep: #efece6; --ink: #16202c; --line: #e4e0d8; --action: #2f455c; --on-action: #f4f2ee; --action-strong: #2f455c; /* passes AA as TEXT on light panels (≈8.9:1) */ --accent: #2f455c; /* The BOLD third color (2026-08-21): antique gold, spent on ~10% of the * surface — counts, selected states, small-caps labels. --pop for fills * and large marks; --pop-strong is the AA-safe text shade. */ --pop: #b68235; --pop-strong: #8a5f22; --success: #106c10; --danger: #bf2121; --paper: var(--ink); /* ── Type ──────────────────────────────────────────────────────────── */ /* Heading/body pair, within the generated-site font budget (§18); the * PLATFORM surfaces additionally carry the display serif (Framework, * 2026-09-02) for h1-scale headlines — client sites never inherit it. */ --font-heading: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-display: "Fraunces", Georgia, serif; /* Signature slanted edge on primary actions (Framework). */ --slant: polygon(14px 0, 100% 0, 100% 100%, 0 100%); /* ── Spacing scale ─────────────────────────────────────────────────── */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* ── Motion scale ──────────────────────────────────────────────────── */ --motion-fast: 120ms; --motion-base: 240ms; --motion-slow: 480ms; --ease-signature: cubic-bezier(0.075, 0.5, 0, 1); --ease-standard: ease-out; /* ── Shape — fully square (2026-08-13; radius 0 across the platform). Tokens stay so a future softening is one edit; true circles (spinners, dots) are hardcoded 50% where they live. ── */ --radius-band: 0; --radius-card: 0; --radius-control: 0; --shadow-hover: 0 6px 20px rgb(13 32 45 / 0.18); } /* Dark scheme ("Deep navy grid") — EXPLICIT choice only (2026-08-13: * light is the default for everyone; the OS preference no longer flips * the theme — the visitor opts into dark with the toggle). */ :root[data-theme='dark'] { --surface: #141d28; --panel: #1c2836; --panel-strong: #10161e; --surface-deep: #10161e; --ink: #f4f2ee; --line: rgba(244, 242, 238, 0.14); --action: #b9cfe4; /* steel blue lifts to a light tone on dark panels */ --on-action: #16202c; --action-strong: #a9c4de; --accent: #a9c4de; --pop: #c99a4e; --pop-strong: #d9b45f; --shadow-hover: 0 6px 20px rgb(0 0 0 / 0.45); } /* Non-negotiable (§17): motion collapses when the visitor asks for it. */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }