/* * @tap-nfc/design-tokens — single source of truth for cross-product * design primitives, semantic recipes, and component styles. * * Layer 1 (primitives) — raw values, no semantic meaning. * Layer 2 (semantic) — purpose-driven names referencing primitives. * Layer 3 (component) — style recipes referencing semantic + primitives. * * Default theme is matrix-on-black (the post-Cluster-15 mint look * with brand logo retaining vivid #00ff00 per Cluster-16). A light * theme stub is included at the bottom; activate via * . Light theme is intentionally * incomplete — fill out when the operator commits to a light * variant. The semantic-token names are theme-agnostic so the * stub-completion is purely additive. * * Naming convention: * --c-- colour primitives (ramp stops) * --font- font-family primitives * --text- type-scale primitives * --weight- font-weight primitives * --space- spacing primitives (4 px base) * --radius- border-radius primitives * --ease- transition-timing primitives * --duration- transition-duration primitives * * --color- semantic colour tokens * --glow- semantic glow alphas * --glass- semantic glass-effect tokens * * --- component recipes (--btn-bg, --card-radius, etc.) */ :root { /* ────────────────────────────────────────────────────────────── * Layer 1 — primitives * ────────────────────────────────────────────────────────────── */ /* Green ramp — the matrix accent */ --c-green-50: #f0fdf4; --c-green-100: #c8f7c8; --c-green-200: #a4f2ab; --c-green-300: #70f37d; /* Cluster-15 mint primary */ --c-green-400: #39ff14; /* bright accent (existing --accent) */ --c-green-500: #00ff00; /* vivid (brand-logo only per Cluster-16) */ --c-green-700: #006a1b; --c-green-900: #003510; /* Ink ramp — neutrals */ --c-ink-50: #fafafa; --c-ink-100: #c8c8c8; --c-ink-200: #a0a0a0; --c-ink-300: #888888; --c-ink-500: #4d8646; /* mid-green-grey for muted captions */ --c-ink-700: #1a1a1a; --c-ink-800: #0e120e; --c-ink-900: #060806; --c-ink-950: #000000; /* Per-product accents (umbrella references; products may alias --color-accent to one) */ --c-tapreview: #66ff41; --c-tapreach: #00ffaa; --c-tapinfo: #70f37d; --c-taphabit: #00e8ff; --c-tapremind: #ccff41; /* Type scale */ --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 64px; --weight-reg: 400; --weight-med: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 900; --leading-tight: 1.15; --leading-snug: 1.30; --leading-normal: 1.50; --leading-loose: 1.65; /* Spacing — 4 px base */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Border radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* Motion */ --ease-default: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --duration-fast: 150ms; --duration-med: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* ────────────────────────────────────────────────────────────── * Layer 2 — semantic (default = matrix-on-black dark theme) * ────────────────────────────────────────────────────────────── */ /* Foreground / background */ --color-fg: var(--c-ink-50); --color-fg-muted: var(--c-ink-100); --color-fg-subtle: var(--c-ink-300); --color-bg: var(--c-ink-950); --color-bg-elevated: var(--c-ink-900); /* The brand accent — single point of theme swap. * Change this one line to flip the entire palette to vivid: * --color-accent: var(--c-green-500); */ --color-accent: var(--c-green-300); --color-accent-bright: var(--c-green-400); /* gradients, hover peaks */ --color-accent-vivid: var(--c-green-500); /* brand-logo only */ --color-accent-fg: var(--c-ink-950); /* text on filled-accent surfaces */ /* Borders */ --color-border-faint: rgba(112, 243, 125, 0.08); --color-border-subtle: rgba(112, 243, 125, 0.15); --color-border-strong: rgba(112, 243, 125, 0.45); --color-border-solid: var(--color-accent); /* Glow alphas — eight stops cover the umbrella-site's existing * 25-distinct-alpha distribution without losing fidelity in * migration. Use the closest match at each call site. */ --glow-trace: rgba(112, 243, 125, 0.05); --glow-faint: rgba(112, 243, 125, 0.10); --glow-soft: rgba(112, 243, 125, 0.15); --glow-mild: rgba(112, 243, 125, 0.22); /* post-Cluster-14 default */ --glow-medium: rgba(112, 243, 125, 0.30); --glow-strong: rgba(112, 243, 125, 0.40); --glow-bold: rgba(112, 243, 125, 0.55); --glow-loud: rgba(112, 243, 125, 0.70); /* Backgrounds tinted with the accent — for filled badges, frost CTA */ --bg-accent-trace: rgba(112, 243, 125, 0.04); --bg-accent-faint: rgba(112, 243, 125, 0.06); --bg-accent-soft: rgba(112, 243, 125, 0.10); --bg-accent-mild: rgba(112, 243, 125, 0.12); /* frost CTA resting */ --bg-accent-strong:rgba(112, 243, 125, 0.18); /* frost CTA hover */ /* Glass-effect surfaces */ --glass-bg: rgba(0, 0, 0, 0.55); --glass-bg-soft: rgba(0, 0, 0, 0.35); --glass-blur: blur(14px) saturate(160%); --glass-blur-soft: blur(8px) saturate(140%); --glass-border: var(--color-border-faint); /* ────────────────────────────────────────────────────────────── * Layer 3 — component recipes * ────────────────────────────────────────────────────────────── */ /* Buttons (frost CTA — Cluster-16 default) */ --btn-bg: var(--bg-accent-mild); --btn-bg-hover: var(--bg-accent-strong); --btn-fg: var(--color-accent); --btn-border: var(--color-border-strong); --btn-border-hover: rgba(112, 243, 125, 0.7); --btn-radius: var(--radius-md); --btn-padding: 14px 26px; --btn-font-weight: var(--weight-semi); --btn-font-size: var(--text-base); --btn-text-transform: capitalize; --btn-shadow: 0 0 14px var(--glow-soft), inset 0 0 12px var(--glow-faint); --btn-shadow-hover: 0 0 20px var(--glow-medium), inset 0 0 14px var(--glow-soft); --btn-blur: var(--glass-blur-soft); --btn-transition: transform var(--duration-med) var(--ease-default), background var(--duration-med) var(--ease-default), border-color var(--duration-med) var(--ease-default), box-shadow var(--duration-med) var(--ease-default); /* Cards (panels, lab tiles — glass-effect from Cluster-14) */ --card-bg: rgba(6, 8, 6, 0.55); --card-border: var(--color-border-faint); --card-radius: var(--radius-lg); --card-padding: var(--space-8) var(--space-7, 28px); --card-blur: var(--glass-blur-soft); /* Nav (sticky top bar — glass) */ --nav-bg: var(--glass-bg); --nav-blur: var(--glass-blur); --nav-border: var(--glass-border); /* Links */ --link-color: var(--color-fg-muted); --link-color-hover: var(--color-accent); --link-glow-hover: var(--glow-mild); /* Status pills */ --pill-padding: 4px 10px; --pill-bg: var(--bg-accent-soft); --pill-border: 1px solid currentColor; --pill-radius: var(--radius-pill); --pill-font: var(--font-mono); --pill-text-size: var(--text-xs); } /* ────────────────────────────────────────────────────────────── * Light theme stub (incomplete — fill out when the operator * commits to a light variant). Activate via: * * * What's intentionally missing: * - Glow recipes don't auto-flip — the green glow on a light bg * needs different alpha + maybe darker green primitive. * - Glass-effect bg needs to flip dark→light. * - Brand accent on light bg may need to shift to --c-green-700 * for sufficient contrast (WCAG AA). * Treat this stub as the skeleton; tuning is a future cluster. * ────────────────────────────────────────────────────────────── */ [data-theme="light"] { --color-fg: var(--c-ink-950); --color-fg-muted: var(--c-ink-700); --color-fg-subtle: var(--c-ink-500); --color-bg: var(--c-ink-50); --color-bg-elevated: #ffffff; /* Accent darkens for contrast against light bg */ --color-accent: var(--c-green-700); --color-accent-bright: var(--c-green-500); --color-accent-fg: var(--c-ink-50); /* TODO: glow / glass / border-faint values for light — these * still resolve to the dark-theme rgba(112,243,125,...) which * will look different on a light bg. */ }