/* tokens.css — STRICT MONOCHROME design system for the One Shot Screen site. Ported from the extension's design system: extension/DESIGN.md §11 + extension/src/styles/tokens.css. This is the single source of truth for the whole website — every color/space/radius/motion value lives here and nothing downstream hard-codes a hex. HARD RULE (DESIGN.md §2 / §12): strictly monochrome — black / white / gray ONLY. There is intentionally NO hue anywhere in this file. The aesthetic breaks the instant a color appears; contrast, frosted blur, and generous negative space do all the work color usually does. COMPATIBILITY NOTE: every variable NAME the site already references is preserved here so nothing silently breaks — including the legacy "accent" family that was once colorful. Each of those names is REMAPPED to a monochrome value, so any leftover reference resolves to the white-inversion / gray system instead of a hue. The former "Verdigris green" and "aged bronze" are now white and light gray. */ :root { color-scheme: dark; /* ============================================================ BACKGROUNDS (DESIGN.md §2 — grayscale ramp, near-black canvas) ============================================================ */ --bg-void: #000000; /* deepest black, behind everything */ --bg: #0A0A0B; /* primary page background (== --bg-base) */ --bg-base: #0A0A0B; /* alias for clarity / parity with extension */ --bg-subtle: #060607; /* recessed wells, footer, below-the-fold dips */ --surface-1: #121214; /* solid (non-glass) cards, list rows */ --surface-2: #1C1C1F; /* lifted solid elements, icon tiles */ --surface-3: #232327; /* highest solid layer / hover of surface-2 */ --bg-surface: #121214; /* extension-parity alias of --surface-1 */ --bg-surface-raised: #1C1C1F;/* extension-parity alias of --surface-2 */ --border: #2A2A2E; /* hairline dividers, default borders (== --line) */ --line: #2A2A2E; /* extension-parity alias of --border */ --border-strong: #3A3A40; /* stronger separators, input outlines */ /* ============================================================ TEXT (near-white primary — never pure #FFF for body — plus the gray ramp) ============================================================ */ --text: #F4F4F5; /* headings & primary copy (near-white, softer than #FFF) */ --text-secondary: #A8A8AD; /* labels, subtitles, secondary copy */ --text-muted: #8A8A90; /* captions, microlabels, metadata — lightened from the extension's #6E6E73 so the small but MEANINGFUL lines that use it (hero fine print, price note, redaction diffs, footer) clear WCAG AA 4.5:1 on --bg; still reads clearly "muted". */ /* ============================================================ ACCENT FAMILY — REMAPPED TO MONOCHROME These names used to carry color (verdigris / bronze). They are kept so old references don't break, but every value is now black/white/gray. The "accent" is the single solid-white inversion: white fill + dark text = the ONE most important action per surface (DESIGN.md §7.2). Do not scatter white fills. ============================================================ */ --accent: #FFFFFF; /* primary action: solid white fill */ --accent-hover: #FFFFFF; /* stays white on hover (lift via shadow, not hue) */ --accent-press: #E6E6E6; /* pressed: a hair off-white */ --on-accent: #0A0A0B; /* dark text/icon sitting ON a white fill */ --accent-bronze: #C9C9CE; /* was bronze → now a light gray (secondary emphasis) */ --accent-bronze-soft: #9A9AA0;/* was soft bronze → muted gray */ /* Accent washes / glows — formerly tinted, now neutral white at low opacity. Use for soft halos behind a focused element or faint hover fills. */ --accent-glow: rgba(255, 255, 255, 0.30); --accent-wash: rgba(255, 255, 255, 0.06); --accent-wash-faint: rgba(255, 255, 255, 0.03); --bronze-wash: rgba(255, 255, 255, 0.05); /* Status: kept monochrome on purpose. Surface errors via copy/iconography and emphasis — never red. This is a light gray, not a danger hue. */ --danger: #E5E5E7; /* ============================================================ GLASS (the signature effect — DESIGN.md §4) Frosted translucent panels: white at low opacity, backdrop blur, a 1px light edge, a soft diagonal sheen, and a diffuse black shadow. See the .glass recipe at the bottom of this file. ============================================================ */ --glass-fill-top: rgba(255, 255, 255, 0.14); /* standard panel — top of sheen */ --glass-fill-bottom: rgba(255, 255, 255, 0.06); /* standard panel — bottom of sheen */ --glass-fill-light-top: rgba(255, 255, 255, 0.26); /* lighter/more opaque variant */ --glass-fill-light-bottom: rgba(255, 255, 255, 0.12);/* lighter/more opaque variant */ --glass-edge: rgba(255, 255, 255, 0.22); /* the thin bright hairline border */ --glass-edge-light: rgba(255, 255, 255, 0.30); /* brighter edge for the light variant */ --glass-shadow: rgba(0, 0, 0, 0.45); /* diffuse drop shadow under glass */ --glass-blur: 24px; /* backdrop-filter blur radius */ --glass-blur-light: 30px; /* heavier blur for the light variant */ /* ============================================================ SUBTLE EDGES & FILLS (non-glass translucent controls: ghost buttons, tiles) ============================================================ */ --fill-subtle: rgba(255, 255, 255, 0.05); --fill-subtle-hover: rgba(255, 255, 255, 0.10); --edge-subtle: rgba(255, 255, 255, 0.16); --edge-hover: rgba(255, 255, 255, 0.22); /* ============================================================ RADIUS (large & soft — never dip below ~14px, DESIGN.md §5) Old values (10/16/22) were raised so the floating, friendly feel holds. ============================================================ */ --radius-sm: 14px; /* tiles, small controls (was 10px) */ --radius-md: 22px; /* cards (was 16px) */ --radius-lg: 26px; /* hero cards, large panels (was 22px) */ --radius-pill: 999px; /* pills, toggles, segmented controls */ /* ============================================================ LAYOUT ============================================================ */ --maxw: 1200px; /* page max content width */ --maxw-text: 680px; /* measure for long-form prose */ --section-pad: clamp(96px, 12vh, 160px); /* vertical rhythm between sections */ --container-pad: clamp(20px, 5vw, 40px); /* horizontal page gutter */ /* ============================================================ SHADOW (diffuse, low-opacity — never hard edges, DESIGN.md §6) ============================================================ */ --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.30); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.40); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.50); /* ============================================================ SPACING (4px base unit, DESIGN.md §10) ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; /* ============================================================ TYPE (geometric sans — Poppins, vendored; mono accent for microlabels, filenames, dimensions, keyboard shortcuts. DESIGN.md §3) ============================================================ */ --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --fs-hero: clamp(2.75rem, 6vw, 4.5rem); --fs-h2: clamp(2rem, 4vw, 3rem); --fs-h3: clamp(1.25rem, 2vw, 1.5rem); --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-eyebrow: 0.8125rem; /* ============================================================ MOTION (scroll-driven reveals, demo playback, micro-interactions) Every animation must have a clean static final state for prefers-reduced-motion — these tokens only describe the "on" path. ============================================================ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default ease — gentle settle */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric, for loops/toggles */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot for pop-ins */ --dur-fast: 150ms; /* hovers, focus rings, small state changes */ --dur: 400ms; /* standard transitions, scroll reveals */ --dur-slow: 700ms; /* larger panels, staged sequences */ --dur-demo: 900ms; /* in-page product demo beats */ } /* ============================================================== GLASS RECIPE (DESIGN.md §4) — frosted floating panel. Apply .glass to any panel that overlaps content behind it so the backdrop blur actually reads (backdrop-filter needs something behind to blur). ============================================================== */ .glass { background: linear-gradient( 135deg, var(--glass-fill-top) 0%, var(--glass-fill-bottom) 100% ); backdrop-filter: blur(var(--glass-blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); border: 1px solid var(--glass-edge); border-radius: var(--radius-lg); box-shadow: 0 16px 40px var(--glass-shadow), /* outer depth */ inset 0 1px 1px rgba(255, 255, 255, 0.20); /* top inner highlight */ } /* Lighter, more opaque variant (active toggle bg, hero pills). */ .glass--light { background: linear-gradient( 135deg, var(--glass-fill-light-top) 0%, var(--glass-fill-light-bottom) 100% ); backdrop-filter: blur(var(--glass-blur-light)) saturate(130%); -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(130%); border: 1px solid var(--glass-edge-light); } /* Fallback when backdrop-filter is unsupported: drop the blur, bump fill opacity so the panel stays legible (DESIGN.md §4 implementation notes). */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass--light { background: rgba(40, 40, 44, 0.92); } }