/* ============================================================================ * BiblioCertus — Design Tokens * Version 1.0 · Mai 2026 * * Drei Paletten: editorial (Standard), cloister, atelier. * Wechsel per data-palette-Attribut auf oder : * * → Garnet-Akzent (Standard) * → Forest-Akzent * → Ocker-Akzent * * Logo-Blau (#14304F) bleibt in allen Varianten Primärfarbe. * ============================================================================ */ :root, :root[data-palette="editorial"] { /* ── Marke ──────────────────────────────────────────────────────────────── */ --bc-paper: #f6f2ea; /* warmes Off-White, Hauptbackground */ --bc-paper-alt: #ede7d9; /* Marginalia / Sidebar / Raised Surfaces */ --bc-raised: #fbf8f1; --bc-surface: #ffffff; /* Cards, Inputs */ --bc-ink: #14304f; /* Primary · Logo-Navy */ --bc-atlas: #2c4f8c; /* Secondary · Logo-Blau */ --bc-accent: #7a2e2e; /* Garnet · Spine-Akzent */ --bc-accent-soft: #a85a52; /* ── Text & Linien ──────────────────────────────────────────────────────── */ --bc-text: #1c2125; --bc-text-mute: #5a5f66; --bc-text-faint: #8a8f97; --bc-line: rgba(28, 33, 37, 0.14); --bc-line-soft: rgba(28, 33, 37, 0.08); /* ── Status (semantisch) ────────────────────────────────────────────────── */ --bc-verified: #2f6f4f; /* Forest */ --bc-caveat: #a4761a; /* Brass */ --bc-unverified: #a23232; /* Garnet-Red */ --bc-pending: #6b7280; /* Slate */ --bc-verified-bg: #e6efe9; --bc-caveat-bg: #f6ecd6; --bc-unverified-bg:#f3e2e0; --bc-pending-bg: #eceef1; } :root[data-palette="cloister"] { --bc-paper: #efeae0; --bc-paper-alt: #e4dccd; --bc-raised: #f7f3e9; --bc-surface: #ffffff; --bc-ink: #14304f; --bc-atlas: #2c4f8c; --bc-accent: #2c5f45; /* Forest */ --bc-accent-soft: #608c75; --bc-text: #1c2125; --bc-text-mute: #54585f; --bc-text-faint: #888d94; --bc-line: rgba(28, 33, 37, 0.16); --bc-line-soft: rgba(28, 33, 37, 0.08); --bc-verified: #2c5f45; --bc-caveat: #a4761a; --bc-unverified: #8d3030; --bc-pending: #6b7280; --bc-verified-bg: #e3ece6; --bc-caveat-bg: #f4ead4; --bc-unverified-bg:#f0e0de; --bc-pending-bg: #eceef1; } :root[data-palette="atelier"] { --bc-paper: #f2eee5; --bc-paper-alt: #e8e0cc; --bc-raised: #fbf6ea; --bc-surface: #ffffff; --bc-ink: #14304f; --bc-atlas: #2c4f8c; --bc-accent: #a07028; /* Ochre */ --bc-accent-soft: #c69b5b; --bc-text: #1c2125; --bc-text-mute: #5a5f66; --bc-text-faint: #8a8f97; --bc-line: rgba(28, 33, 37, 0.14); --bc-line-soft: rgba(28, 33, 37, 0.07); --bc-verified: #2f6f4f; --bc-caveat: #a07028; --bc-unverified: #a23232; --bc-pending: #6b7280; --bc-verified-bg: #e6efe9; --bc-caveat-bg: #f5ebd1; --bc-unverified-bg:#f3e2e0; --bc-pending-bg: #eceef1; } /* ── Typografie ─────────────────────────────────────────────────────────── */ :root { --bc-font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --bc-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --bc-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type Scale (px) */ --bc-text-xs: 11px; /* Labels, Eyebrows */ --bc-text-sm: 12.5px; /* Caption, Meta */ --bc-text-base: 15px; /* UI Body */ --bc-text-md: 17px; /* Lead, Card titles */ --bc-text-lg: 21px; /* Sub-headlines */ --bc-text-xl: 28px; /* H3 */ --bc-text-2xl: 36px; /* H2 · Page heads */ --bc-text-3xl: 56px; /* H1 · Section heros */ --bc-text-4xl: 84px; /* Hero display */ /* Line heights */ --bc-leading-tight: 1.05; --bc-leading-snug: 1.2; --bc-leading-normal: 1.5; --bc-leading-relaxed:1.6; /* Letter spacing */ --bc-tracking-tight: -0.022em; /* Display */ --bc-tracking-snug: -0.018em; /* H1—H3 */ --bc-tracking-normal: 0; --bc-tracking-wide: 0.06em; /* Mono meta */ --bc-tracking-eyebrow: 0.16em; /* Versal-Labels */ } /* ── Räumliches ─────────────────────────────────────────────────────────── */ :root { --bc-radius-xs: 2px; --bc-radius-sm: 3px; --bc-radius: 4px; /* default */ --bc-radius-md: 6px; --bc-radius-lg: 8px; /* Spacing scale (px) */ --bc-space-1: 4px; --bc-space-2: 8px; --bc-space-3: 12px; --bc-space-4: 16px; --bc-space-5: 20px; --bc-space-6: 24px; --bc-space-8: 32px; --bc-space-10: 40px; --bc-space-12: 48px; --bc-space-16: 64px; /* Shadows (zurückhaltend, akademisch) */ --bc-shadow-1: 0 1px 0 var(--bc-line-soft); --bc-shadow-2: 0 1px 0 var(--bc-line-soft), 0 8px 24px -16px rgba(20, 48, 79, 0.18); --bc-shadow-3: 0 20px 40px -24px rgba(20, 48, 79, 0.28); /* Container widths */ --bc-container-text: 720px; /* Lesetexte */ --bc-container: 1200px; --bc-container-wide: 1440px; /* Motion */ --bc-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --bc-duration: 180ms; } /* ── Base · für Body/HTML ───────────────────────────────────────────────── */ html { background: var(--bc-paper); } body { margin: 0; background: var(--bc-paper); color: var(--bc-text); font-family: var(--bc-font-sans); font-size: var(--bc-text-base); line-height: var(--bc-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Typografische Defaults */ .bc-display { font-family: var(--bc-font-serif); letter-spacing: var(--bc-tracking-snug); font-weight: 400; } .bc-display em, .bc-display i { font-style: italic; } .bc-serif { font-family: var(--bc-font-serif); } .bc-sans { font-family: var(--bc-font-sans); } .bc-mono { font-family: var(--bc-font-mono); } .bc-eyebrow { font-family: var(--bc-font-sans); font-size: var(--bc-text-xs); font-weight: 500; letter-spacing: var(--bc-tracking-eyebrow); text-transform: uppercase; color: var(--bc-text-mute); } ::selection { background: var(--bc-ink); color: var(--bc-paper); }