/* * Solar-OS / Nolar — Design-Tokens V2 * * Scharfer Cut: keine Hex-Remap-Defensive mehr, kein Lila-Erbe. * Eine einzige Quelle der Wahrheit für Farben, Typo, Spacing. * * Aktiv per (neu) UND (Legacy-Alias). * BrandingService::buildCssOverride() darf weiter --brand-primary/-dark/-soft setzen * → das übersteuert nur die TENANT-Brand-Farbe (Nav-Akzent), NICHT die CTA-Amber. */ :root, [data-mode="light"], [data-theme="light"]:not([data-theme="dark"]) { /* === Statische Marken-Farben (modusunabhängig — für Logo, Charts, Icons) === */ --nolar-brand-blue: #1E3F6E; --nolar-brand-amber: #FFB800; --nolar-brand-teal: #00A896; --nolar-brand-red: #E2543C; --nolar-brand-ink: #0E1822; --nolar-brand-slate: #F4F7F9; /* === Semantische Tokens — Light === */ --nolar-bg: #FFFFFF; --nolar-bg-muted: #F4F7F9; --nolar-bg-elevated: #FFFFFF; --nolar-bg-inverse: #0E1822; --nolar-bg-brand: #1E3F6E; --nolar-bg-brand-soft: #EAF0F8; --nolar-fg: #0E1822; --nolar-fg-muted: rgba(14,24,34,0.65); --nolar-fg-subtle: rgba(14,24,34,0.45); --nolar-fg-on-brand: #FFFFFF; --nolar-fg-on-accent: #0E1822; --nolar-border: rgba(14,24,34,0.10); --nolar-border-strong: rgba(14,24,34,0.18); /* CTA = Amber. Systemweit, NICHT tenant-überschreibbar. */ --nolar-primary: #FFB800; --nolar-primary-hover: #E6A500; --nolar-primary-fg: #0E1822; --nolar-primary-soft: #FFF4D6; /* Brand = Indigo Blue. Default; Tenant kann via --brand-primary überschreiben. */ --nolar-brand: #1E3F6E; --nolar-brand-fg: #FFFFFF; --nolar-success: #00A896; --nolar-success-soft: #E0F4F1; --nolar-warning: #FFB800; --nolar-warning-soft: #FFF4D6; --nolar-danger: #E2543C; --nolar-danger-soft: #FCE9E4; --nolar-info: #1E3F6E; --nolar-info-soft: #EAF0F8; --nolar-shadow-sm: 0 1px 2px rgba(14,24,34,0.06); --nolar-shadow-md: 0 4px 12px rgba(14,24,34,0.08); --nolar-shadow-lg: 0 12px 32px rgba(14,24,34,0.10); /* === Skalen === */ --nolar-radius-sm: 4px; --nolar-radius-md: 6px; --nolar-radius-lg: 10px; --nolar-radius-xl: 16px; --nolar-space-1: 4px; --nolar-space-2: 8px; --nolar-space-3: 12px; --nolar-space-4: 16px; --nolar-space-5: 20px; --nolar-space-6: 24px; --nolar-space-8: 32px; --nolar-space-10: 40px; --nolar-space-12: 48px; --nolar-space-16: 64px; /* === Typografie === */ --nolar-font-display: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif; --nolar-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --nolar-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace; color-scheme: light; /* * === Legacy-Aliase === * Diese Variable-Namen leben in 50+ Twig-Templates und in app.css. * Wert kommt aus V2 — Refactor der Template-Inline-Styles passiert * piecemeal über die Zeit. Solange ein Template noch var(--brand-primary) * sagt, kriegt es jetzt Nolar-Indigo (statt früher Lila/Orange). */ --brand-primary: var(--nolar-brand); --brand-primary-dark: #142B4D; --brand-primary-soft: var(--nolar-bg-brand-soft); --brand-on-soft: var(--nolar-brand); --brand-neutral: var(--nolar-fg-muted); /* CTA-Variable für Buttons im app.css. Nicht tenant-überschreibbar. */ --cta-primary: var(--nolar-primary); --cta-primary-hover: var(--nolar-primary-hover); --cta-primary-fg: var(--nolar-primary-fg); --neutral-50: var(--nolar-bg); --neutral-100: var(--nolar-bg-muted); --neutral-200: var(--nolar-border); --neutral-300: var(--nolar-border-strong); --neutral-400: var(--nolar-fg-subtle); --neutral-500: var(--nolar-fg-muted); /* ergänzt 2026-05-31: war undefiniert → Browser-Default (Dark-Bruch) */ --neutral-600: var(--nolar-fg-muted); /* ergänzt 2026-05-31: war undefiniert → Browser-Default (Dark-Bruch) */ --neutral-700: var(--nolar-fg-muted); --neutral-900: var(--nolar-fg); --surface: var(--nolar-bg-elevated); --ink: var(--nolar-fg); --ink-soft: var(--nolar-fg-muted); --text: var(--nolar-fg); --color-success: var(--nolar-success); --color-success-bg: var(--nolar-success-soft); --color-success-border: var(--nolar-success); --color-success-text: var(--nolar-success); --color-danger: var(--nolar-danger); --color-danger-bg: var(--nolar-danger-soft); --color-danger-border: var(--nolar-danger); --color-danger-text: var(--nolar-danger); --font-stack: var(--nolar-font-sans); } [data-mode="dark"], [data-theme="dark"] { --nolar-bg: #0E1822; --nolar-bg-muted: #142334; --nolar-bg-elevated: #1B2C42; --nolar-bg-inverse: #FFFFFF; --nolar-bg-brand: #1E3F6E; --nolar-bg-brand-soft: rgba(74,122,181,0.18); --nolar-fg: #F4F7F9; --nolar-fg-muted: rgba(244,247,249,0.70); --nolar-fg-subtle: rgba(244,247,249,0.45); --nolar-fg-on-brand: #FFFFFF; --nolar-fg-on-accent: #0E1822; --nolar-border: rgba(244,247,249,0.10); --nolar-border-strong: rgba(244,247,249,0.22); --nolar-primary: #FFB800; --nolar-primary-hover: #FFC835; --nolar-primary-fg: #0E1822; --nolar-primary-soft: rgba(255,184,0,0.15); --nolar-brand: #4A7AB5; --nolar-brand-fg: #FFFFFF; --nolar-success: #23C7B3; --nolar-success-soft: rgba(0,168,150,0.20); --nolar-warning: #FFB800; --nolar-warning-soft: rgba(255,184,0,0.18); --nolar-danger: #F0735A; --nolar-danger-soft: rgba(226,84,60,0.22); --nolar-info: #4A7AB5; --nolar-info-soft: rgba(74,122,181,0.22); --nolar-shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --nolar-shadow-md: 0 4px 12px rgba(0,0,0,0.40); --nolar-shadow-lg: 0 12px 32px rgba(0,0,0,0.50); --brand-primary-dark: #1E3F6E; color-scheme: dark; } /* * === Grund-Layer === — Body-Default */ body { background: var(--nolar-bg); color: var(--nolar-fg); font-family: var(--nolar-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { font-family: var(--nolar-font-display); letter-spacing: -0.015em; } .mono, code, kbd, samp, pre { font-family: var(--nolar-font-mono); font-variant-numeric: tabular-nums; } .hex-clip { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }