/* ============================================================ nuntix.net — Brand Color Tokens CI v1 · 07/2026 ------------------------------------------------------------ Aufbau: 1. Primitives — die benannte Palette (Green/Ink/Grey …) 2. Semantik — Rollen (bg, text, border, link, severity) Regel: In Komponenten NUR Semantik-Tokens verwenden, nie die Primitives direkt. Kontraste sind WCAG-2.1-geprüft (AA = 4.5:1 für Text, 3:1 für UI/Grafik). ============================================================ */ :root { /* ---- 1. PRIMITIVES ------------------------------------- */ /* Green — Markenfarbe */ --green-700: #007A4E; /* Links/Hover auf hell · 5.39:1 auf Weiß AA */ --green-500: #00C27A; /* Brand: Chevron, Punkt, Grafik. NIE Text auf hell (2.33:1) */ --green-300: #5CE8AE; /* Akzente/Charts auf dunkel · 11.5:1 auf Ink */ /* Ink — Dunkeltöne */ --ink-900: #16181D; /* Wortmarke, Headlines, Favicon-Tile, Page-BG dark */ --ink-700: #3A3F47; /* Support-Chevron dark, Borders dark (war loser Hex) */ /* Grey — Neutrals */ --grey-600: #656B74; /* NEU: barrierefreier Sekundärtext · 5.37:1 auf Weiß AA */ --grey-500: #8A8F99; /* ".net", nur groß/dekorativ — 3.25:1, NICHT für Fließtext */ --grey-300: #C3C7CF; /* Support-Chevron light, Linien */ /* ---- 2. SEMANTIK · LIGHT (default) --------------------- */ /* Flächen */ --bg-page: #F3F2EE; /* warmes Off-White (Sheet-Hintergrund) */ --bg-surface: #FFFFFF; /* Cards, Panels */ --bg-subtle: #ECEBE6; /* eingesenkte Bereiche, Code-Blöcke */ /* Rahmen */ --border: #DEDDD7; /* Standard-Trennlinien */ --border-strong:#C3C7CF; /* betonte Kanten (= grey-300) */ /* Text */ --text-primary: #16181D; /* = ink-900 */ --text-secondary: #656B74; /* = grey-600 · AA */ --text-muted: #8A8F99; /* = grey-500 · nur groß/Labels/".net" */ --link: #007A4E; /* = green-700 */ --link-hover: #005C3A; /* Marke */ --brand: #00C27A; /* = green-500 */ --brand-ink: #16181D; /* Fläche hinter Brand-Grün (Favicon-Tile) */ /* Severity — CERT/Vulnerability-Feed. WICHTIG: Grün = Marke, daher NICHT als "success/ok" nutzen. -solid = Icon/Text (AA auf Weiß) · -bg = Badge-Tint */ --sev-critical: #B01B21; --sev-critical-bg: #FBEAEA; --sev-high: #C4361C; --sev-high-bg: #FCEBE4; --sev-medium: #8F5D00; --sev-medium-bg: #FBF0DA; --sev-low: #726A1E; --sev-low-bg: #F6F3DC; --sev-info: #2B6CB0; --sev-info-bg: #E7EFF9; /* Data-Viz (Grafana/Dashboards) — kategoriale Reihe. Grün führt, Severity-Töne als weitere Serien. */ --chart-1: #00C27A; /* brand */ --chart-2: #2B6CB0; /* blau */ --chart-3: #8F5D00; /* amber */ --chart-4: #B01B21; /* rot */ --chart-5: #656B74; /* neutral */ } /* ---- SEMANTIK · DARK ------------------------------------- */ /* Aktivieren per oder .dark-Klasse. Zusätzlich prefers-color-scheme unten. */ [data-theme="dark"], .dark { --bg-page: #16181D; /* = ink-900 */ --bg-surface: #1E2128; --bg-subtle: #22262E; --border: #2A2E37; --border-strong:#3A3F47; /* = ink-700 */ --text-primary: #E8EAED; /* 13.4:1 auf surface */ --text-secondary: #A7ADB8; /* 7.1:1 auf surface AA */ --text-muted: #6B7178; /* nur dekorativ */ --link: #00C27A; /* green-500, 7.6:1 auf Ink */ --link-hover: #5CE8AE; /* green-300 */ --brand: #00C27A; --brand-ink: #16181D; /* Severity dark: hellere Töne + gedeckte Tints */ --sev-critical: #F87171; --sev-critical-bg: #2B1618; --sev-high: #FB8B5E; --sev-high-bg: #2B1B12; --sev-medium: #F5C451; --sev-medium-bg: #2A2210; --sev-low: #D8D06A; --sev-low-bg: #232212; --sev-info: #7CB4EB; --sev-info-bg: #132230; --chart-1: #5CE8AE; /* green-300 auf dunkel */ --chart-2: #7CB4EB; --chart-3: #F5C451; --chart-4: #F87171; --chart-5: #A7ADB8; } /* Automatischer Dark-Mode, wenn kein data-theme gesetzt ist */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-page: #16181D; --bg-surface: #1E2128; --bg-subtle: #22262E; --border: #2A2E37; --border-strong: #3A3F47; --text-primary: #E8EAED; --text-secondary: #A7ADB8; --text-muted: #6B7178; --link: #00C27A; --link-hover: #5CE8AE; --sev-critical: #F87171; --sev-critical-bg: #2B1618; --sev-high: #FB8B5E; --sev-high-bg: #2B1B12; --sev-medium: #F5C451; --sev-medium-bg: #2A2210; --sev-low: #D8D06A; --sev-low-bg: #232212; --sev-info: #7CB4EB; --sev-info-bg: #132230; --chart-1: #5CE8AE; --chart-2: #7CB4EB; --chart-3: #F5C451; --chart-4: #F87171; --chart-5: #A7ADB8; } }