/*
AUFN PUNKT β colors_and_type.css
----------------------------------------------------------------
Semantic layer on top of tokens.css (the SSoT). Link BOTH:
Rule of the house: NO raw hex outside tokens.css. Everything here
aliases the brand tokens into semantic, role-based variables and
ready-made type classes. Neon-on-charcoal. Spirale π. DIY-Plakat.
----------------------------------------------------------------
FONTS β self-hosted β (see FONTS.md):
Space Grotesk + IBM Plex Mono are the brand faces (both OFL). The woff2 are
bundled in fonts/ and load via the @font-face blocks below β no Google-Fonts
@import, no CDN. CSP `style-src/font-src 'self'` clean.
*/
/* === SELF-HOSTED FACES (woff2 bundled in fonts/, CSP-clean) === */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
}
:root {
/* ============================================================
COLOR β SEMANTIC ROLES (alias the tokens, never re-hex)
============================================================ */
/* Surfaces β charcoal is the stage (BΓΌhne) */
--stage: var(--bg); /* #0a0a0a β the floor / page */
--surface: var(--bg-soft); /* #121212 β raised panels */
--surface-high: var(--bg-elev); /* #1a1a1a β cards, popovers, HUD */
/* Foreground text */
--fg1: var(--text); /* #e8e8e8 β primary copy */
--fg2: var(--text-dim); /* #888 β secondary / meta */
--fg3: var(--text-muted); /* #555 β disabled / faint */
--fg-on-neon: #000; /* ink that sits ON a neon fill (token-derived black) */
/* Neon accents β Cyan lead, Magenta counter, Raw-Orange warmth */
--neon-cyan: var(--accent); /* #00ffff β primary action / focus */
--neon-magenta: var(--accent2); /* #ff00aa β counter / live / love */
--neon-orange: var(--accent3); /* #ff7a00 β fire / warmth / energy */
/* Lines */
--line: var(--border); /* #222 β hairlines */
--line-soft: var(--border-soft); /* #333 β controls / inputs */
/* Neon glow shadows (built from the accents, used sparingly + edel) */
--glow-cyan: 0 0 0 1px rgba(0,255,255,.35), 0 0 18px rgba(0,255,255,.25);
--glow-magenta: 0 0 0 1px rgba(255,0,170,.35), 0 0 18px rgba(255,0,170,.25);
--glow-orange: 0 0 0 1px rgba(255,122,0,.35), 0 0 18px rgba(255,122,0,.22);
--glow-soft: 0 0 24px rgba(0,255,255,.12);
/* Neon text-shadow for DIY-poster headers (warpig but legible) */
--neon-ink-cyan: 0 0 12px rgba(0,255,255,.55), 0 0 2px rgba(0,255,255,.9);
--neon-ink-magenta: 0 0 12px rgba(255,0,170,.55), 0 0 2px rgba(255,0,170,.9);
/* ============================================================
TYPE β SEMANTIC ROLES
Display/body = Space Grotesk Β· functional/tech = IBM Plex Mono
============================================================ */
--font-display: var(--font-sans); /* Space Grotesk β headers, poster moments */
--font-body: var(--font-sans); /* Space Grotesk β running copy */
--font-code: var(--font-mono); /* IBM Plex Mono β labels, code, HUD, data */
--fw-light: 300;
--fw-reg: 400;
--fw-med: 500;
--fw-semi: 600;
--fw-bold: 700;
--lh-tight: 1.02; /* hero / display */
--lh-snug: 1.15; /* headers */
--lh-normal: 1.5; /* body */
/* Poster-type tracking */
--track-hero: -0.02em; /* tighten big display */
--track-label: 0.18em; /* mono eyebrows / nav logo */
--track-wide: 0.3em; /* tiny all-caps tags */
}
/* ================================================================
TYPE CLASSES β drop-in roles. Pair with the fluid --fs-* scale.
================================================================ */
.t-hero {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-hero);
line-height: var(--lh-tight);
letter-spacing: var(--track-hero);
text-wrap: balance;
}
.t-display {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-2xl);
line-height: var(--lh-tight);
letter-spacing: var(--track-hero);
text-wrap: balance;
}
.t-h1 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-xl);
line-height: var(--lh-snug);
text-wrap: balance;
}
.t-h2 {
font-family: var(--font-display);
font-weight: var(--fw-semi);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
}
.t-body {
font-family: var(--font-body);
font-weight: var(--fw-reg);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--fg1);
text-wrap: pretty;
}
.t-lead {
font-family: var(--font-body);
font-weight: var(--fw-reg);
font-size: var(--fs-md);
line-height: var(--lh-normal);
color: var(--fg2);
text-wrap: pretty;
}
.t-small {
font-family: var(--font-body);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--fg2);
}
/* Mono / functional roles */
.t-mono {
font-family: var(--font-code);
font-size: var(--fs-sm);
letter-spacing: 0.02em;
}
.t-eyebrow {
font-family: var(--font-code);
font-weight: var(--fw-med);
font-size: var(--fs-xs);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--neon-cyan);
}
.t-tag {
font-family: var(--font-code);
font-weight: var(--fw-med);
font-size: var(--fs-xs);
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--fg2);
}
.t-code {
font-family: var(--font-code);
font-size: var(--fs-sm);
color: var(--fg1);
}
/* DIY-poster neon header β bold, slightly warped, still legible.
Use sparingly on section headers / hero accents. */
.t-poster {
font-family: var(--font-display);
font-weight: var(--fw-bold);
letter-spacing: var(--track-hero);
color: var(--neon-cyan);
text-shadow: var(--neon-ink-cyan);
text-transform: uppercase;
}
.t-poster--magenta { color: var(--neon-magenta); text-shadow: var(--neon-ink-magenta); }
/* Accent helpers */
.fg-cyan { color: var(--neon-cyan); }
.fg-magenta { color: var(--neon-magenta); }
.fg-orange { color: var(--neon-orange); }
.fg-dim { color: var(--fg2); }