/* ===================================================================== theme.css — shared token layer for the public marketing surface (and, later, the light-touch auth/error pages — T13). Dark is the default; light is applied via [data-theme="light"] on . Tokens mirror the client zone's app.css so marketing ≈ app (DESIGN_SYSTEM §3, §10). NEVER hardcode hex in components — reference these semantic tokens so both themes work. This file owns: brand constants, per-theme semantic tokens, type/space/radius/motion scales, the base reset, the focus ring and the reduced-motion guard. Component/section utilities live in marketing.css. ===================================================================== */ :root { /* ---- Brand constants (theme-independent) ---- */ --brand-green: #00e676; --brand-blue: #14b8ff; --gradient: linear-gradient(135deg, var(--brand-green), var(--brand-blue)); --on-accent: #06140d; /* near-black text on the bright gradient — AA in both themes */ /* ---- Typography ---- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-display: clamp(2.6rem, 6vw, 4.5rem); --fs-h1: clamp(2rem, 4.5vw, 3rem); --fs-h2: clamp(1.6rem, 3vw, 2.25rem); --fs-h3: 1.3rem; --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem); --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .78rem; /* ---- Spacing (4px base) ---- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; --space-16: 8rem; --section-y: clamp(64px, 10vw, 140px); /* ---- Layout ---- */ --container: 1120px; --container-narrow: 760px; --container-wide: 1280px; --gutter: clamp(16px, 5vw, 40px); /* ---- Radius ---- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* ---- Motion ---- */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.2, .8, .2, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 450ms; } /* ---- Dark theme (DEFAULT) ---- */ :root, [data-theme="dark"] { --surface: #0d1117; --surface-2: #161b22; --surface-card: #1b2230; --border: #2a3344; --border-strong: #3a4658; --text: #e6edf3; --text-muted: #8b97a7; --accent: #00e676; --link: #5ccbff; --danger: #ff5c5c; --ring: rgba(0, 230, 118, .55); --shadow-1: 0 10px 30px rgba(0, 0, 0, .35); --shadow-2: 0 20px 50px rgba(0, 0, 0, .45); --glow: radial-gradient(60% 50% at 50% 0%, rgba(0, 230, 118, .18), rgba(20, 184, 255, .10) 40%, transparent 72%); } /* ---- Light theme (toggle) ---- */ [data-theme="light"] { --surface: #ffffff; --surface-2: #f4f6fb; --surface-card: #ffffff; --border: #e2e8f1; --border-strong: #cdd6e4; --text: #0d1117; --text-muted: #56616f; --accent: #0a7d3f; --link: #0b6cb0; --danger: #d83a3f; --ring: rgba(11, 108, 176, .5); --shadow-1: 0 10px 30px rgba(13, 17, 23, .10); --shadow-2: 0 20px 50px rgba(13, 17, 23, .14); --glow: radial-gradient(60% 50% at 50% 0%, rgba(0, 230, 118, .10), rgba(20, 184, 255, .06) 40%, transparent 72%); } /* ===================== Base / reset ===================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0 0 var(--space-4); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; } p { margin: 0 0 var(--space-4); } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { max-width: 100%; height: auto; display: block; } button { font: inherit; color: inherit; cursor: pointer; } /* Visible focus ring on every keyboard-focused interactive element (DESIGN_SYSTEM §9). */ :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius-sm); } /* Skip-to-content link (revealed on focus). */ .skip-link { position: absolute; left: var(--space-4); top: -64px; z-index: 1000; padding: var(--space-2) var(--space-4); background: var(--surface-card); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: top var(--dur) var(--ease-out); } .skip-link:focus { top: var(--space-4); text-decoration: none; } /* Respect reduced-motion everywhere (DESIGN_SYSTEM §7). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }