/* ============================================================
UMWELTEN — COLOR & TYPE TOKENS
A sober, editorial-scientific-tech design system.
Never pure black, never pure white. Amber is rare.
============================================================ */
/* Fonts are loaded via + in each page's for non-blocking early discovery. */
:root {
/* ---------- Base palette (95% of surface) ---------- */
--papier: #F7F5F0; /* main background — off-white, slightly cream */
--encre: #141414; /* primary text, titles — deep ink, NEVER pure black */
--basalte: #3A3A38; /* secondary text */
--pierre: #8A8680; /* metadata, small labels */
--sable: #D8D4CC; /* dividers, borders */
/* ---------- Accents (5% — signature, MUST be rare) ---------- */
--ambre: #B8541A; /* THE signature — citations, hover, the dot */
--pollen: #E8D4B8; /* soft accent background — citation cards only */
/* ---------- Functional ---------- */
--encre-bleue: #2A3F5F; /* text links only, never decorative */
--lichen: #3E5B4A; /* success */
--oxyde: #8B2E2E; /* error */
/* ---------- Semantic aliases ---------- */
--bg: var(--papier);
--bg-elevated: #FFFFFF;
--fg: var(--encre);
--fg-secondary: var(--basalte);
--fg-tertiary: var(--pierre);
--border: var(--sable);
--border-strong:var(--encre);
--accent: var(--ambre);
--accent-soft: var(--pollen);
--link: var(--encre-bleue);
--success: var(--lichen);
--error: var(--oxyde);
/* ---------- Type families ---------- */
--font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
/* ---------- Type scale (desktop) ---------- */
--fs-display: 72px;
--fs-h1: 56px;
--fs-h2: 38px;
--fs-h3: 26px;
--fs-body-lg: 20px;
--fs-body: 17px;
--fs-body-sm: 15px;
--fs-label: 13px;
--fs-micro: 11px;
/* ---------- Spacing (8px scale) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 40px;
--space-7: 56px;
--space-8: 80px;
--space-9: 128px;
--space-10: 160px;
/* ---------- Layout ---------- */
--max-content: 1200px;
--max-text: 680px;
/* ---------- Radius ---------- */
--radius: 2px;
--radius-max: 4px;
/* ---------- Shadows (parsimony) ---------- */
--shadow-card-hover: 0 4px 12px rgba(20, 20, 20, 0.06);
/* ---------- Motion ---------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-hover: 200ms;
--dur-reveal: 400ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "calt";
}
/* ============================================================
SEMANTIC TYPE CLASSES
============================================================ */
.u-display, h1.u-display {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-display);
letter-spacing: -0.04em;
line-height: 1.1;
color: var(--fg);
margin: 0;
}
.u-h1, h1 {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-h1);
letter-spacing: -0.035em;
line-height: 1.15;
color: var(--fg);
margin: 0;
}
.u-h2, h2 {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-h2);
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--fg);
margin: 0;
}
.u-h3, h3 {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-h3);
letter-spacing: -0.015em;
line-height: 1.3;
color: var(--fg);
margin: 0;
}
.u-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-lg); line-height: 1.7; color: var(--fg); }
.u-body, p { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: 1.7; color: var(--fg-secondary); margin: 0; }
.u-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--fg-secondary); }
.u-label {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-label);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-tertiary);
}
.u-label--accent { color: var(--accent); }
.u-micro {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-micro);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-tertiary);
}
.u-serif { font-family: var(--font-serif); font-weight: 400; }
.u-serif-italic { font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.u-tabular { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
a {
color: var(--link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-hover) var(--ease-out);
}
a:hover { color: var(--accent); }
/* Signature dot — append to "Umwelten" text */
.u-dot::after {
content: "";
display: inline-block;
width: 0.22em;
height: 0.22em;
border-radius: 50%;
background: var(--accent);
margin-left: 0.08em;
vertical-align: baseline;
transform: translateY(-0.02em);
}
@media (max-width: 767px) {
:root {
--fs-display: 48px;
--fs-h1: 36px;
--fs-h2: 28px;
--fs-h3: 22px;
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-label: 12px;
--fs-micro: 10px;
--space-9: 80px;
--space-10: 96px;
}
}
.u-container { max-width: var(--max-content); margin-inline: auto; padding-inline: var(--space-6); }
.u-text-column { max-width: var(--max-text); }
.u-divider { height: 1px; background: var(--border); border: 0; margin: 0; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius);
}