/* Composed Studio โ runtime style layer.
Color, spacing, radius, elevation, and motion all come from css/tokens.css,
which is COMPILED from design/brand.tokens.json by `studio pipeline assemble`.
That JSON is the single source of truth โ do not hand-edit color/size values
here. The --cs-* names below are terse semantic aliases onto the generated
design tokens so components keep a stable API and inherit theme switching. */
:root {
color-scheme: light;
/* accent / action */
--cs-blue: var(--color-action-primary);
--cs-blue-hover: var(--color-action-primaryHover);
--cs-accent: var(--color-text-link); /* theme-aware accent text */
--cs-focus: var(--color-border-focus);
--cs-success: var(--color-status-success-base);
/* fixed ink / paper */
--cs-navy: var(--primitive-color-neutral-1000);
--cs-white: var(--primitive-color-neutral-0);
--cs-slate: var(--primitive-color-neutral-600);
--cs-off-white: var(--primitive-color-neutral-50);
/* surfaces & text (theme-aware via tokens.css) */
--cs-bg: var(--color-surface-page);
--cs-surface: var(--color-surface-sunken);
--cs-surface-elevated: var(--color-surface-raised);
--cs-text: var(--color-text-primary);
--cs-text-muted: var(--color-text-muted);
--cs-border: var(--color-border-default);
--cs-header-bg: color-mix(in srgb, var(--color-surface-page) 82%, transparent);
--cs-footer-bg: var(--primitive-color-neutral-1000);
--cs-footer-text: var(--primitive-color-neutral-50);
/* shape & elevation */
--cs-radius-sm: var(--radius-sm);
--cs-radius-md: var(--radius-md);
--cs-radius-lg: var(--radius-lg);
--cs-shadow-sm: var(--elevation-low);
--cs-shadow-md: var(--elevation-medium);
/* spacing scale */
--cs-space-1: var(--space-1);
--cs-space-2: var(--space-2);
--cs-space-3: var(--space-3);
--cs-space-4: var(--space-4);
--cs-space-5: var(--space-5);
--cs-space-6: var(--space-6);
--cs-space-8: var(--space-8);
--cs-space-10: var(--space-10);
--cs-space-12: var(--space-12);
--cs-space-16: var(--space-16);
--cs-space-24: var(--space-24);
--cs-container: 1200px;
}
[data-theme="dark"] { color-scheme: dark; }
/* Auto dark mode (follows OS when the visitor hasn't toggled): mirror the
semantic overrides tokens.css applies under [data-theme="dark"]. An explicit
[data-theme] on wins over this block. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--color-surface-page: var(--primitive-color-neutral-1000);
--color-surface-raised: var(--primitive-color-neutral-900);
--color-surface-sunken: var(--primitive-color-neutral-1000);
--color-surface-overlay: var(--primitive-color-neutral-1000);
--color-text-primary: var(--primitive-color-neutral-50);
--color-text-secondary: var(--primitive-color-neutral-300);
--color-text-muted: var(--primitive-color-neutral-400);
--color-text-inverse: var(--primitive-color-neutral-1000);
--color-text-link: var(--primitive-color-brand-300);
--color-action-primaryHover: var(--primitive-color-brand-500);
--color-action-secondary: var(--primitive-color-neutral-800);
--color-action-secondaryText: var(--primitive-color-neutral-50);
--color-border-default: var(--primitive-color-neutral-800);
--color-border-strong: var(--primitive-color-neutral-700);
--color-border-focus: var(--primitive-color-brand-400);
}
}
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--cs-bg);
color: var(--cs-text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3 {
font-family: Poppins, Inter, ui-sans-serif, system-ui, sans-serif;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--cs-text);
text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); max-width: 13ch; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); letter-spacing: -0.02em; }
p { color: var(--cs-text-muted); }
.cs-container { width: min(calc(100% - 2rem), var(--cs-container)); margin-inline: auto; }
.cs-section { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.cs-eyebrow {
display: inline-block;
color: var(--cs-accent);
/* Matches the size the home hero's eyebrow ("One platform ยท focused apps") already rendered
at everywhere it appears (section heads, lockup cards, article headers) โ previously that
size only showed up in the hero by accident, via the `.cs-hero p` rule below incidentally
matching the eyebrow's own tag. Making it the deliberate, sitewide rule here instead. */
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0 0 var(--cs-space-4);
}
.cs-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
min-height: 44px; padding: 0.8rem 1.25rem; border-radius: var(--cs-radius-md);
border: 1px solid transparent; font-weight: 600; font-size: 0.9375rem;
text-decoration: none; cursor: pointer;
transition: background-color .18s ease, border-color .18s ease, color .18s ease,
box-shadow .18s ease, transform .18s ease;
}
.cs-btn-primary { background: var(--cs-blue); color: var(--color-action-primaryText); box-shadow: var(--cs-shadow-sm); }
.cs-btn-primary:hover { background: var(--cs-blue-hover); box-shadow: var(--cs-shadow-md); transform: translateY(-1px); }
.cs-btn-secondary { background: transparent; color: var(--cs-text); border-color: var(--cs-border); }
.cs-btn-secondary:hover { border-color: var(--color-border-strong); background: color-mix(in srgb, var(--cs-text) 4%, transparent); }
.cs-card {
background: var(--cs-surface-elevated); border: 1px solid var(--cs-border);
border-radius: var(--cs-radius-lg); padding: 1.75rem;
}
.cs-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cs-site-header {
position: sticky; top: 0; z-index: 50; background: var(--cs-header-bg);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--cs-border);
}
.cs-site-header img { width: 220px; height: auto; }
.cs-hero { min-height: 72vh; display: grid; align-items: center; }
/* Excludes .cs-eyebrow: that
now gets its size from .cs-eyebrow itself (same value), not
from incidentally matching this lede-paragraph rule. */
.cs-hero p:not(.cs-eyebrow) { max-width: 60ch; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.cs-footer { background: var(--cs-footer-bg); color: var(--cs-footer-text); }
.cs-footer p, .cs-footer a { color: color-mix(in srgb, var(--cs-footer-text) 78%, transparent); }
.cs-logo-light { display: block; }
.cs-logo-dark { display: none; }
[data-theme="dark"] .cs-logo-light { display: none; }
[data-theme="dark"] .cs-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cs-logo-light { display: none; }
:root:not([data-theme="light"]) .cs-logo-dark { display: block; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (max-width: 800px) {
.cs-grid-3 { grid-template-columns: 1fr; }
.cs-section { padding-block: 2.75rem; }
.cs-site-header img { width: 184px; }
}