/* tokens-papier.css — Variante „Papier" (WEB-003) * * Die Farbwelt aus Designrichtung B, unveraendert uebernommen. Warmes, * ungebleichtes Papier, Tinte, Rotstift als Korrektur- und Aktionsfarbe. * Das ist die Standardvariante: sie haengt als normales im * und traegt die Seite, wenn JavaScript ausfaellt. * * Kontrast im Kopf abgeschaetzt: Tinte auf Papier sehr hoch, Bleistift * (text-muted) auf Papier deutlich ueber 4.5:1, Rotstift auf Papier * kraeftig. Keine grenzwertige Paarung. */ :root { /* ---- Farben — 6 Werte ------------------------------------------------- */ --bg: #f2ede3; /* Papier, warm, ungebleicht */ --bg-elevated: #e3dacb; /* Bogenfeld: Tafeln, Baender, Kontaktblock */ --text: #1c1a17; /* Tinte */ --text-muted: #635b4e; /* Bleistift: Randspalte, Beschriftung, Datum */ --accent: #a22f16; /* Rotstift. Korrektur- und Passermarke, eine Aktion */ --border: #bfb39d; /* Haarlinie, Rasterkante */ /* ---- Typografie — wie in B: Monospace-Display, Grotesk-Body ----------- */ --font-display: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---- Type-Scale — feste Stufen, nichts dazwischen --------------------- */ --step--2: clamp(0.69rem, 0.67rem + 0.1vw, 0.75rem); --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem); --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --step-2: clamp(1.56rem, 1.35rem + 1vw, 2.25rem); --step-3: clamp(1.95rem, 1.6rem + 1.8vw, 3.4rem); /* ---- Laufweite und Zeilenhoehe ---------------------------------------- */ --track-label: 0.14em; --track-tight: -0.015em; --lh-tight: 1.1; --lh-body: 1.6; /* ---- Spacing — 4px-Basis ---------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem; /* ---- Layout ------------------------------------------------------------ */ --measure: 68ch; --container: 1140px; --margin-col: 9rem; --radius: 0; /* ---- Linien ------------------------------------------------------------ */ --rule: 1px; --rule-strong: 2px; /* ---- Reservierte Flaechen ---------------------------------------------- */ --ratio-scene: 16 / 9; --ratio-plate: 3 / 2; /* ---- Motion ------------------------------------------------------------ */ --dur: 180ms; --ease: ease-out; }