/* ======================================================================
Sekond — design tokens (canonical CSS)
Drop into your stylesheet as the first import. All other files
reference these variables; nothing else hardcodes hex / px.
See BRAND.md for definitions and usage rules.
====================================================================== */
@font-face {
font-family: 'Inter';
src: url('fonts/Inter-Variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
font-weight: 100 800;
font-display: swap;
}
/* Young Serif — wordmark + display headings only. Single weight (400).
Loaded from Google Fonts via a real in
index.html's (NOT @import here) — @import inside a parsed
stylesheet is render-blocking and notoriously slow; with
font-display: swap it leaves the page painted in the Georgia
fallback long enough that you'd notice. Self-host by swapping the
for an @font-face pointing at fonts/YoungSerif-Regular.woff2. */
:root {
/* ── Surfaces ───────────────────────────────────────── */
--bg: #0E0E0E;
--bg-elevated: #161616;
--surface: #1A1A1A;
--bg-input: #0F0F0F;
--border: #262626;
--hairline: #2A2A2A;
/* ── Text ───────────────────────────────────────────── */
--text-primary: #FFFFFF;
--text-secondary: #A0A0A0;
--text-muted: #6B6B6B;
--text-placeholder: #5A5A5A;
/* ── Accent (single chromatic colour) ───────────────── */
--accent: #00C2A8;
--accent-hover: #00D9BC;
--accent-ink: #002B27;
--accent-soft: rgba(0, 194, 168, 0.06); /* tinted backgrounds */
/* ── Status ─────────────────────────────────────────── */
--success: #5BB85C;
--warning: #E8A23B;
--error: #D85A5A;
/* ── Type ───────────────────────────────────────────── */
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Menlo', monospace;
--font-serif: 'Young Serif', Georgia, 'Iowan Old Style', serif; /* wordmark + display only */
/* Type scale */
--fs-display-xl: 110px;
--fs-display-l: 72px;
--fs-display-m: 32px;
--fs-title: 24px;
--fs-body-l: 17px;
--fs-body: 15px;
--fs-body-s: 13px;
--fs-mono-tag: 10px;
--fs-mono-data: 12px;
/* ── Spacing (4px grid) ─────────────────────────────── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
/* ── Radii ──────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 14px;
--radius-xl: 16px;
--radius-2xl: 18px;
--radius-pill: 9999px;
/* ── Borders ────────────────────────────────────────── */
--bd-hairline: 0.5px solid var(--hairline);
--bd-default: 1px solid var(--border);
--bd-accent: 1.5px solid var(--accent);
/* ── Motion ─────────────────────────────────────────── */
--dur-quick: 120ms;
--dur-base: 180ms;
--dur-page: 240ms;
--dur-modal: 280ms;
--ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* ── Elevation ──────────────────────────────────────── */
--shadow-card: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
/* ── Layout ─────────────────────────────────────────── */
--topbar-h-phone: 52px;
--topbar-h-tablet: 60px;
--topbar-h-desktop: 64px;
--max-readable: 680px;
/* ── Breakpoints (use as JS literals; CSS uses media queries) ── */
--bp-tablet: 640px;
--bp-desktop: 1024px;
}
/* ======================================================================
Mono tag — the signature editorial label
====================================================================== */
.tag {
font-family: var(--font-mono);
font-size: var(--fs-mono-tag);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
}
.tag--accent { color: var(--accent); }
.tag--strong { color: var(--text-primary); }
/* ======================================================================
Reset hooks
====================================================================== */
html, body {
background: var(--bg);
color: var(--text-primary);
font-family: var(--font-sans);
font-feature-settings: 'cv11', 'ss01'; /* Inter — single-storey a, alt 6/9 */
}
::selection {
background: var(--accent);
color: var(--accent-ink);
}