/* ============================================================================= Inuveta Design-Tokens — 1:1 aus Frontend/src/theme/ übernommen. Diese Datei ist die gemeinsame Basis aller Dashboard-Varianten. Wer eine Variante baut, überschreibt Tokens in der eigenen CSS — nicht hier. Quellen: tokens/colors.ts → --c-* themes/light-theme.ts → --bg-*, --content-*, --border-* tokens/glass.ts → --glass-* tokens/typography.ts → --t-* (Web-Skala) tokens/radius.ts → --r-* ========================================================================== */ :root { /* --- Neutrals (solid.neutral) ----------------------------------------- */ --c-neutral-0: #FFFFFF; --c-neutral-25: #F6F6F6; --c-neutral-50: #F0F0F0; --c-neutral-100: #E5E5E5; --c-neutral-200: #CCCCCC; --c-neutral-300: #B2B2B2; --c-neutral-400: #999999; --c-neutral-500: #808080; --c-neutral-600: #666666; --c-neutral-700: #4D4D4D; --c-neutral-800: #333333; --c-neutral-900: #212121; --c-neutral-1000: #0D0D0D; /* --- Brand · INUVETA-Styleguide (Mohr Marketing, 31.10.2025) ---------- Primärfarben: Cyan #00FFFF · Hellblau #6EC5FF · Blau-Violett #907FFF · Violett #BB24FF. Sekundär: Grau #D6D6D8 · Schwarz. Verlauf Violett→Cyan. Die Styleguide-Töne sind hell — für Text/Aktionen auf hellem Grund gibt es je eine abgedunkelte Stufe (≥ 4,5:1, WCAG AA), Flächen/Verläufe nutzen die Originalwerte. ------------------------------------------------------- */ --c-sg-cyan: #00FFFF; --c-sg-hellblau: #6EC5FF; --c-sg-blauviolett: #907FFF; --c-sg-violett: #BB24FF; --c-sg-grau: #D6D6D8; --c-brand-purple-200: #DCD6FF; --c-brand-purple-400: #907FFF; /* Blau-Violett (Styleguide) */ --c-brand-purple-500: #6450E8; /* Blau-Violett, textfähig (4,8:1 auf #F0F0F0) */ --c-brand-purple-600: #5442D6; --c-brand-violet-500: #BB24FF; /* Violett (Styleguide) */ --c-brand-cyan-400: #00E5FF; /* Cyan (Styleguide #00FFFF), minimal satter */ --c-brand-cyan-600: #00A9CC; --c-brand-cyan-700: #007A96; /* Cyan, textfähig */ --c-brand-blue-400: #6EC5FF; /* Hellblau (Styleguide) */ /* Markenverlauf laut Styleguide (Violett → Blau-Violett → Hellblau → Cyan) */ --brand-gradient: linear-gradient(135deg, #00FFFF 0%, #6EC5FF 35%, #907FFF 68%, #BB24FF 100%); /* Tiefe Variante für Flächen mit weißer Schrift (Knöpfe, Avatare) */ --brand-gradient-deep: linear-gradient(135deg, #6450E8 0%, #8E1CD6 100%); --c-yellow-600: #B87614; --c-yellow-700: #8A590F; --c-green-700: #0D8C42; /* --- Tailwind-Defaults, die in den Dashboard-Klassen auftauchen -------- */ /* Akzentfarben der Gamification: teal (Level/Stats), cyan (Talente), yellow (Passion). Kommen aus der Standard-Tailwind-Palette. */ --c-teal-300: #5EEAD4; --c-teal-400: #2DD4BF; --c-teal-500: #14B8A6; --c-cyan-400: #22D3EE; --c-cyan-500: #06B6D4; --c-yellow-400: #FACC15; --c-yellow-500: #EAB308; --c-purple-500: #A855F7; --c-tw-neutral-600: #525252; --c-tw-neutral-700: #404040; --c-tw-neutral-800: #262626; --c-tw-neutral-900: #171717; /* --- Semantische Rollen · Light Theme --------------------------------- */ --bg-base-primary: var(--c-neutral-50); --bg-base-secondary: var(--c-neutral-100); --bg-component-primary: var(--c-neutral-0); --bg-component-secondary: var(--c-neutral-50); --bg-component-hover: var(--c-neutral-100); --bg-component-pressed: var(--c-neutral-200); --bg-action-primary: var(--c-neutral-900); --bg-action-hover: var(--c-neutral-800); --bg-action-pressed: var(--c-neutral-1000); --content-base-primary: var(--c-neutral-900); --content-base-secondary: var(--c-neutral-700); --content-base-tertiary: var(--c-neutral-600); --content-action-primary: var(--c-brand-purple-500); --content-action-hover: var(--c-brand-purple-600); --content-on-action: var(--c-neutral-25); --content-positive: #1E7A4C; --border-base-primary: var(--c-neutral-100); --border-base-secondary: var(--c-neutral-200); /* --- Liquid Glass (tokens/glass.ts) ----------------------------------- */ --glass-tint: rgba(255, 255, 255, 0.60); --glass-tint-clear: rgba(255, 255, 255, 0.35); --glass-tint-thick: rgba(255, 255, 255, 0.78); --glass-blur-soft: blur(20px) saturate(160%); --glass-blur-regular: blur(40px) saturate(180%); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.05); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --glass-accent-start: var(--c-sg-blauviolett); --glass-accent-end: var(--c-sg-cyan); --glass-accent-opacity: 0.06; /* --- Radius (glass lg = 28, Tailwind rounded-xl = 12) ------------------ */ --r-glass: 28px; --r-card: 12px; --r-inner: 8px; --r-pill: 9999px; /* --- Typografie · Web-Skala (tokens/typography.ts) --------------------- */ /* Schriften laut Styleguide: Sekundärschrift DM Sans für Beschriftungen und Fließtext. Die Hausschrift „New Atten Round“ ist eine Lizenzschrift ohne Webfont-Lizenz — B3.6 (19.10.): kein Platzhalter (vorher Nunito) mehr, Überschriften stehen ebenfalls in DM Sans. Kommt die lizenzierte Webfont, hier wieder voranstellen und @font-face in assets/fonts/fonts.css ergänzen (Schriften werden selbst gehostet, keine Font-CDNs — DSGVO). */ --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-lese: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-titel: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --track: -0.02em; /* letterSpacingRatio aus den Tokens */ /* --- Raster (Tailwind-Defaults, die im Dashboard benutzt werden) ------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* --- Breakpoints (tokens/layout.ts) ----------------------------------- */ /* tablet 600 · laptop 1024 · web 1240 — als Kommentar, CSS braucht Zahlen */ --max-width-desktop: 1440px; /* Nachrichtentext von VETI und Nutzer — EINE Größe für Chat-Blasen und die Nachricht auf der Startseite (Stefan 19.10., df5766/54f8bb). Handy ≥ 16 px, sonst zoomt iOS beim Antworten. */ --msg-schrift: 17px; --msg-zeile: 1.5; } @media (max-width: 599px) { :root { --msg-schrift: 16px; } }