/* ================================================================= OpenedMic™ — Design System Tokens ----------------------------------------------------------------- Canonical design tokens for the full transformation program. Frozen by docs/canonical/OPENEDMIC_DIRECTION_FREEZE_2026-04-19.md Version: 1.0.0 (Packet 1 / Phase 1) Loaded on every public page via . ----------------------------------------------------------------- */ :root { /* ── SURFACE LAYER — dark page / card / modal backgrounds ──── */ --om-surface-0: #050508; /* absolute base (rare) */ --om-surface-1: #0a0a10; /* page background */ --om-surface-2: #11111a; /* card / modal */ --om-surface-3: #1a1a26; /* elevated card */ --om-surface-4: #232332; /* popover / menu */ /* ── TEXT LAYER — against dark surfaces ──────────────────── */ --om-text-primary: #f0f0f5; /* body + headings */ --om-text-secondary: #b5b5cc; /* subdued body */ --om-text-tertiary: #7a7a94; /* meta / timestamps */ --om-text-disabled: #4a4a5c; /* disabled states */ --om-text-inverse: #0a0a10; /* text on bright fills */ /* ── BRAND + SIGNAL LAYER — earn their visibility ────────── */ --om-brand-red: #ff3d3d; /* headline accent, live-dot, brand glow */ --om-brand-red-cta: #c41616; /* CTA background — WCAG AA 4.87:1 on white */ --om-signal-live: #ff3d3d; /* same as brand — "on air" */ --om-signal-ok: #00d97e; /* analytics OK, success */ --om-signal-warn: #ffb020; /* rate-limit warn, caution */ --om-signal-error: #ff5c5c; /* error states */ --om-signal-info: #40c8ff; /* neutral info */ /* ── BORDER + RULE LAYER ─────────────────────────────────── */ --om-border-subtle: #1e1e2a; --om-border-default: #2a2a3a; --om-border-strong: #3e3e52; /* ── TYPOGRAPHY — families ───────────────────────────────── */ --om-font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; --om-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* ── TYPOGRAPHY — fluid scale (clamp min / pref / max) ───── */ --om-type-display: clamp(2.5rem, 4vw, 3.5rem); /* hero, one per page */ --om-type-h1: clamp(1.8rem, 3vw, 2.4rem); /* page title */ --om-type-h2: clamp(1.4rem, 2.2vw, 1.75rem); /* section title */ --om-type-h3: 1.15rem; /* subsection */ --om-type-body-lg: 1.125rem; /* editorial body */ --om-type-body: 1rem; /* default */ --om-type-sub: 0.9rem; /* subdued body */ --om-type-caption: 0.8rem; /* meta */ --om-type-micro: 0.7rem; /* legal, micro */ --om-type-mono-code: 1.1rem; /* room codes */ --om-type-mono-data: 0.9rem; /* tables, timestamps */ /* ── TYPOGRAPHY — weights ────────────────────────────────── */ --om-weight-regular: 400; --om-weight-medium: 500; --om-weight-semibold: 600; --om-weight-bold: 700; /* ── TYPOGRAPHY — line-heights (Latin defaults) ─────────── */ --om-leading-display: 1.15; --om-leading-heading: 1.2; --om-leading-body: 1.55; --om-leading-dense: 1.35; /* ── TYPOGRAPHY — letter-spacing ────────────────────────── */ --om-tracking-display: -0.01em; --om-tracking-tight: -0.005em; --om-tracking-normal: 0; --om-tracking-wide: 0.04em; --om-tracking-caps: 0.09em; /* ── SPACING — 4px baseline grid ─────────────────────────── */ --om-space-1: 4px; --om-space-2: 8px; --om-space-3: 12px; --om-space-4: 16px; --om-space-5: 20px; --om-space-6: 24px; --om-space-8: 32px; --om-space-10: 40px; --om-space-12: 48px; --om-space-16: 64px; --om-space-20: 80px; --om-space-24: 96px; /* ── RADIUS ──────────────────────────────────────────────── */ --om-radius-sm: 4px; /* inputs, chips */ --om-radius-md: 8px; /* buttons, cards */ --om-radius-lg: 12px; /* modals, large cards */ --om-radius-pill: 999px; /* badges, status pills */ /* ── SHADOW (subtle; no neon glow) ───────────────────────── */ --om-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04); --om-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4); --om-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.5); --om-shadow-brand-subtle: 0 0 0 1px rgba(255, 61, 61, 0.3); /* ── MOTION ──────────────────────────────────────────────── */ --om-duration-micro: 120ms; --om-duration-short: 200ms; --om-duration-medium: 320ms; --om-ease-standard: cubic-bezier(0.2, 0, 0, 1); --om-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2); /* ── Z-INDEX ─────────────────────────────────────────────── */ --om-z-base: 0; --om-z-raised: 10; --om-z-sticky: 100; --om-z-overlay: 1000; --om-z-modal: 2000; --om-z-toast: 3000; --om-z-tooltip: 4000; /* ── BREAKPOINTS (reference, used via media queries) ────── */ --om-bp-mobile-max: 480px; --om-bp-tablet-min: 481px; --om-bp-tablet-max: 1023px; --om-bp-desktop-min: 1024px; --om-bp-wide-min: 1440px; } /* ── Per-language leading overrides ───────────────────────── Hebrew + Arabic need looser body leading than Latin for equal visual density. ─────────────────────────────────── */ html[lang='he'], html[lang='ar'], html[dir='rtl'] { --om-leading-body: 1.75; --om-leading-heading: 1.3; } /* ── Light-mode preference (accessibility hygiene) ────────── Respected when the user sets OS-level light preference. Not a marketed feature. ───────────────────────────────── */ @media (prefers-color-scheme: light) { :root.om-respect-color-scheme { --om-surface-0: #fafafc; --om-surface-1: #ffffff; --om-surface-2: #f5f5f8; --om-surface-3: #eaeaf0; --om-surface-4: #dadae0; --om-text-primary: #0a0a10; --om-text-secondary: #3a3a50; --om-text-tertiary: #6a6a80; --om-text-disabled: #9a9ab0; --om-text-inverse: #ffffff; --om-border-subtle: #e4e4ea; --om-border-default: #d4d4dc; --om-border-strong: #b4b4c0; --om-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.04); --om-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08); --om-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.14); } } /* ================================================================= BACKWARD-COMPATIBILITY ALIASES ----------------------------------------------------------------- The existing public pages reference --red, --red-cta, --text, --dim, --bg, --card, --border as inline CSS variables. The tokens above are the new authoritative layer. These aliases let old inline styles continue to work without being rewritten simultaneously. Later packets will progressively migrate inline styles off these aliases; no regression while transition happens. ----------------------------------------------------------------- */ :root { --red: var(--om-brand-red); --red-cta: var(--om-brand-red-cta); --text: var(--om-text-primary); --dim: var(--om-text-tertiary); --dim2: var(--om-text-secondary); --bg: var(--om-surface-1); --bg2: var(--om-surface-2); --card: var(--om-surface-2); --border: var(--om-border-subtle); --border2: var(--om-border-default); --white: #ffffff; --radius: var(--om-radius-lg); --transition: var(--om-duration-short) var(--om-ease-standard); }