/* * Design-Tokens aus dem echten Handoff (illumentis-design-fundamentals.md Abschnitt 10). * Zwei Schichten: * 1) Rohe Marken-Tokens (Raum/Papier, Licht, Studio-Akzente, Engine, Status, Text) — * feste Werte, unabhaengig vom Theme. Direkt nutzbar, wo ein Element bewusst * immer im "Dark Space"-Look steht (z.B. Hero/Trust-Row/CTA-Banner der * Landingpage, sulu-screens.md Abschnitt B.1 — dort taucht in der gesamten * Beschreibung nie ein Light-Mode-Pendant auf, im Unterschied zu praktisch * jedem anderen Token im Dokument). * 2) Theme-gekoppelte Rollen-Tokens (--color-bg/-surface/-text/...) fuer generelles * Seiten-Chrome (Header/Footer/Formularseiten), die weiterhin dem bestehenden * Hell-/Dunkel-Umschalter (theme-toggle.js) folgen — Mechanismus unveraendert * gegenueber der bisherigen Platzhalter-Version, nur mit echten Werten befuellt. * Nur Tokens aufgenommen, die tatsaechlich in diesem Sulu-Repo (Marketing/Wiki/Shop) * verwendet werden koennen — App-editor-spezifische Gruppen (Studio-Halos, Wasserzeichen, * Beziehungs-Intensitaet, Chart-Kategorien) bleiben aussen vor, da sie in der Vue-App * (separates Repo) leben. */ :root { /* --- Raum & Papier (10.1) --- */ --color-space-obsidian: #0B0E14; --color-space-navy: #121824; --color-space-slate: #1E2638; --color-paper-base: #F8FAFC; --color-paper-sheet: #FDFBF7; --color-paper-border: #E2E8F0; /* --- Licht & Interaktion (10.2) --- */ --color-light-teal: #0D9488; --color-light-emerald: #10B981; --color-light-cyan: #06B6D4; --color-light-cyan-light: #0891B2; /* Dunklere Cyan-Stufe (= brand-700 der App): Links/Interaktion im Hellmodus erreichen damit AA-Kontrast (5.1:1 auf Papier; --color-light-cyan-light liegt nur bei 3.5:1). */ --color-brand-700: #0E7490; /* --- Studio-Akzente (10.3) --- */ --color-studio-vastitas: #4F46E5; --color-studio-sapientia: #38BDF8; --color-studio-scaena: #B45309; --color-studio-regalia: #D97706; /* --- Illuminatio Engine (10.4) --- */ --color-engine-teal: #0D9488; --color-engine-teal-light: #0F766E; --color-engine-amber: #F59E0B; --color-engine-amber-light: #92400E; --color-engine-violet: #8B5CF6; /* --- System-Status (10.5) --- */ --color-status-error: #F43F5E; --color-status-error-light: #BE123C; --color-status-warning: #FB923C; --color-status-warning-light: #C2410C; --color-status-info: #60A5FA; --color-status-info-light: #2563EB; --color-status-success: #10B981; --color-status-success-light: #047857; /* --- Text (10.6) --- */ --color-text-starlight: #F8FAFC; --color-text-ink: #0F172A; --color-text-moonlight: #94A3B8; --color-text-muted: #64748B; /* --- Neutrale Elevation, Light Mode (10.7a) --- */ --elevation-neutral-light: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --elevation-neutral-light-hover: 0 4px 12px rgba(15, 23, 42, 0.10); /* --- Spacing (10.8) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-component-padding-mobile: 16px; --space-component-padding-desktop: 24px; --space-section-gap-mobile: 64px; --space-section-gap-desktop: 96px; --space-inline-gap: 8px; --hybrid-seam-width: 24px; /* --- Typografie (10.9) --- */ --font-family-base: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --text-xs: 12px; --text-xs-lh: 16px; --text-sm: 14px; --text-sm-lh: 20px; --text-base: 16px; --text-base-lh: 24px; --text-lg: 18px; --text-lg-lh: 28px; --text-xl: 20px; --text-xl-lh: 28px; --text-2xl: 24px; --text-2xl-lh: 32px; --text-3xl: 30px; --text-3xl-lh: 36px; --text-4xl: 36px; --text-4xl-lh: 40px; --text-5xl: 48px; --text-5xl-lh: 52px; --prose-base-desktop: 18px; --prose-base-desktop-lh: 30px; --prose-base-mobile: 16px; --prose-base-mobile-lh: 27px; /* --- Radius (10.10) --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* --- Icon-Groessen (10.11) --- */ --icon-size-micro: 4px; --icon-size-badge: 12px; --icon-size-glyph: 16px; --icon-size-base: 24px; /* --- Motion (10.12) --- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* --- Layout --- */ --container-max-width: 1200px; /* --- Theme-Rollen: Light (Default) --- */ --color-bg: var(--color-paper-base); --color-surface: var(--color-paper-sheet); --color-border: var(--color-paper-border); --color-text: var(--color-text-ink); --color-text-secondary: var(--color-text-muted); --color-interactive: var(--color-brand-700); --color-success-text: var(--color-status-success-light); --color-warning-text: var(--color-status-warning-light); --color-focus-ring: var(--color-light-cyan-light); } /* Dark Mode: folgt System-Praeferenz, sofern nicht manuell uebersteuert */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--color-space-obsidian); --color-surface: var(--color-space-navy); --color-border: var(--color-space-slate); --color-text: var(--color-text-starlight); --color-text-secondary: var(--color-text-moonlight); --color-interactive: var(--color-light-cyan); --color-success-text: var(--color-status-success); --color-warning-text: var(--color-status-warning); --color-focus-ring: var(--color-light-cyan); } } /* Manuelle Uebersteuerung durch theme-toggle.js — gleiche Werte wie oben, damit System- und manueller Pfad nie auseinanderlaufen */ :root[data-theme="dark"] { --color-bg: var(--color-space-obsidian); --color-surface: var(--color-space-navy); --color-border: var(--color-space-slate); --color-text: var(--color-text-starlight); --color-text-secondary: var(--color-text-moonlight); --color-interactive: var(--color-light-cyan); --color-success-text: var(--color-status-success); --color-warning-text: var(--color-status-warning); --color-focus-ring: var(--color-light-cyan); } :root[data-theme="light"] { --color-bg: var(--color-paper-base); --color-surface: var(--color-paper-sheet); --color-border: var(--color-paper-border); --color-text: var(--color-text-ink); --color-text-secondary: var(--color-text-muted); --color-interactive: var(--color-brand-700); --color-success-text: var(--color-status-success-light); --color-warning-text: var(--color-status-warning-light); --color-focus-ring: var(--color-light-cyan-light); }