/* ════════════════════════════════════════════════════════════════════════════ tokens.css · truebias.de DIE Quelle für Schriften und Farben. Wird von JEDER Seite geladen, auch von den Einzelseiten (Methodik, Datenschutz, Impressum, Haftungsausschluss, Claim) – die trugen bis August 2026 eigene :root-Blöcke und waren dadurch still auseinandergelaufen: --border2 stand dort noch auf dem orange getönten Wert, den die App längst durch eine neutrale Haarlinie ersetzt hatte, und --muted auf einem helleren Ton. Beides hatte niemand entschieden. Regel: Farben und Schriftgrößen kommen aus dieser Datei. Kommt eine neue Farbe dazu, kommt sie HIER dazu – test/design-system.test.js prüft das. ════════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sora-400.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sora-600.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sora-700.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/sora-800.woff2') format('woff2');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrainsmono-400.woff2') format('woff2');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrainsmono-500.woff2') format('woff2');} :root{ --orange:#F7931A; --orange-dim:#c97615; --orange-glow:rgba(247,147,26,0.22); --orange-bg:rgba(247,147,26,0.08); --orange-border:rgba(247,147,26,0.25); --green:#34D399; --red:#ef4444; --bg:#04060C; --bg2:#080C18; --bg3:#0d1220; /* ── Linien ────────────────────────────────────────────────────── --border2 ist der Standard-Rahmen der Seite (98 Verwendungen) und war orange getönt (rgba(247,147,26,.15)). Dadurch waren allein auf der Startseite 29 Rahmen orange – nicht als Entscheidung, sondern weil das Token neutral heißt. vision.md sagt „Orange nur Marke/CTA"; wenn jeder Kartenrand orange ist, hebt sich kein Aufruf mehr ab. Jetzt eine warm-neutrale Haarlinie: nimmt den Orangestich raus, bleibt aber wärmer als reines Weiß und passt damit zum Observatory-Ton. Für Orange als Signal gibt es --orange-border. */ --border:rgba(255,255,255,0.06); --border2:rgba(233,224,208,0.11); /* Neutrale Füllflächen für Karten, Chips und Container. Vorher stand an diesen Stellen rgba(247,147,26,0.04) – einzeln unsichtbar, in Summe der Grund, warum die Seite überall leicht orange schimmerte. */ --surface:rgba(233,224,208,0.035); --surface-2:rgba(233,224,208,0.07); /* ═══ ORANGE-REGEL (vision.md: „Orange nur Marke/CTA") ═══ Drei Sätze, an denen sich jede neue Komponente prüfen lässt: 1. Orange FLÄCHE (deckend) – nur primärer Aufruf und aktiver Zustand (aktiver Tab, aktives Segment). Sonst nie. 2. Oranger TEXT / oranges ICON – interaktive Elemente und der Marken-Marker „//". Das ist der günstigste Orange-Einsatz: er trägt Bedeutung, ohne Fläche zu belegen. 3. Oranger RAHMEN – nur zusammen mit oranger Fläche, also an CTA und Aktivzustand. Ruhende Container: --border2. Sentiment bleibt davon unberührt (grün/rot/neutral), ebenso die Warnfarbe für „beobachtet". */ --text:#e8e0d0; --muted:#857a62; /* schwacher Text – WCAG AA 4.8:1 (vorher 1.7:1, unlesbar) */ --muted2:#9a8f78; /* sekundärer Text – WCAG AA 6.3:1 (vorher 2.6:1) */ /* ═══ FARB-KONTRAKT (Bedeutung je Farbe – bitte einhalten) ═══ Orange = Marke + primäre Aktion (CTA). NICHT für Daten/Status. Sentiment (Markt): bull/bear/neutral – NUR für Bias/Kursrichtung. Status (Feedback): error/success/info/warn – NUR für System-Rückmeldung. */ /* === SENTIMENT (Markt) === */ --bull:#34d399; /* bullisch / positiv */ --bull-soft:#86efac; /* leicht bullisch */ --bear:#ef4444; /* bärisch / negativ */ --bear-soft:#fca5a5; /* leicht bärisch */ /* Gedämpfte Zwillinge für den Alterungsbalken: „gut" und „schlecht" müssen von „sehr gut" und „sehr schlecht" unterscheidbar sein, ohne dass der Balken zur Ampel wird. Dunkler statt heller als die Vollfarbe – neben den -soft-Tönen (die für TEXT gedacht sind) wären sie sonst nicht zu trennen. */ --bull-dim:#1f7a55; --bear-dim:#8f2f33; --neutral:#9ca3af; /* neutral / grau */ --sent-neutral:#c4cbd6;/* neutraler Post (heller) */ /* === STATUS (Feedback – getrennt vom Sentiment) === */ --error:#ef4444; /* Fehler */ --success:#34d399; /* Erfolg */ --info:#60a5fa; /* Info / KI-Vorschlag */ --warn:#EAB308; /* Warnung / unklar / kein klares Bias */ /* TruEdge: Richtung in den Hausfarben (Claudia, 2026-09-03 – das Mockup hatte Sand/Stahlblau vorgeschlagen, entschieden ist Grün/Grau/Rot). Die te-Tokens bleiben als Alias, damit TruEdge unabhängig umfärbbar ist. */ --te-bull:var(--bull); --te-bear:var(--bear); --te-neut:var(--neutral); --te-price:#7a6a4f; --grey:#828a98; /* offen / inaktiv – WCAG AA 5.8:1 (vorher 4.2:1) */ --text-strong:#f0e8d8; /* kräftiger Text */ --gold:#c8a87a; /* Akzent-Text (Kurse, Werte) */ /* === BEKRÄFTIGUNG (↻) === DIE feste Farbe für alles rund um bekräftigte Thesen: das „↻ bekräftigt"-Badge, den „N× bekräftigt"-Zähler am Master, die Verbindungs-Kurve im Zeitstrahl und den Thread-Rand. Blau: im Besucher-Frontend eindeutig (Gold = Kurse, Orange = Marke, Grün/Rot/Gelb = Alterung); dass die KI-Hinweise im Admin dasselbe Blau tragen, ist entschieden – dort trennt das Symbol (↻ vs. ✨). */ --rep:#60a5fa; --rep-border:rgba(96,165,250,0.4); --rep-bg:rgba(96,165,250,0.10); /* === TYPOGRAFIE-SKALA === Lesbarkeits-Boden angehoben (kein 8px mehr); Display-Größen unverändert, damit große Zahlen/Layout stabil bleiben. */ --fs-2xs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 40px; /* === RADIUS-SKALA === */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 16px; --r-2xl: 20px; /* === SPACING-SKALA (4-basiert; auch Sektions-Ebene tokenisiert) === */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; /* Sektions-Abstand (Inhaltsseiten) */ --sp-8: 24px; /* Karten-Innenabstand */ --sp-9: 32px; /* großer Block-Abstand */ --sp-10: 48px; /* Seiten-Fußraum */ /* Aufgehellte Lager-Töne. Nur für Fließtext auf dunklem Grund gedacht, wo --bull/--bear zu satt wären (Methodik). */ --bullsoft:#86efac; --bearsoft:#fca5a5; /* Schrift auf oranger Fläche. Stand an drei Stellen als #04060C und einmal als #1a1205 – dieselbe Aufgabe, vier Meinungen. Der Grundton der Seite ist der richtige: Er ist dunkel genug für den Kontrast und gehört zur Palette. */ --on-orange:#04060C; /* Warme Graustufen, die als Literal im Stylesheet standen. Als Token benannt, damit sie beim nächsten Mal auffindbar sind statt geraten. */ --warm-1:#f0e8d8; /* hellster Fließtext (= --text-strong) */ --warm-2:#d8d0c0; /* Fließtext in Karten und auf den Einzelseiten */ --warm-3:#c8a87a; /* gedämpftes Gold, Sekundär-Beschriftung */ --warm-4:#8a7a60; /* Achsen- und Randbeschriftung */ }