/* ============================================================ UNANGREIFBAR — Design Tokens Foundations for color, type, spacing, radii, shadows. Import this file at the root of any Unangreifbar surface. ============================================================ */ /* Webfonts -------------------------------------------------- */ /* Source Serif 4 — warm humanist serif, full weight range Substitution flag: would prefer a custom serif (e.g. GT Sectra, Tiempos) for production. Source Serif 4 is the closest open match on Google Fonts. JetBrains Mono — for labels, tags, captions in mono context. */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---------- COLOR — RAW PALETTE -------------------------- */ /* Burgundy — the fierce. The "I am done with this" color. */ --burgundy-50: #fbf3f1; --burgundy-100: #f3dcd6; --burgundy-200: #e3b3a8; --burgundy-300: #c87f70; --burgundy-400: #a8503e; --burgundy-500: #7a2a1d; /* primary brand — deep burgundy */ --burgundy-600: #5e1f15; --burgundy-700: #43150e; --burgundy-800: #2d0d08; /* Sand — the grounding. Warm paper, lit cream. */ --sand-50: #fbf7f1; /* page background */ --sand-100: #f3ebdc; /* card / surface */ --sand-200: #e7d9bf; --sand-300: #d4be96; --sand-400: #b89a6a; --sand-500: #8f7547; /* warm earth */ /* Ink — black with warmth, never pure #000. */ --ink-900: #181311; /* primary text */ --ink-700: #3a302b; --ink-500: #6b5d56; /* secondary text */ --ink-300: #a89b92; /* tertiary text / disabled */ --ink-200: #cdc1b6; /* hairline / divider */ --ink-100: #e5dcd0; /* soft divider on sand */ /* Sage — the healing accent. Used sparingly. */ --sage-100: #e3e6dc; --sage-300: #a3ad94; --sage-500: #5d6b4f; /* deep sage */ --sage-700: #3a4530; /* Gold — foil accent. Only for emphasis. Never a fill. */ --gold-300: #d9b66a; --gold-500: #a88636; /* the only "sparkle" we allow */ /* Status — semantic, low-saturation, fits the warm palette. */ --success: #5d6b4f; --warning: #a88636; --danger: #7a2a1d; /* ---------- COLOR — SEMANTIC ----------------------------- */ --bg: var(--sand-50); --bg-elevated: #ffffff; --bg-card: var(--sand-100); --bg-inverse: var(--ink-900); --bg-brand: var(--burgundy-500); --fg-1: var(--ink-900); /* primary text */ --fg-2: var(--ink-700); /* body text */ --fg-3: var(--ink-500); /* secondary / muted */ --fg-4: var(--ink-300); /* tertiary */ --fg-on-brand: var(--sand-50); --fg-brand: var(--burgundy-500); --fg-accent: var(--gold-500); --border: var(--ink-200); --border-soft: var(--ink-100); --border-strong: var(--ink-700); /* ---------- TYPE ---------------------------------------- */ --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Charter', 'Georgia', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace; /* Type scale — modular 1.2 (minor third), warm & literary. */ --text-3xs: 11px; --text-2xs: 12px; --text-xs: 13px; --text-sm: 15px; --text-md: 17px; /* body default */ --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 60px; --text-6xl: 76px; --text-display: 96px; /* Line heights — generous; serif prose breathes. */ --lh-tight: 1.08; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed: 1.65; /* Letter spacing */ --tracking-tight: -0.022em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-eyebrow: 0.18em; /* small caps style labels */ /* ---------- SPACING (4px base) -------------------------- */ --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; /* ---------- RADII --------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---------- SHADOWS — warm, soft, never harsh ----------- */ --shadow-xs: 0 1px 2px rgba(43, 24, 18, 0.06); --shadow-sm: 0 2px 6px rgba(43, 24, 18, 0.07), 0 1px 2px rgba(43, 24, 18, 0.05); --shadow-md: 0 8px 20px rgba(43, 24, 18, 0.09), 0 2px 4px rgba(43, 24, 18, 0.05); --shadow-lg: 0 24px 48px rgba(43, 24, 18, 0.14), 0 4px 8px rgba(43, 24, 18, 0.06); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(43, 24, 18, 0.06); /* ---------- MOTION -------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ============================================================ SEMANTIC TYPE STYLES — apply directly to elements ============================================================ */ html, body { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-2); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: 'kern', 'liga', 'onum'; text-rendering: optimizeLegibility; } .display { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } h1, .h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } h2, .h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } h3, .h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg-1); } h4, .h4 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg-1); } p, .p { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; } .lead { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; } .eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); } .caption { font-family: var(--font-serif); font-style: italic; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-3); } .quote { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--fg-1); text-wrap: balance; } code, .code { font-family: var(--font-mono); font-size: 0.92em; background: var(--sand-100); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--ink-700); } /* ============================================================ UTILITY — helpful base resets ============================================================ */ * { box-sizing: border-box; } ::selection { background: var(--burgundy-500); color: var(--sand-50); }