/****************************************************************************** * three.ws — Canonical Design Tokens (B01) * ════════════════════════════════════════════════════════════════════════════ * THE single source of truth for every design primitive on the platform: * colour, surface, ink, stroke, spacing, type, radius, shadow, blur, motion. * * One vocabulary, not eight. The per-surface namespaces (--mk-* / --pd-* / * --ibm-* / --gx-* / --ho-* / --saas-* / --sdk-* / --t-*) were removed in B02; * do NOT reintroduce a parallel palette. A surface that needs a distinct brand * accent (e.g. IBM Carbon blue at /ibm/*) expresses it as a small theme layer * that REMAPS these tokens — never a standalone set. * * Loading: imported by public/style.css and public/nav.css, so it reaches every * page (full-stylesheet pages via style.css; nav-only / embed surfaces via * nav.css). New pages need only ensure one of those is linked. * * Rule: reference tokens by name (var(--surface-1), var(--space-md), …). Never * hardcode a hex/rgba/px that an existing token already expresses. See * DESIGN-TOKENS.md for the full vocabulary and migration guidance. * Monochrome on near-black + golden-ratio (φ = 1.618) spacing & type. ******************************************************************************/ :root { /* Phi ratio */ --phi: 1.618; /* Spacing scale (each step × φ) */ --space-3xs: 0.146rem; /* ~2.3px */ --space-2xs: 0.236rem; /* ~3.8px */ --space-xs: 0.382rem; /* ~6.1px */ --space-sm: 0.618rem; /* ~9.9px */ --space-md: 1rem; /* 16px */ --space-lg: 1.618rem; /* ~25.9px */ --space-xl: 2.618rem; /* ~41.9px */ --space-2xl: 4.236rem; /* ~67.8px */ /* Typography scale * Two registers in one ladder: * · dense UI band (2xs→ui) — fixed px-honest rungs for chrome/labels/body, * where the product actually lives (nav, dashboard, cards). These fill the * gap the phi steps skip; they are the homes for 11/13/14px text. * · display band (base→3xl) — phi-spaced (×φ) for marketing headers. * Migrate hardcoded px to the nearest rung; never reintroduce raw px. */ --text-2xs: 0.6875rem; /* 11px — micro: pills, badges, hints, timestamps */ --text-xs: 0.618rem; /* ~9.9px — smallest decorative label */ --text-sm: 0.764rem; /* ~12.2px — small UI labels, captions */ --text-md: 0.8125rem; /* 13px — dense UI body (the most common size) */ --text-ui: 0.875rem; /* 14px — nav links, controls, comfortable UI */ --text-base: 1rem; /* 16px — reading body baseline */ --text-lg: 1.236rem; /* ~19.8px — small headings (×φ) */ --text-xl: 1.618rem; /* ~25.9px — section headings (×φ) */ --text-2xl: 2.618rem; /* ~41.9px — hero / display (×φ) */ --text-3xl: 4.236rem; /* ~67.8px — oversized marketing display (×φ) */ /* Font weights — one ladder, referenced by the heading/body classes below */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights — golden ratio */ --leading-tight: 1.382; --leading-normal: 1.618; --leading-loose: 2.058; /* Radii — 4-token scale (B09). Every rounded corner on the site maps to one of exactly these four; do not introduce ad-hoc px radii. sm small controls, inputs, chips, tags (6px) md buttons & interactive controls (10px, = dashboard control) lg cards, panels, modals (14px, = dashboard card) pill fully-rounded pills (circles use 50%) (999px) The legacy semantic names --radius-card / --radius-control are kept below as thin aliases so existing consumers keep working; new code uses sm/md/lg/pill. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Header height */ --header-h: 3.5rem; /* Font stacks — families are self-hosted in /fonts/fonts.css */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; /* Accent */ --accent: #ffffff; --accent-soft: rgba(255, 255, 255, 0.10); /* Surface system — mirrors the /dashboard (dashboard-next) palette so every surface across the site reads as one product. Monochrome glass on near-black, soft 14px cards, semantic green/red/amber. Reference these instead of hand-rolling rgba()s so future pages stay on-brand. */ --surface-glass: linear-gradient(180deg, rgba(20, 21, 28, 0.7), rgba(14, 15, 22, 0.5)); --surface-1: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.05); --surface-3: rgba(255, 255, 255, 0.08); --stroke: rgba(255, 255, 255, 0.08); --stroke-strong: rgba(255, 255, 255, 0.14); --ink: #e8e8e8; --ink-dim: #888888; --radius-card: var(--radius-lg); /* legacy alias → lg */ --radius-control: var(--radius-md); /* legacy alias → md */ --success: #4ade80; --danger: #f87171; --warn: #fbbf24; /* Solid near-black backgrounds — opaque counterparts to the translucent --surface-* overlays. Use these for solid page/panel fills instead of hand-typing var(--bg-0) / var(--bg-1) so the monochrome base stays consistent. */ --bg-0: #0a0a0a; /* deepest page background */ --bg-1: #1a1a1a; /* raised solid panel/control */ /* Ink tiers (B01 additions) — completes the text-colour ramp so headings and muted captions stop hardcoding #fff / rgba whites. bright pure-white headings & primary CTA labels ink default body text (above) dim secondary/muted text (above) faint tertiary hints, disabled, watermark labels */ --ink-bright: #ffffff; --ink-faint: rgba(255, 255, 255, 0.45); /* Elevation / shadow (B01) — three depth tiers. Mirrors the component layer in style.css so any surface can express depth without hand-rolling shadows. 1 = resting panel · 2 = card · 3 = lifted / hover / modal */ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-2: 0 4px 24px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.20); --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.20); /* Blur (B01) — backdrop-filter glass tiers. Pair with a --surface-* fill. sm subtle chrome (sticky bars, chips) md standard glass panels / docks lg heavy modal / overlay scrim glass */ --blur-sm: 8px; --blur-md: 16px; --blur-lg: 28px; /* Motion (B01) — one duration ladder + named easings. Compose as `transition: var(--duration-fast) var(--ease-standard);` Respect prefers-reduced-motion at the component level. */ --duration-instant: 80ms; /* state flips: hover tint, focus ring */ --duration-fast: 140ms; /* controls: buttons, toggles, tabs */ --duration-base: 220ms; /* panels, dropdowns, cards */ --duration-slow: 420ms; /* page/section reveals, large moves */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* default UI motion */ --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1); /* expressive enter/reveal */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* decelerate-only */ /* Interactive states (B11) — shared focus-ring + disabled vocabulary. Every :focus-visible outline and disabled control on the platform references these (buttons.css re-declares them with identical literal fallbacks so it stays portable on pages that load it standalone). */ --focus-ring-color: var(--accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --disabled-opacity: 0.4; --disabled-cursor: not-allowed; /* Theme — the default (no [data-theme]) is the brand dark palette above. color-scheme tells the UA to paint native form controls, scrollbars and the canvas in the matching scheme. The theme-switcher sets data-theme on ; an inline boot script (scripts/inject-theme-boot.mjs) applies it before first paint so there is no flash. See [data-theme='light'] below. */ color-scheme: dark; } /* Explicit dark — identical to :root, so toggling data-theme="dark" is a no-op on the palette but still drives color-scheme + the [data-theme] attribute the switcher reads back. Keep in lockstep with :root. */ :root[data-theme='dark'] { color-scheme: dark; } /* ════════════════════════════════════════════════════════════════════════════ * LIGHT THEME * The single alternate palette. It REMAPS the colour primitives above to a * light surface system — it never introduces a parallel namespace (same rule * as the per-surface namespaces removed in B02). Every token-driven surface * flips automatically; surfaces that still hardcode colours render as dark * islands until migrated to tokens (tracked follow-up, see DESIGN-TOKENS.md). * * Two values can't survive a straight flip and are remapped here too: * · --accent was pure white (white-fill primary CTA). On light that is * invisible, so light uses a real accent blue + white CTA ink. * · Button/elevation tokens that hardcoded white/black are re-pointed. * ════════════════════════════════════════════════════════════════════════════ */ :root[data-theme='light'] { color-scheme: light; /* Solid canvas + raised panel */ --bg-0: #ffffff; --bg-1: #f3f4f6; /* Glass + translucent surface ramp (dark ink tint on light, mirrors the dark palette's white tint on black) */ --surface-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 245, 248, 0.72)); --surface-1: rgba(15, 18, 28, 0.035); --surface-2: rgba(15, 18, 28, 0.06); --surface-3: rgba(15, 18, 28, 0.09); --stroke: rgba(15, 18, 28, 0.10); --stroke-strong: rgba(15, 18, 28, 0.16); /* Ink ramp — dark text on light */ --ink-bright: #0a0c12; --ink: #1d212b; --ink-dim: #5a616f; --ink-faint: rgba(15, 18, 28, 0.45); /* Accent — white is invisible on light, so light gets a real accent. */ --accent: #2563eb; --accent-soft: rgba(37, 99, 235, 0.10); /* Elevation — softer, cooler shadows on a light canvas */ --shadow-1: 0 1px 3px rgba(15, 18, 28, 0.08); --shadow-2: 0 4px 24px rgba(15, 18, 28, 0.10), 0 1px 4px rgba(15, 18, 28, 0.06); --shadow-3: 0 8px 32px rgba(15, 18, 28, 0.14), 0 1px 4px rgba(15, 18, 28, 0.08); /* Button component tokens that hardcoded white/near-black in style.css. Primary becomes accent-fill with white ink; the white-tint hovers on secondary/ghost become dark tints so they read on a light surface. */ --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #1d4ed8; --btn-primary-bg-active: #1e40af; --btn-secondary-bg-hover: rgba(15, 18, 28, 0.10); --btn-secondary-bg-active: rgba(15, 18, 28, 0.14); /* Nav source vars — nav.css derives its --nv-* layer from these (with dark literal fallbacks), so remapping them here flips the shared header too. */ --bg: #ffffff; --hairline: rgba(15, 18, 28, 0.10); --hairline-strong: rgba(15, 18, 28, 0.16); --text: #1d212b; --text-2: #5a616f; --text-3: #888f9c; --text-4: #aab0bc; --nv-bar-bg: rgba(255, 255, 255, 0.82); } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }