/* ================================================================== ZAYTOOLIT THEME — design tokens only (no selectors that style elements) Two layers: 1. PRIMITIVES — raw palette, radii, spacing, motion, type. Never used directly by components. 2. SEMANTIC (--ztl-*) — what components use. Each mode maps the semantic names onto primitives. Token structure adapted from freebounce.studio css/constellation.css (void → carbon surface ramp, text tiers, radii, 4px spacing grid, motion durations). Its chrome/material tokens are deliberately not carried over. Mode selection - no data-theme attribute → follows the system (dark by default, light under prefers-color-scheme: light) - :root[data-theme="dark"|"light"] → the visitor's saved choice. The inline script in each page's sets it before first paint. ================================================================== */ /* ------------------------------------------------------------------ 1. PRIMITIVES ------------------------------------------------------------------ */ :root { /* near-black ramp */ --ztl-black-0: #050607; --ztl-black-1: #090b0e; --ztl-black-2: #0e1115; --ztl-black-3: #14181d; --ztl-black-4: #1a1f25; --ztl-black-5: #505862; /* light ramp */ --ztl-white-0: #ffffff; --ztl-white-1: #f6f7f9; --ztl-white-2: #f0f2f5; --ztl-white-3: #e9ecf0; --ztl-white-4: #c9ced5; /* ink */ --ztl-ink-on-dark-1: #f1f3f5; --ztl-ink-on-dark-2: #a7afb8; --ztl-ink-on-dark-3: #858e99; --ztl-ink-on-light-1: #0b0d10; --ztl-ink-on-light-2: #4a525c; --ztl-ink-on-light-3: #636b75; /* cosmic blue */ --ztl-cosmic-200: #b8e8ff; --ztl-cosmic-300: #8edcff; /* the brand accent, on dark */ --ztl-cosmic-700: #0874a8; /* deepened for AA on white */ --ztl-cosmic-800: #065f8a; /* status */ --ztl-red-300: #ffb3ad; --ztl-red-700: #b42318; /* radii */ --ztl-radius-sm: 6px; --ztl-radius-md: 8px; --ztl-radius-lg: 12px; --ztl-radius-full: 999px; /* spacing — 4px grid */ --ztl-space-1: 4px; --ztl-space-2: 8px; --ztl-space-3: 12px; --ztl-space-4: 16px; --ztl-space-5: 20px; --ztl-space-6: 24px; --ztl-space-8: 32px; --ztl-space-10: 40px; --ztl-space-12: 48px; --ztl-space-16: 64px; /* motion — colour/border changes only */ --ztl-dur-fast: 100ms; --ztl-dur-normal: 160ms; /* type */ --ztl-font-display: 'Space Grotesk', 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ztl-font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ztl-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --ztl-fs-xs: 13px; --ztl-fs-sm: 14px; --ztl-fs-md: 16px; --ztl-fs-lg: 20px; --ztl-fs-xl: 24px; --ztl-fs-2xl: 30px; --ztl-fs-3xl: 40px; /* layout */ --ztl-container: 1200px; --ztl-gutter: clamp(16px, 4vw, 40px); --ztl-header-h: 56px; } /* ------------------------------------------------------------------ 2. SEMANTIC — dark (the default, and the saved "dark" choice) ------------------------------------------------------------------ */ :root, :root[data-theme="dark"] { color-scheme: dark; --ztl-bg: var(--ztl-black-0); --ztl-surface: var(--ztl-black-2); --ztl-surface-2: var(--ztl-black-3); --ztl-surface-hover: var(--ztl-black-4); --ztl-header-bg: rgba(5, 6, 7, .94); --ztl-border: rgba(255, 255, 255, .08); --ztl-border-strong: rgba(255, 255, 255, .16); --ztl-tint: rgba(255, 255, 255, .04); /* row hover */ --ztl-tint-strong: rgba(255, 255, 255, .07); /* active row, pressed segment */ --ztl-text: var(--ztl-ink-on-dark-1); --ztl-text-2: var(--ztl-ink-on-dark-2); --ztl-text-3: var(--ztl-ink-on-dark-3); --ztl-accent: var(--ztl-cosmic-300); --ztl-accent-hover: var(--ztl-cosmic-200); --ztl-accent-contrast: var(--ztl-black-0); --ztl-accent-soft: rgba(142, 220, 255, .10); --ztl-accent-border: rgba(142, 220, 255, .45); --ztl-danger: var(--ztl-red-300); --ztl-focus: var(--ztl-cosmic-300); --ztl-overlay: rgba(0, 0, 0, .6); --ztl-shadow: 0 16px 40px rgba(0, 0, 0, .45); --ztl-wave: var(--ztl-black-5); /* unplayed waveform bars */ } /* ------------------------------------------------------------------ 2. SEMANTIC — light (system preference, when nothing is saved) ------------------------------------------------------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --ztl-bg: var(--ztl-white-1); --ztl-surface: var(--ztl-white-0); --ztl-surface-2: var(--ztl-white-2); --ztl-surface-hover: var(--ztl-white-3); --ztl-header-bg: rgba(246, 247, 249, .94); --ztl-border: rgba(10, 14, 20, .10); --ztl-border-strong: rgba(10, 14, 20, .18); --ztl-tint: rgba(10, 14, 20, .04); --ztl-tint-strong: rgba(10, 14, 20, .07); --ztl-text: var(--ztl-ink-on-light-1); --ztl-text-2: var(--ztl-ink-on-light-2); --ztl-text-3: var(--ztl-ink-on-light-3); --ztl-accent: var(--ztl-cosmic-700); --ztl-accent-hover: var(--ztl-cosmic-800); --ztl-accent-contrast: var(--ztl-white-0); --ztl-accent-soft: rgba(8, 116, 168, .08); --ztl-accent-border: rgba(8, 116, 168, .45); --ztl-danger: var(--ztl-red-700); --ztl-focus: var(--ztl-cosmic-700); --ztl-overlay: rgba(10, 14, 20, .35); --ztl-shadow: 0 16px 40px rgba(10, 14, 20, .14); --ztl-wave: var(--ztl-white-4); } } /* ------------------------------------------------------------------ 2. SEMANTIC — light (the saved "light" choice) Same values as the block above; kept separate because a media query can't be combined with an attribute selector list. ------------------------------------------------------------------ */ :root[data-theme="light"] { color-scheme: light; --ztl-bg: var(--ztl-white-1); --ztl-surface: var(--ztl-white-0); --ztl-surface-2: var(--ztl-white-2); --ztl-surface-hover: var(--ztl-white-3); --ztl-header-bg: rgba(246, 247, 249, .94); --ztl-border: rgba(10, 14, 20, .10); --ztl-border-strong: rgba(10, 14, 20, .18); --ztl-tint: rgba(10, 14, 20, .04); --ztl-tint-strong: rgba(10, 14, 20, .07); --ztl-text: var(--ztl-ink-on-light-1); --ztl-text-2: var(--ztl-ink-on-light-2); --ztl-text-3: var(--ztl-ink-on-light-3); --ztl-accent: var(--ztl-cosmic-700); --ztl-accent-hover: var(--ztl-cosmic-800); --ztl-accent-contrast: var(--ztl-white-0); --ztl-accent-soft: rgba(8, 116, 168, .08); --ztl-accent-border: rgba(8, 116, 168, .45); --ztl-danger: var(--ztl-red-700); --ztl-focus: var(--ztl-cosmic-700); --ztl-overlay: rgba(10, 14, 20, .35); --ztl-shadow: 0 16px 40px rgba(10, 14, 20, .14); --ztl-wave: var(--ztl-white-4); }