/* * Design tokens — Direction B · Industrial Precision * Light and dark themes via the native CSS light-dark() function. * * Default = dark. Explicit theme set on . * If no explicit theme, prefers-color-scheme picks via color-scheme. * * Product mockup colors (watch, BuiltWithGea cards) are locally hardcoded * — they read as real screens / hardware sitting on the page in both modes. * Code surfaces theme alongside the page (Stripe/Vercel pattern): light * grey panels with darker syntax in light mode, dark with light syntax in * dark mode. */ :root { color-scheme: dark; } :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; } } :root { /* Surface ladder */ --bg-base: light-dark(#f5f5f7, #08080a); --bg-page: light-dark(#ffffff, #0b0b0d); --bg-1: light-dark(#fcfcfd, #0c0c0f); --bg-2: light-dark(#fafafb, #0f0f12); --surface-1: light-dark(#fafafb, #111114); --surface-2: light-dark(#f1f1f4, #161619); --surface-3: light-dark(#e0e0e5, #1e1e22); /* Code surface — themes alongside the page */ --surface-4: light-dark(#ececef, #2a2a32); /* Text ladder — inverted in light mode */ --text-base: light-dark(#1a1a1f, #f5f5f7); --text-strong: light-dark(#08080a, #e8e8ee); --text-secondary: light-dark(#2a2a32, #d6d6de); --text-muted: light-dark(#4a4a52, #b4b4bd); --text-tertiary: light-dark(#6a6a74, #8a8a94); --text-disabled: light-dark(#9a9aa2, #7a7a84); --text-faint: light-dark(#a0a0a8, #7a7a84); /* Borders */ --border-hairline: light-dark(#e6e6ea, #1e1e22); --border-divider: light-dark(#d0d0d6, #2a2a32); --border-strong: light-dark(#a8a8b0, #3a3a44); /* Accents — darken in light mode for AA contrast on white */ --accent-primary: light-dark(#5260e0, #6e7bf2); --accent-primary-2: light-dark(#3e4bc8, #8c97ff); --accent-primary-3: light-dark(#2f3aa6, #aab2ff); /* Filled-button hover — darker than --accent-primary in BOTH themes so a white label stays readable (--accent-primary-2 LIGHTENS in dark). */ --accent-primary-hover: light-dark(#3e4bc8, #5a67e0); --accent-primary-10: light-dark(rgba(82, 96, 224, 0.10), rgba(110, 123, 242, 0.10)); --accent-primary-16: light-dark(rgba(82, 96, 224, 0.16), rgba(110, 123, 242, 0.16)); --accent-gold: light-dark(#a87a0f, #e0a93d); --accent-green: light-dark(#1f8a5c, #3dd68c); /* Signature mint — used for "available / live" status and small accents */ --accent-mint: light-dark(#0a9d7a, #2fe3b6); /* Brand accents tuned to the device photography — teal-cyan + magenta on blue-black. Indigo stays the AA-safe primary for text/CTAs; cyan/magenta drive gradients and the glows behind hardware imagery. */ --accent-cyan: light-dark(#0a93b8, #2de2ff); --accent-magenta: light-dark(#b21fa0, #e94bff); --brand-gradient: linear-gradient(118deg, #2de2ff 0%, #6e7bf2 52%, #e94bff 100%); /* Seamless (palindrome) horizontal variant for the scroll-driven flowing borders */ --brand-gradient-flow: linear-gradient(90deg, #2de2ff, #6e7bf2, #e94bff, #6e7bf2, #2de2ff); --glow-cyan: rgba(45, 226, 255, 0.22); --glow-magenta: rgba(233, 75, 255, 0.20); /* Soft frame behind device photos so they sit on the page, not float */ --photo-shadow: light-dark( 0 24px 70px rgba(20, 20, 40, 0.20), 0 30px 80px rgba(0, 0, 0, 0.55) ); /* Nav backdrop (frosted) */ --nav-bg: light-dark(rgba(255, 255, 255, 0.82), rgba(11, 11, 13, 0.85)); /* Text selection — strong, OS-style */ --selection-bg: light-dark(#5260e0, #6e7bf2); --selection-fg: #ffffff; /* Callout band tint — themed */ --callout-tint: light-dark(rgba(82, 96, 224, 0.07), rgba(110, 123, 242, 0.10)); --callout-tint-2: light-dark(rgba(82, 96, 224, 0.10), rgba(110, 123, 242, 0.06)); /* Watch face drop-shadow — softer in light mode */ --watchface-shadow: light-dark( 0 24px 60px rgba(20, 20, 30, 0.18), 0 24px 60px rgba(0, 0, 0, 0.6) ); /* Code syntax — themed so contrast holds on either surface */ --code-kw: light-dark(#3e4bc8, #6e7bf2); --code-type: light-dark(#0a685e, #6bd3c4); --code-str: light-dark(#5a6f24, #c9e29a); --code-num: light-dark(#8a5a09, #e0a93d); --code-text: light-dark(#1a1a1f, #f5f5f7); --code-mute: light-dark(#5a5a64, #6a6a74); /* Focus */ --focus-ring: 0 0 0 2px var(--accent-primary-2); /* Type scale */ --fs-h1: clamp(44px, 7vw, 88px); --fs-display: clamp(38px, 5.4vw, 72px); --fs-h2: clamp(28px, 4vw, 40px); --fs-h3: 21px; --fs-body: 16px; --fs-meta: 13px; --fs-eyebrow: 12px; /* Standardized small/mid ladder — single source of truth for body & UI text. Editorial/marketing text snaps to these; device-mockup internals (watch faces, code panel, canvas) keep their bespoke cqw / pixel sizing. */ --fs-2xs: 11px; /* fine print, tiny mono labels */ --fs-xs: 12px; /* = eyebrow */ --fs-sm: 13px; /* = meta, small UI */ --fs-base-sm: 14px; /* dense body, captions, button labels */ --fs-md: 15px; /* secondary body */ /* 16px = --fs-body (primary body, above) */ --fs-lg: 17px; /* lede / intro paragraphs */ --fs-xl: 18px; /* small section headings */ --fs-2xl: 20px; /* 21px = --fs-h3 (card titles, above) */ --fs-3xl: 24px; /* Canonical button geometry — every CTA on the page resolves to one of these */ --btn-pad-y: 11px; --btn-pad-x: 18px; --btn-pad-y-sm: 8px; --btn-pad-x-sm: 14px; /* Section spacing scale (vertical rhythm) */ --space-section-sm: 64px; --space-section-md: 96px; --space-section-lg: 140px; /* Typography */ /* Line-height scale — one source of truth */ --lh-tight: 1.05; /* display headings */ --lh-base: 1.6; /* body / paragraphs */ --lh-mono: 1.7; /* code / mono blocks */ --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Spacing scale */ --s-0: 1px; --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 20px; --s-5: 28px; --s-6: 40px; --s-7: 56px; /* Geometry */ --radius: 0; --container: 1200px; /* Motion */ --t-fast: 100ms linear; --t-base: 200ms ease; --t-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1); } /* Mobile — tighter vertical rhythm so sections aren't separated by huge gaps. Most bands pad with these tokens, so this trims them all in one place; bands with hardcoded padding get their own ≤720px override. */ @media (max-width: 720px) { :root { --space-section-sm: 40px; --space-section-md: 52px; --space-section-lg: 64px; } }