/* Oz design tokens — single source for audience-facing HTML. Contract: reference/design-system.md. Zero dependencies, offline-safe. Three layers: 1. base — type, motion, radii. Palette-independent. 2. palette — [data-oz-palette="company"|"harness"] on . 3. viz roles — semantic colors the animated products resolve at runtime via getComputedStyle. Retheming a product = swapping the palette attribute; the engine picks it up on next paint. */ /* ── 1. base ─────────────────────────────────────────────────────────── */ :root { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --t-fast: 120ms; --t-base: 200ms; } /* ── 2. palettes ─────────────────────────────────────────────────────── */ /* Company / exec — quieter, higher contrast. Reputation surface. */ [data-oz-palette="company"] { --bg: #07090f; --bg2: #0b0e18; --bg3: #10152a; --ink: #eef2ff; --ink2: #929bb8; --ink3: #566078; --line: #20263a; --line2: #161b2b; --accent: #2dd4bf; --accent-soft: #7ee7d8; --blue: #60a5fa; --teal: #2dd4bf; --gold: #fbbf24; } /* Personal / harness — technical, denser signal. Localhost surfaces. */ [data-oz-palette="harness"] { --bg: #04050c; --bg2: #070a18; --bg3: #0c1024; --ink: #e8edff; --ink2: #9aa6cc; --ink3: #5c6690; --line: #1a2142; --line2: #12172e; --accent: #a06bff; --accent-soft: #c9a6ff; --blue: #7fa8ff; --teal: #34e7ff; --gold: #ffb24d; } /* Print / daylight — same hue families, ladder inverted. Off-white rather than pure white so large fills do not glare. */ [data-oz-palette="light"] { --bg: #f7f8fc; --bg2: #eef0f8; --bg3: #e5e8f4; --ink: #141a2c; --ink2: #3e4560; --ink3: #666e8c; --line: #c4cadf; --line2: #dde0ee; --accent: #6b3fd4; --accent-soft: #e5dbfb; --blue: #2b57c4; --teal: #0e7490; --gold: #8a5a06; } /* ── 3. viz semantic roles ───────────────────────────────────────────── */ /* Meaning is fixed across palettes so a product reads the same everywhere: cyan = signals in · violet = engines/agents · amber = actions/outputs · human = people · green = resolved · red = error · customer = external account. Customer is a role, never an account: the field view once had a per-account variable, which put a named production org in the company hub. This file publishes to a docroot with no auth — keep org names out of it. */ /* Every role carries a -soft tint variant. unify-palette.py emits all eight pairs; three of them had no token here, so snapped pages held literals no artifact could reference. Keep the two files in step. */ :root { --cyan: #34e7ff; --cyan-soft: #7af2ff; --violet: #a06bff; --violet-soft: #c9a6ff; --magenta: #ff5fe0; --magenta-soft: #ff9ceb; --amber: #ffb24d; --amber-soft: #ffd79a; --green: #43f5b0; --green-soft: #8ff9d2; --red: #ff6b6b; --red-soft: #ff9d9d; --human: #7fa8ff; --human-soft: #bcd4ff; --customer: #ff4d9d; --customer-soft: #ff97c6; --ctxsrc: #8a93c4; --mem: #4a5488; } /* ── 4. viz roles on light ───────────────────────────────────────────── */ /* Role *meaning* is palette-independent, but the dark-surface values are luminous and unreadable on paper-white. Light keeps each hue and moves the value: base darkens to a text/stroke weight, soft becomes a pale fill wash. Must follow section 3 to win on equal specificity. */ [data-oz-palette="light"] { --cyan: #0e7490; --cyan-soft: #cbeef7; --violet: #6b3fd4; --violet-soft: #e5dbfb; --magenta: #9c1a94; --magenta-soft: #fad6f5; --amber: #8a5a06; --amber-soft: #fbe9c8; --green: #0d7a58; --green-soft: #c9f0e1; --red: #b3261e; --red-soft: #fbdad6; --human: #2b57c4; --human-soft: #d8e1fa; --customer: #b3175e; --customer-soft: #fbd6e6; --ctxsrc: #5b6289; --mem: #8d94b5; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; } }