/* ============================================================ OpenWA — Shared Design Tokens Single source of truth for CSS custom properties. Imported by both styles.css (index.html) and 404.html. ============================================================ */ :root { /* Brand */ --green: #25d366; --green-deep: #006d2f; /* Neutrals (warm-ish, Material 3 light) */ --bg: #ffffff; --surface: #ffffff; --surface-dim: #f3f3f4; --surface-container: #eeeeee; --surface-container-high: #e8e8e8; /* Text */ --text: #1a1c1c; --text-variant: #444748; --text-faint: #6a6e6e; /* Lines */ --line: #c4c7c7; --line-soft: #e2e2e2; --line-strong: #aeb4b4; --line-green: rgba(37, 211, 102, 0.28); /* Radii */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* Fonts */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Type scale — MASSIVE editorial */ --t-hero: clamp(3.5rem, 9vw, 7rem); --t-section: clamp(2.25rem, 5vw, 3rem); --t-card-title: 0.9375rem; --t-lead: 1.25rem; --t-body: 1rem; --t-label: 0.875rem; --t-sm: 0.8125rem; --t-eyebrow: 0.75rem; /* Layout */ --maxw: 1280px; --gutter: 32px; --section-y: clamp(80px, 12vw, 160px); --section-y-sm: clamp(64px, 8vw, 100px); /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --d1: 0.2s; --d2: 0.4s; --code-bg: #0f172a; --code-text: #e2e8f0; } /* Dark theme override (toggle via data-theme="dark" on ) */ [data-theme="dark"] { --bg: #0a0f1d; --surface: #121a2e; --surface-dim: #1a2540; --surface-container: #1a2540; --surface-container-high: #243152; --text: #eef2f8; --text-variant: #98a4ba; --text-faint: #5a6781; --line: rgba(255, 255, 255, 0.1); --line-soft: rgba(255, 255, 255, 0.06); --line-strong: rgba(255, 255, 255, 0.18); --line-green: rgba(79, 240, 127, 0.3); --code-bg: #070b16; --code-text: #c4d0e0; --green-deep: #4ff07f; }