/* * SmartZeit Design Tokens * ======================= * Single-Source-of-Truth für alle CI-relevanten Werte (ADR 009). * * DESIGNER-ANLEITUNG: docs/branding.md * * Um das Branding zu wechseln: die --sz-*-Werte hier ändern, dann * `azd deploy` ausführen. Die MudBlazor-Aliase weiter unten müssen * NICHT angefasst werden — sie referenzieren die --sz-*-Tokens. * * Wichtig: --sz-focus-ring ist ein hartes Hex (nicht var(--sz-primary)). * Begründung: WCAG 2.2 AA verlangt ≥3:1 Kontrast gegen --sz-bg. * Bei einem Primary-Wechsel auf helle Töne separat prüfen. * * Sync-Pflichten bei Brand-Change: * 1. Keycloak-Theme: keycloak-theme/.../styles.css :root-Block * 2. E-Mail-Layout: Email/Templates/_layout.css :root-Block * Siehe docs/branding.md für die vollständige Checkliste. */ :root { /* ── Fonts ─────────────────────────────────────────────────────── */ --sz-font-display: 'Instrument Serif', Georgia, serif; --sz-font-sans: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif; --sz-font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif; /* ── Brand ─────────────────────────────────────────────────────── */ --sz-primary: #059669; /* Emerald-600: CTA-Buttons, Links, Akzente */ --sz-primary-hover: #047857; /* Emerald-700: Hover */ --sz-primary-active: #065F46; /* Emerald-800: Active/Pressed */ --sz-primary-light: #D1FAE5; /* Emerald-100: Badge-BG, Highlights */ --sz-primary-subtle: #ECFDF5; /* Emerald-50: Section-BG-Akzente */ --sz-secondary: #F59E0B; /* Amber-500: Founder-Badge, Preisauszeichnung */ --sz-secondary-hover: #D97706; /* Amber-600 */ --sz-secondary-light: #FEF3C7; /* Amber-100 */ /* ── Surfaces ──────────────────────────────────────────────────── */ --sz-bg: #FFFFFF; /* Sauberes Weiss */ --sz-bg-subtle: #F8FAFC; /* Slate-50: alternating section BGs */ --sz-surface: #FFFFFF; /* Card-Hintergrund */ --sz-surface-elevated: #F1F5F9; /* Slate-100: Tabellen-Header, Section-BG */ /* ── Text ──────────────────────────────────────────────────────── */ --sz-text: #0F172A; /* Slate-950 */ --sz-text-secondary: #64748B; /* Slate-500 */ --sz-text-tertiary: #94A3B8; /* Slate-400: Placeholder, Disabled */ --sz-text-on-primary: #FFFFFF; /* ── Lines ─────────────────────────────────────────────────────── */ --sz-border: #E2E8F0; /* Slate-200 */ --sz-border-strong: #94A3B8; /* Slate-400 */ /* ── Status — bewusst vom Primary ENTKOPPELT ───────────────────── */ --sz-error: #DC2626; --sz-success: #16A34A; --sz-warning: #D97706; --sz-info: #0EA5E9; /* Sky-500 — NICHT primary, eigene Konvention */ /* ── A11y ──────────────────────────────────────────────────────── */ --sz-focus-ring: #059669; /* WCAG 2.2 AA ≥3:1 gegen --sz-bg (4.54:1) */ /* ── Tertiär (Bento-Card 3, Pricing-Gradient-Midpoint) ────────── */ --sz-tertiary: #0D9488; /* Teal-600 */ /* ── Neutrale UI-Farben ─────────────────────────────────────────── */ --sz-dark: #0F172A; /* Slate-950: Footer, Hero-Overlays */ --sz-muted: #475569; /* Slate-600 */ --sz-neutral: #CBD5E1; /* Slate-300: Bullets, dekorative Elemente */ /* ── Radius ────────────────────────────────────────────────────── */ --sz-radius: 14px; /* Cards, Buttons, Dialoge */ --sz-radius-sm: 8px; --sz-radius-lg: 24px; /* Hero-Cards, Feature-Bento */ --sz-radius-pill: 999px; /* Badges, Tags */ /* ── Shadows ────────────────────────────────────────────────────── */ --sz-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04); --sz-shadow: 0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04); --sz-shadow-lg: 0 20px 60px rgba(15,23,42,0.12), 0 8px 24px rgba(15,23,42,0.06); --sz-shadow-primary: 0 8px 32px rgba(5,150,105,0.25); /* ── Gradients ──────────────────────────────────────────────────── */ --sz-gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(5,150,105,0.08) 0%, transparent 60%); --sz-gradient-primary: linear-gradient(135deg, #059669 0%, #047857 100%); --sz-gradient-pricing: linear-gradient(135deg, #059669 0%, #0D9488 50%, #0891B2 100%); --sz-gradient-dark: linear-gradient(180deg, #0F172A 0%, #1E293B 100%); /* ── MudBlazor-Aliase ──────────────────────────────────────────── */ /* Farb-Aliase: MudBlazor-Components lesen diese automatisch. */ /* Typo, Layout, Elevation, Z-Index bleiben in App.razor