/* ============================================================================
onesecdone — Design System (materialized from claude.ai/design)
Single source of truth for color, type, spacing, radius, shadow, motion.
Imported verbatim from the locked brand design system — DO NOT invent new
brand decisions; consume these tokens.
============================================================================ */
/* ---- Webfonts: loaded via + in index.html
(faster LCP than @import). Standalone use of this file should add that link. ---- */
:root {
/* ====================== COLOR ====================== */
/* Brand — disciplined monochrome + ONE electric "signal" lime pop */
--signal: #C6F24E; /* electric lime — the one pop color */
--signal-bright: #D4FF4F; /* hover / glow */
--signal-deep: #9BC22E; /* lime on light for text/icons that need contrast */
--signal-ink: #1B2206; /* darkest lime-tinted ink, for text ON signal fills */
/* Ink / neutral ramp (cool-neutral, near-black to off-white) */
--ink-900: #0B0C0E; /* page ink / darkest surface */
--ink-800: #15171A;
--ink-700: #22262B;
--ink-600: #34393F;
--ink-500: #545B63;
--ink-400: #7A828B;
--ink-300: #A7AEB6;
--ink-200: #CDD2D7;
--ink-150: #DFE3E7;
--ink-100: #ECEEF0;
--ink-50: #F4F5F3; /* warm off-white surface */
--paper: #FAFAF7; /* warm paper background */
--white: #FFFFFF;
/* Semantic (tuned, not default web colors) */
--success: #2FA96A; --success-soft: #E3F5EC;
--warning: #E6A323; --warning-soft: #FBF0D6;
--danger: #E2483D; --danger-soft: #FBE5E3;
--info: #3A7BD5; --info-soft: #E4EDFA;
/* Semantic aliases (use these in components) */
--bg-page: var(--paper);
--bg-surface: var(--white);
--bg-sunken: var(--ink-50);
--bg-inverse: var(--ink-900);
--bg-accent: var(--signal);
--text-primary: var(--ink-900);
--text-secondary: var(--ink-500);
--text-muted: var(--ink-400);
--text-inverse: var(--paper);
--text-on-accent: var(--signal-ink);
--text-link: var(--ink-900);
--border-subtle: var(--ink-100);
--border-default: var(--ink-150);
--border-strong: var(--ink-300);
--border-inverse: var(--ink-700);
--focus-ring: color-mix(in oklch, var(--signal) 70%, var(--ink-900));
/* ====================== TYPOGRAPHY ====================== */
--font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
/* Type scale (1.25 major-third-ish, tuned) */
--text-2xs: 11px;
--text-xs: 12px;
--text-sm: 14px;
--text-base:16px;
--text-md: 18px;
--text-lg: 21px;
--text-xl: 26px;
--text-2xl: 33px;
--text-3xl: 42px;
--text-4xl: 54px;
--text-5xl: 70px;
--text-6xl: 92px;
--lh-tight: 1.02;
--lh-snug: 1.12;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
--ls-tight: -0.03em;
--ls-snug: -0.015em;
--ls-normal: 0;
--ls-wide: 0.02em;
--ls-mono-label: 0.08em;
--eyebrow-font: var(--font-mono);
--eyebrow-size: var(--text-xs);
--eyebrow-spacing: var(--ls-mono-label);
--display-font: var(--font-display);
--heading-font: var(--font-display);
--body-font: var(--font-body);
/* ====================== SPACING (4px grid) ====================== */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
--container-max: 1200px;
--container-wide: 1360px;
--gutter: var(--space-6);
--section-y: var(--space-32);
/* ====================== RADIUS ====================== */
--radius-none: 0;
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-pill: 999px;
--radius-button: var(--radius-sm);
--radius-input: var(--radius-sm);
--radius-card: var(--radius-lg);
--radius-tag: var(--radius-xs);
/* ====================== SHADOW / ELEVATION ====================== */
--shadow-xs: 0 1px 2px rgba(11, 12, 14, 0.06);
--shadow-sm: 0 1px 3px rgba(11, 12, 14, 0.08), 0 1px 2px rgba(11, 12, 14, 0.05);
--shadow-md: 0 4px 12px rgba(11, 12, 14, 0.08), 0 2px 4px rgba(11, 12, 14, 0.05);
--shadow-lg: 0 12px 28px rgba(11, 12, 14, 0.12), 0 4px 10px rgba(11, 12, 14, 0.06);
--shadow-xl: 0 24px 56px rgba(11, 12, 14, 0.16), 0 8px 18px rgba(11, 12, 14, 0.08);
--ring-subtle: inset 0 0 0 1px var(--border-subtle);
--ring-default: inset 0 0 0 1px var(--border-default);
/* signal glow — for the primary CTA hover / focused accents ONLY (never a permanent halo) */
--glow-signal: 0 0 0 4px color-mix(in srgb, var(--signal) 35%, transparent);
/* ====================== MOTION (quick, decisive, NO bounce) ====================== */
--dur-instant: 80ms;
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 360ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--transition-button: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
--transition-base: all var(--dur-base) var(--ease-out);
}
/* ====================== BASE / RESET ====================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--lh-normal);
color: var(--text-primary);
background: var(--bg-page);
font-weight: var(--fw-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
letter-spacing: var(--ls-snug);
color: var(--text-primary);
margin: 0;
text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
/* The brand eyebrow / kicker — mono, uppercase, tracked-out */
.osd-eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-mono-label);
text-transform: uppercase;
color: var(--text-secondary);
}
::selection { background: var(--signal); color: var(--signal-ink); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}