/* ============================================================ TATJANA KULCSAR — Design Tokens (Prefix: --ds-) ------------------------------------------------------------ Fassung 2 (17.08.2026) — überarbeitet nach Jans Vorgaben: lebendiger und bunter, helle UND dunkle Grüntöne, schimmerndes Gold, schwerere Schrift, dazu das originale Mandala-Logo. Vorbild ist Jans PDF „Женский Круг" (Aquarell-Papier, Mohn in Altrosa, Salbei- und Waldgrün, Handschrift in Violett und Gold). Farbherkunft — alles gemessen, nichts geschätzt: - Papier, Grüntöne, Rosa, Gold direkt aus den PDF-Seiten ausgelesen (Pillow, HSV-gefiltert). - Violett und Signet-Gold aus der Original-Logodatei. Alle Textwerte gegen WCAG 2.1 geprüft; Werte stehen als Kommentar an der Zeile. Stil-Richtung: weiterhin editoriales Raster als Gerüst, aber deutlich farbiger bespielt. Rundung bleibt sparsam. ============================================================ */ :root{ /* ---- Grundflächen (Aquarellpapier, leicht grünstichig) ---- */ --ds-paper:#FAFAF4; /* Canvas */ --ds-paper-2:#F1F2E6; /* zweite Fläche — Karten, Abschnitte */ --ds-paper-3:#E4E8D2; /* dritte Fläche — Bänder, Hero */ /* ---- Text ------------------------------------------------ */ --ds-ink:#26241A; /* Haupttext, warmes Oliv-Schwarz 14.85 AAA */ --ds-ink-2:#5C5A46; /* gedämpfter Text 6.67 AA */ /* ---- Echtes Schwarz -------------------------------------- */ /* Für „Logo auf dunkel" und alles, was wirklich schwarz sein soll. Bewusst KEIN Grün: Jan am 20.08.2026 — „ich möchte es wirklich on dark haben also auf schwarz und nicht grün". */ --ds-black:#0F0F0E; /* ---- Marke: Violett -------------------------------------- */ --ds-primary:#7A1F9C; /* UI, Links, Buttons 8.01 AAA */ --ds-primary-600:#5E1478; /* hover/aktiv 10.85 AAA */ --ds-primary-soft:#F0E2F7; /* zarte Violettfläche */ --ds-signet:#B030D8; /* exakt aus dem Logo — Flächen/Signet */ /* ---- Marke: Gold (jetzt auch textfähig) ------------------ */ --ds-gold:#7D6410; /* Gold für Text + Linien 5.41 AA */ --ds-gold-mid:#C9A227; /* mittleres Gold — Rahmen, Zierlinien */ --ds-gold-light:#F0C678; /* helles Gold aus dem PDF */ --ds-gold-signet:#F0D070; /* exakt aus dem Logo — Ornament */ /* Schimmerndes Gold: Verlauf mit hellen Spitzen. Für Linien, Rahmen und (per background-clip) für Zierschrift. */ --ds-gold-shimmer:linear-gradient(100deg, #8A6D14 0%, #C9A227 18%, #F7E6B4 34%, #D9AE55 48%, #F0D68F 62%, #C9A227 78%, #8A6D14 100%); /* ---- Marke: Grün (hell bis tief) ------------------------- */ --ds-green:#3C5038; /* Waldgrün, textfähig 8.36 AAA */ --ds-green-mid:#5A6B2E; /* Oliv/Wiese 5.60 AA */ --ds-green-light:#C3CBA0; /* helles Salbeigrün — Flächen */ --ds-green-soft:#E4E8D2; /* zarteste Grünfläche */ /* ---- Marke: Altrosa (Mohn) ------------------------------- */ --ds-rose:#A85A50; /* textfähig 4.72 AA */ --ds-rose-light:#EAC6C0; /* Blütenrosa — Flächen */ --ds-rose-soft:#F7E9E5; /* zarteste Rosafläche */ /* ---- Status ---------------------------------------------- */ --ds-success:#3F6B4A; --ds-warning:#8A6410; --ds-danger:#9B3435; /* ---- Neutrals (grünlich-warm getönt) --------------------- */ --ds-n-50:#F5F6EC; --ds-n-100:#EBEDDD; --ds-n-200:#D9DCC5; --ds-n-300:#BFC3A6; --ds-n-400:#93977C; --ds-n-500:#6B6E58; --ds-n-700:#43462F; --ds-n-900:#26241A; /* ---- Semantische Rollen ---------------------------------- */ --ds-bg:var(--ds-paper); --ds-surface:#FFFFFC; --ds-text:var(--ds-ink); --ds-text-2:var(--ds-ink-2); --ds-border:var(--ds-n-200); --ds-hairline:color-mix(in srgb, var(--ds-gold-mid) 55%, transparent); --ds-focus:var(--ds-primary); --ds-on-primary:#FFFFFF; /* Text auf Violett 8.39 */ --ds-on-green:#FFFFFF; /* Text auf Waldgrün 8.76 */ --ds-on-solid:#FFFFFF; /* Text auf gefüllten Statusflächen */ --ds-on-light:#26241A; /* Text auf hellem GOLD — hell in beiden Modi 9.7 */ --ds-on-tint:#26241A; /* Text auf Grün-/Rosaflächen, die im Dunkel- modus mitkippen — dort wird daraus Hell */ /* ---- Radien ---------------------------------------------- */ --ds-r-sm:2px; --ds-r-md:4px; --ds-r-lg:10px; --ds-r-xl:18px; --ds-r-full:999px; /* ---- Abstände -------------------------------------------- */ --ds-s-xs:4px; --ds-s-sm:8px; --ds-s-md:16px; --ds-s-lg:24px; --ds-s-xl:32px; --ds-s-2xl:48px; --ds-s-3xl:72px; /* ---- Elevation ------------------------------------------- */ --ds-e-1:0 1px 2px rgba(38,36,26,.06); --ds-e-2:0 10px 28px -18px rgba(38,36,26,.34); --ds-e-3:0 26px 60px -30px rgba(38,36,26,.40); --ds-focus-ring:0 0 0 3px color-mix(in srgb, var(--ds-primary) 32%, transparent); /* ---- Typografie: fünf Rollen, jede mit klarem Auftrag ---- display = die leichte, schöne (Cormorant) — nur ganz groß head = die SCHWERE (Playfair Bold) — alles, was gelesen werden muss und nicht übersehen werden darf script = Handschrift (Caveat) — lebendige Akzente body = Fließtext (Manrope) mono = Kennzahlen und Kicker (JetBrains Mono) */ --ds-font-display:'Cormorant Garamond',Georgia,serif; --ds-font-head:'Playfair Display',Georgia,serif; --ds-font-script:'Caveat','Bradley Hand',cursive; --ds-font-body:'Manrope',system-ui,-apple-system,sans-serif; --ds-font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace; /* ---- Typo-Skala ------------------------------------------ */ --ds-t-display:clamp(46px,7vw,84px); --ds-t-h1:clamp(34px,4.6vw,54px); --ds-t-h2:clamp(26px,3.2vw,38px); --ds-t-h3:21px; --ds-t-body:17px; /* eine Stufe größer für Lesbarkeit */ --ds-t-small:15px; --ds-t-kicker:11px; /* ---- Schriftgewichte (bewusst schwerer als in Fassung 1) -- */ --ds-w-head:700; /* Überschriften: Playfair Bold */ --ds-w-body:450; /* Fließtext etwas kräftiger */ --ds-w-strong:600; /* ---- Bewegung -------------------------------------------- */ --ds-ease:cubic-bezier(.2,.7,.2,1); --ds-ease-soft:cubic-bezier(.4,0,.2,1); --ds-dur-fast:120ms; --ds-dur:220ms; --ds-dur-slow:420ms; } /* ============================================================ DUNKELMODUS — tiefes Waldgrün-Schwarz statt Neutralschwarz, damit die Marke auch dunkel warm und pflanzlich bleibt. Aktivierung: oder Systemeinstellung. ============================================================ */ :root[data-theme="dark"]{ --ds-paper:#191C15; --ds-paper-2:#232719; --ds-paper-3:#2E331F; --ds-ink:#F2F1E4; /* 15.17 AAA */ --ds-ink-2:#ABAE96; /* 7.57 AAA */ --ds-primary:#D391EE; /* 7.43 AAA */ --ds-primary-600:#E4B4F5; --ds-primary-soft:#3A2545; --ds-gold:#EBC97A; /* 10.81 AAA */ --ds-gold-mid:#D9AE55; --ds-gold-shimmer:linear-gradient(100deg, #A8801A 0%, #E0BC63 18%, #FBF0CC 34%, #D9AE55 48%, #F7E6B4 62%, #E0BC63 78%, #A8801A 100%); --ds-green:#A9C08A; /* 8.70 AAA */ --ds-green-mid:#8CA36B; --ds-green-light:#44532F; --ds-green-soft:#2E331F; --ds-rose:#E2ABA2; /* 8.69 AAA */ --ds-rose-light:#5A3A34; --ds-rose-soft:#3A2622; --ds-success:#8FC29C; --ds-warning:#E0B463; --ds-danger:#E58F90; --ds-n-50:#232719; --ds-n-100:#2C3122; --ds-n-200:#3D442F; --ds-n-300:#525A40; --ds-n-400:#7C8465; --ds-n-500:#ABAE96; --ds-n-700:#D3D5C2; --ds-n-900:#F2F1E4; --ds-surface:#232719; --ds-border:var(--ds-n-200); --ds-on-primary:#191C15; --ds-on-green:#191C15; --ds-on-solid:#191C15; --ds-on-light:#191C15; --ds-on-tint:#F2F1E4; --ds-e-1:0 1px 2px rgba(0,0,0,.45); --ds-e-2:0 10px 28px -18px rgba(0,0,0,.75); --ds-e-3:0 26px 60px -30px rgba(0,0,0,.85); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ds-paper:#191C15; --ds-paper-2:#232719; --ds-paper-3:#2E331F; --ds-ink:#F2F1E4; --ds-ink-2:#ABAE96; --ds-primary:#D391EE; --ds-primary-600:#E4B4F5; --ds-primary-soft:#3A2545; --ds-gold:#EBC97A; --ds-gold-mid:#D9AE55; --ds-gold-shimmer:linear-gradient(100deg, #A8801A 0%, #E0BC63 18%, #FBF0CC 34%, #D9AE55 48%, #F7E6B4 62%, #E0BC63 78%, #A8801A 100%); --ds-green:#A9C08A; --ds-green-mid:#8CA36B; --ds-green-light:#44532F; --ds-green-soft:#2E331F; --ds-rose:#E2ABA2; --ds-rose-light:#5A3A34; --ds-rose-soft:#3A2622; --ds-success:#8FC29C; --ds-warning:#E0B463; --ds-danger:#E58F90; --ds-n-50:#232719; --ds-n-100:#2C3122; --ds-n-200:#3D442F; --ds-n-300:#525A40; --ds-n-400:#7C8465; --ds-n-500:#ABAE96; --ds-n-700:#D3D5C2; --ds-n-900:#F2F1E4; --ds-surface:#232719; --ds-border:var(--ds-n-200); --ds-on-primary:#191C15; --ds-on-green:#191C15; --ds-on-solid:#191C15; --ds-on-light:#191C15; --ds-on-tint:#F2F1E4; --ds-e-1:0 1px 2px rgba(0,0,0,.45); --ds-e-2:0 10px 28px -18px rgba(0,0,0,.75); --ds-e-3:0 26px 60px -30px rgba(0,0,0,.85); } } @media (prefers-reduced-motion: reduce){ :root{--ds-dur-fast:1ms; --ds-dur:1ms; --ds-dur-slow:1ms} }