/** * AzubiLaunch -- Design-Tokens (aus Stitch-Export abgeleitet). * * STRIKTE REGEL: Farben/Shadows/Borders NUR über diese Variablen. * Kein einziger Hex/rgba/hsla-Wert darf außerhalb dieser Datei auftauchen — * weder in anderen CSS-Dateien noch in inline-styles im JS. * * Phase 2 bekommt zusätzlich `:root[data-theme="light"] { ... }`, ohne dass * irgendeine andere Datei geändert werden muss. */ :root { /* ============================================================= * SURFACES (Background-Layering vom dunkelsten zum hellsten) * ============================================================ */ --bg-primary: #0e0e14; /* body background */ --bg-secondary: #13131a; /* Sidebar, große Flächen */ --bg-card: #191921; /* Cards / Container */ --bg-card-hover: #1f1f27; /* Card-Hover, elevated */ --bg-input: #25252e; /* Input-Felder / surface-variant */ --bg-bright: #2b2b35; /* höchste Elevation */ /* ============================================================= * BORDERS / OUTLINES (alpha-basiert, theme-unabhängig) * ============================================================ */ --border: rgba(255, 255, 255, 0.05); --border-hover: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --outline: #48474f; /* statische Outline-Farbe */ --outline-muted: #76747d; /* ============================================================= * TEXT * ============================================================ */ --text-primary: #f5f2fc; --text-secondary: #acaab3; --text-muted: #76747d; /* Text ON gradient-/accent-Hintergrund (bleibt in beiden Themes weiß, weil der Gradient selbst dunkel-indigo ist) */ --color-on-accent: #ffffff; /* ============================================================= * BRAND / ACCENT * ============================================================ */ --accent: #6366f1; /* Indigo-500 */ --accent-2: #8b5cf6; /* Violet-500 */ --accent-hover: #7c7ff7; --accent-soft: #a3a6ff; /* Material primary (weicher) */ --accent-dim: #6063ee; --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); /* ============================================================= * STATUS (Pipeline + Termin-Typen — gleiche Palette) * ============================================================ */ --status-recherche: #818cf8; --status-kontakt: #fbbf24; --status-positiv: #34d399; --status-beworben: #60a5fa; --status-einladung: #a78bfa; --status-zusage: #10b981; --status-absage: #f87171; --status-pausiert: #76747d; --termin-nachfrage: #fbbf24; --termin-gespraech: #a78bfa; --termin-probearbeit: #60a5fa; --termin-frist: #f87171; --termin-rueckruf: #34d399; /* ============================================================= * OVERLAYS / BACKDROP * ============================================================ */ --backdrop: rgba(0, 0, 0, 0.7); --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.05); --topbar-bg: rgba(14, 14, 20, 0.8); /* ============================================================= * SHADOWS (Indigo-Glow ist Markenzeichen des Stitch-Designs) * ============================================================ */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.2); --shadow-glow: 0 8px 24px rgba(99, 102, 241, 0.15); --shadow-glow-strong: 0 8px 24px rgba(99, 102, 241, 0.30); --shadow-glow-xl: 0 8px 32px rgba(99, 102, 241, 0.30); --shadow-hairline-top: 0 1px 0 0 rgba(255, 255, 255, 0.05); --shadow-hairline-up: 0 -8px 24px rgba(99, 102, 241, 0.10); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); /* ============================================================= * BORDER-RADIUS (Tailwind-Skala, 4px-Grid) * ============================================================ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 9999px; /* ============================================================= * SPACING (4px-Grid) * ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Alte Aliases, damit bestehende CSS-Dateien nicht alle auf einen Schlag angepasst werden müssen (werden schrittweise abgelöst). */ --spacing-xs: var(--space-1); --spacing-sm: var(--space-2); --spacing-md: var(--space-4); --spacing-lg: var(--space-6); --spacing-xl: var(--space-8); /* ============================================================= * TYPOGRAFIE * ============================================================ */ --font-headline: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Alias auf das alte --font-sans */ --font-sans: var(--font-body); /* ============================================================= * LAYOUT * ============================================================ */ --sidebar-width: 220px; --topbar-height: 72px; --tab-height: 72px; /* Bottom-Nav inkl. FAB */ --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-top: env(safe-area-inset-top, 0px); --content-max-width: 1280px; /* Desktop-Canvas */ /* Theme-Color für (wird per JS in index.php gemirrort) */ --theme-color-meta: #0e0e14; } /* ============================================================================= * LIGHT THEME * Aktiviert durch . Tokens werden aus dem Stitch- * Light-Export abgeleitet. Primary ist hier ein dunklerer Indigo (#4648d4), * damit der Akzent auf weißem Hintergrund ausreichend Kontrast hat. * ========================================================================== */ :root[data-theme="light"] { --bg-primary: #f7f9fb; --bg-secondary: #f2f4f6; --bg-card: #ffffff; --bg-card-hover: #eceef0; --bg-input: #f2f4f6; --bg-bright: #e6e8ea; --border: rgba(0, 0, 0, 0.06); --border-hover: rgba(0, 0, 0, 0.14); --border-strong: rgba(0, 0, 0, 0.24); --outline: #767586; --outline-muted: #c7c4d7; --text-primary: #191c1e; --text-secondary: #464554; --text-muted: #767586; --color-on-accent: #ffffff; --accent: #4648d4; --accent-2: #7c3aed; --accent-hover: #3a3cc4; --accent-soft: #6063ee; --accent-dim: #2f2ebe; --accent-gradient: linear-gradient(135deg, #4648d4 0%, #7c3aed 100%); --status-recherche: #6366f1; --status-kontakt: #d97706; --status-positiv: #059669; --status-beworben: #2563eb; --status-einladung: #7c3aed; --status-zusage: #059669; --status-absage: #dc2626; --status-pausiert: #767586; --termin-nachfrage: #d97706; --termin-gespraech: #7c3aed; --termin-probearbeit: #2563eb; --termin-frist: #dc2626; --termin-rueckruf: #059669; --backdrop: rgba(15, 23, 42, 0.35); --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(0, 0, 0, 0.05); --topbar-bg: rgba(247, 249, 251, 0.8); --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.06); --shadow-glow: 0 6px 20px rgba(70, 72, 212, 0.12); --shadow-glow-strong: 0 12px 32px rgba(70, 72, 212, 0.22); --shadow-glow-xl: 0 12px 32px rgba(70, 72, 212, 0.18); --shadow-hairline-top: 0 1px 0 0 rgba(0, 0, 0, 0.06); --shadow-hairline-up: 0 -8px 24px rgba(70, 72, 212, 0.06); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); --theme-color-meta: #f7f9fb; } /* Sanfter Crossfade beim Theme-Switch — keine jump-flash Animation */ html { transition: background-color .25s ease, color .25s ease; }