/* Tokens — values only. No selector besides :root is allowed in this file. If you're about to write a class or element selector here, the rule you're about to write belongs somewhere else. */ :root { /* --------------------------------------------------------------- Spacing — one 4px base unit, named by role rather than by number so a future edit doesn't require memorizing which index means what. Only steps actually in use are defined — add a step when a real component needs one, not ahead of that need. --------------------------------------------------------------- */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-lg: 1.5rem; /* 24px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* --------------------------------------------------------------- Layout — the one content-column width used everywhere a column of text/links needs to stay readable against full-bleed media. --------------------------------------------------------------- */ --content-max-width: 36rem; /* ~576px */ /* --------------------------------------------------------------- Color — deliberately restrained. Personality comes from the per-release accent, injected inline on , not from these. --------------------------------------------------------------- */ --neutral-000: #f7f6f3; /* warm off-white — primary text */ --neutral-000-rgb: 247, 246, 243; /* same value, components, for rgba() use */ --neutral-500: #9a9691; /* muted warm gray — secondary/footer text */ --neutral-900: #0a0c0f; /* near-black, faint cool undertone — scrim + bg */ --neutral-900-rgb: 10, 12, 15; /* same value, components, for use in rgba() — kept as a plain rgba triplet rather than the newer rgb(from ...) syntax so the scrim still renders correctly on older browsers. */ /* Set on per release via inline style; this is only a safety-net default so nothing breaks if a page ever fails to set one. */ --accent: var(--neutral-000); /* --------------------------------------------------------------- Typography scale. Manrope (self-hosted, see fonts.css) is a placeholder chosen so the full scale, rhythm, and hierarchy could be built now rather than waiting on a final brand typeface — the scale, line-heights, and tracking are locked in so nothing here has to change again once one is chosen. --------------------------------------------------------------- */ --font-family-base: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* placeholder pending final brand typeface — swapping this value is the only change needed later */ --text-display: clamp(2rem, 1.1rem + 4vw, 4.5rem); /* release title */ --text-body: 1rem; /* streaming link labels */ --text-small: 0.8125rem; /* footer / meta line */ --leading-display: 1.05; --leading-body: 1.5; --leading-small: 1.4; --tracking-display: -0.02em; --tracking-meta: 0.02em; /* --------------------------------------------------------------- Radius — one value, used everywhere a radius is needed at all. --------------------------------------------------------------- */ --radius: 10px; /* --------------------------------------------------------------- Durations & easing. See ARCHITECTURE.md for why: motion exists to acknowledge interaction or ease a one-time reveal, never to decorate. Two durations, not three — nothing in this codebase ended up needing a middle "standard" speed between the two. --------------------------------------------------------------- */ --duration-fast: 150ms; /* hover / focus / press feedback */ --duration-slow: 600ms; /* one-time page entrance / media crossfade only */ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); /* --------------------------------------------------------------- Z-index — a fixed, page-level stacking order. Every release uses this same order; nothing outside this list should need its own z-index. --------------------------------------------------------------- */ --z-media: 0; --z-content: 10; --z-skip-link: 100; /* --------------------------------------------------------------- Shadows — intentionally absent. The background media already does the depth work; drop shadows on UI chrome read as dated clutter against it. Where depth is needed (the streaming-link buttons), it comes from blur/translucency, defined locally in components.css, not from a shadow token added here for its own sake. --------------------------------------------------------------- */ }