/* =========================================================================== tokens.css - Design-Tokens Mahadevi Yoga Konzept A "Natural Editorial" Kundenspezifische Theme-Schicht. Diese Datei ist die einzige Quelle fuer Farben, Typografie, Abstaende und Bewegung. Komponenten definieren keine eigenen Rohwerte, sondern verwenden ausschliesslich diese Variablen. MK Core kann dieses Theme spaeter uebernehmen, indem es dieselben Variablen liest. Es findet keine Template-Vererbung statt. Keine externen URLs. Keine @import-Anweisungen. Keine Frameworks. Alle Kontrastwerte in den Kommentaren sind mit der WCAG-2.x-Formel berechnet und werden von tests/test_design_tokens.py aus dieser Datei heraus nachgerechnet. =========================================================================== */ :root { /* ------------------------------------------------------------------------- 1. ROHFARBEN Die Palette aus Konzept A. Diese neun Werte sind gesetzt und werden nicht veraendert. Sie werden nie direkt verwendet, sondern nur ueber die semantischen Tokens in Abschnitt 2. ---------------------------------------------------------------------- */ --farbe-papier: #f2ece2; /* Grundhintergrund, warmes Papierweiss */ --farbe-papier-warm: #f7f2ea; /* hellste Stufe, Text auf Magenta */ --farbe-sand: #eae1d3; /* abgesetzte Sektionen, Zeilen-Hover */ --farbe-tinte: #241f1b; /* Schrift und dunkle Flaechen */ --farbe-magenta: #b01a66; /* Markenakzent */ --farbe-salbei: #a9d8c4; /* Hervorhebungsflaeche */ --farbe-salbei-dunkel: #1b2e26; /* Schrift auf Salbei */ --farbe-salbei-hell: #eaf6f0; /* Schrift auf Salbei dunkel */ /* Schriftzug «Mahadevi» im Logo. EIN Ton kann nicht auf beiden Gruenden stehen - hell genug fuer die Tinte hiesse zu blass auf dem Papier. Daher ein Paar im selben Farbton (174°, Saettigung 67%), je Grund eine Stufe: 4.71:1 auf Papier, 11.37:1 auf Tinte. Die Werte stecken in den SVG-Dateien unter logo/; hier stehen sie, damit sie nicht auseinander- laufen (geprueft in tests/test_logo.py). */ --farbe-logo-schriftzug-auf-hell: #17756b; --farbe-logo-schriftzug-auf-dunkel: #88e8dd; --farbe-heute: #dfede5; /* Markierung der aktuellen Tagesspalte */ /* Abgeleitete Toene. Ersetzen die zu schwachen Opazitaeten des Prototyps. Begruendung und Messwerte in docs/DESIGN_SYSTEM.md. */ --farbe-tinte-gedaempft: #66615b; /* >= 4.73:1 auf allen hellen Gruenden */ --farbe-tinte-linie: #7d766e; /* >= 3.46:1, Rahmen von Bedienelementen */ --farbe-tinte-hauch: #d1cbc2; /* rein dekorative Trennlinien */ --farbe-papier-gedaempft: #beb9b0; /* 8.36:1 auf Tinte */ --farbe-magenta-tief: #94104f; /* dunklere Variante fuer Salbeigrund */ /* Zustandsfarben. Im Prototyp nicht vorhanden, hier im Palettencharakter ergaenzt und auf allen hellen Gruenden auf >= 4.5:1 geprueft. */ --farbe-erfolg: #186043; /* >= 5.80:1 */ --farbe-warnung: #7a5200; /* >= 5.34:1 */ --farbe-fehler: #9b2226; /* >= 6.12:1 */ /* ------------------------------------------------------------------------- 2. SEMANTISCHE FARBEN Ab hier wird nur noch nach Bedeutung gearbeitet, nicht nach Farbton. ---------------------------------------------------------------------- */ /* Hintergruende */ --grund-seite: var(--farbe-papier); --grund-abgesetzt: var(--farbe-sand); --grund-invers: var(--farbe-tinte); --grund-hervorhebung: var(--farbe-salbei); --grund-hervorhebung-tief: var(--farbe-salbei-dunkel); --grund-heute: var(--farbe-heute); --grund-akzent: var(--farbe-magenta); /* Textfarben. Es gibt bewusst nur EINE gedaempfte Textfarbe. Eine noch hellere Stufe wuerde 4.5:1 unterschreiten und wird deshalb nicht angeboten. */ --text-haupt: var(--farbe-tinte); /* >= 12.60:1 */ --text-gedaempft: var(--farbe-tinte-gedaempft); /* >= 4.73:1 */ --text-auf-invers: var(--farbe-papier); /* 13.89:1 */ --text-auf-invers-gedaempft: var(--farbe-papier-gedaempft); /* 8.36:1 */ --text-auf-hervorhebung: var(--farbe-salbei-dunkel); /* 9.08:1 */ --text-auf-hervorhebung-tief: var(--farbe-salbei-hell); /* 12.92:1 */ --text-auf-akzent: var(--farbe-papier-warm); /* 5.92:1 */ /* Akzente */ --akzent-primaer: var(--farbe-magenta); /* >= 5.09:1 auf hell */ --akzent-primaer-tief: var(--farbe-magenta-tief); /* fuer Salbeigrund */ --akzent-sekundaer: var(--farbe-salbei); /* Linien und Rahmen. Zwei getrennte Tokens, weil dekorative Linien keinen Mindestkontrast brauchen, Rahmen von Bedienelementen aber 3:1 erreichen muessen. */ --linie-dezent: var(--farbe-tinte-hauch); /* nur Dekoration */ --linie-bedienelement: var(--farbe-tinte-linie); /* >= 3.46:1 */ --linie-stark: var(--farbe-tinte); /* Zustaende */ --zustand-erfolg: var(--farbe-erfolg); --zustand-warnung: var(--farbe-warnung); --zustand-fehler: var(--farbe-fehler); /* Fokus. Zwei Farben, damit der Fokus auf hellem wie dunklem Grund sicher erkennbar ist. Der Ring ist zusaetzlich eine Formaenderung, nicht nur eine Farbaenderung. */ --fokus-farbe: var(--farbe-tinte); /* >= 10.34:1 auf hell */ --fokus-farbe-invers: var(--farbe-salbei-hell); /* >= 12.92:1 auf dunkel */ /* Textauswahl */ --auswahl-grund: var(--farbe-salbei); --auswahl-text: var(--farbe-salbei-dunkel); /* ------------------------------------------------------------------------- 3. TYPOGRAFIE Newsreader und Archivo werden erst in Phase P2 lokal eingebunden. Bis dahin greifen die Fallbacks. Es sind bewusst KEINE externen Schrift-URLs eingetragen. ---------------------------------------------------------------------- */ --schrift-serif: "Newsreader", Georgia, "Times New Roman", "Nimbus Roman", serif; --schrift-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; --schrift-grund: var(--schrift-sans); --schrift-titel: var(--schrift-serif); /* Schriftstaerken */ --staerke-extraleicht: 200; --staerke-leicht: 300; --staerke-normal: 400; --staerke-mittel: 500; --staerke-halbfett: 600; /* Schriftgroessen. Titelgroessen skalieren mit clamp() wie im Prototyp. Die kleinen Groessen wurden angehoben: der Prototyp ging bis 9.5 px hinunter, hier liegt die Untergrenze bei 12 px. */ --groesse-titel-1: clamp(2.875rem, 6.6vw, 7rem); /* 46 -> 112 px */ --groesse-titel-2: clamp(2.125rem, 4.4vw, 4rem); /* 34 -> 64 px */ --groesse-titel-3: clamp(1.875rem, 3.6vw, 3.375rem); /* 30 -> 54 px */ --groesse-titel-4: clamp(1.5625rem, 2.6vw, 2.375rem); /* 25 -> 38 px */ --groesse-gross: clamp(1.25rem, 1.6vw, 1.5rem); /* 20 -> 24 px */ /* Fuer Text, der in einer der fuenf Wochenspalten steht. Diese Spalten sind ab 768 px nur gut 116 px breit und wachsen mit dem Fenster; die Groesse muss deshalb steiler mitgehen als --groesse-gross. Ergaenzt in P10. Gemessen: "Yoga in der Schwangerschaft" ragte bei 768 und 800 px rund 20 px in die Nachbarspalte. Der laengste Kursname passt mit dieser Groesse in jeder Breite in seine Spalte, ohne dass hart umgebrochen werden muss - geprueft bei 768, 820, 900, 1024, 1200, 1440 und 1920 px. Die Untergrenze von 16 px ist nachgerechnet, nicht geschaetzt: bei 768 px hat die Spalte 116 px Platz, und "Schwangerschaft" braucht in Newsreader etwa das 6,94-fache der Schriftgroesse. Daraus ergibt sich 16,7 px als Obergrenze; 16 px lassen etwas Luft. */ --groesse-spaltentext: clamp(1rem, 2.05vw, 1.5rem); /* 16 -> 24 px */ --groesse-fliesstext: clamp(1rem, 0.98rem + 0.12vw, 1.0625rem); /* 16 -> 17 px */ --groesse-klein: 0.875rem; /* 14 px */ --groesse-fein: 0.8125rem; /* 13 px */ --groesse-label: 0.75rem; /* 12 px, Untergrenze fuer Versalien-Labels */ /* Zeilenhoehen */ --zeilenhoehe-schlagzeile: 1; --zeilenhoehe-titel: 1.15; --zeilenhoehe-kompakt: 1.35; --zeilenhoehe-fliesstext: 1.65; --zeilenhoehe-weit: 1.75; /* Buchstabenabstaende */ --laufweite-schlagzeile: -0.022em; --laufweite-titel: -0.015em; --laufweite-normal: 0; --laufweite-label: 0.14em; --laufweite-label-weit: 0.2em; /* ------------------------------------------------------------------------- 4. ABSTAENDE Grundraster 4 px. Der Wert 2.75rem entspricht dem Seitenrand von 44 px aus dem Prototyp. ---------------------------------------------------------------------- */ --abstand-3xs: 0.25rem; /* 4 px */ --abstand-2xs: 0.5rem; /* 8 px */ --abstand-xs: 0.75rem; /* 12 px */ --abstand-s: 1rem; /* 16 px */ --abstand-m: 1.375rem; /* 22 px */ --abstand-l: 2rem; /* 32 px */ --abstand-xl: 2.75rem; /* 44 px, Seitenrand Desktop */ --abstand-2xl: 4rem; /* 64 px */ --abstand-3xl: 5.5rem; /* 88 px */ /* Zusammengesetzte Abstaende */ /* Der Seitenrand ist Layout, kein Text - seine Untergrenze steht deshalb in Pixeln und nicht in rem. Bei der Standardschriftgroesse aendert das nichts: 1.25rem sind genau die 20 px, die jetzt dort stehen. Erst wenn ein Besucher seine Browser-Schriftgroesse hochsetzt, macht es einen Unterschied - dann blieben aus 1.25rem bei 200 Prozent ganze 40 px je Seite, und auf einem 320 px schmalen Gerät waeren 80 der 320 px allein Rand. Gemessen und begruendet in P10 (docs/QUALITY_REPORT.md). Der Platz gehoert dort dem vergroesserten Text. */ --seitenrand: clamp(20px, 4vw, 2.75rem); /* 20 -> 44 px */ --sektionsabstand: clamp(3.5rem, 9vw, 8.125rem); /* 56 -> 130 px */ --sektionsabstand-klein: clamp(3rem, 7vw, 6.875rem); /* 48 -> 110 px */ /* ------------------------------------------------------------------------- 5. MASSE ---------------------------------------------------------------------- */ --breite-inhalt-max: 93.75rem; /* 1500 px, wie im Prototyp */ --breite-lesetext: 62ch; --breite-schlagzeile: 26ch; /* Mindestgroesse von Bedienelementen. 44 px ist die Untergrenze nach WCAG 2.2 (Target Size, Minimum). 52 px ist die Sollhoehe der Schaltflaechen aus dem Prototyp. */ --touchziel-min: 2.75rem; /* 44 px */ --bedienelement-min-hoehe: 3.25rem; /* 52 px */ /* Rahmenstaerken */ --rahmen-duenn: 1px; --rahmen-stark: 2px; --fokus-ring-breite: 3px; --fokus-ring-abstand: 2px; /* ------------------------------------------------------------------------- 6. FORM Natural Editorial arbeitet mit Linien und Flaechen, nicht mit Rundungen und Schatten. Die Tokens sind bewusst auf null gesetzt und dokumentiert, damit niemand spaeter beilaeufig etwas anderes einfuehrt. ---------------------------------------------------------------------- */ --radius-keiner: 0; --radius-kreis: 50%; /* einzige Ausnahme: rundes Verbandszeichen */ --schatten-keiner: none; /* ------------------------------------------------------------------------- 7. BEWEGUNG Diese Werte werden bei prefers-reduced-motion am Ende der Datei auf nahezu null gesetzt. Komponenten, die ausschliesslich diese Tokens verwenden, sind damit automatisch ruhig gestellt. ---------------------------------------------------------------------- */ --dauer-sofort: 120ms; --dauer-kurz: 240ms; --dauer-mittel: 400ms; --dauer-lang: 700ms; --kurve-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --kurve-ein: cubic-bezier(0, 0, 0.2, 1); --kurve-aus: cubic-bezier(0.4, 0, 1, 1); /* ------------------------------------------------------------------------- 8. EBENEN ---------------------------------------------------------------------- */ --ebene-grund: 0; --ebene-erhoben: 10; --ebene-klebend: 100; --ebene-overlay: 500; --ebene-menue: 900; --ebene-skiplink: 1000; } /* --------------------------------------------------------------------------- Reduzierte Bewegung. Wer im Betriebssystem weniger Bewegung wuenscht, bekommt sie hier zentral abgeschaltet. Das wirkt auf jede Komponente, die die Dauer-Tokens nutzt. basis.css ergaenzt eine zusaetzliche globale Sicherung. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dauer-sofort: 0.01ms; --dauer-kurz: 0.01ms; --dauer-mittel: 0.01ms; --dauer-lang: 0.01ms; } }