/* * Nexxus Brand-Tokens — Farbsystem v3 (final, Aug 2026) * * Quelle der Wahrheit ist `brand/colors.ts`. Diese Datei spiegelt dieselben * Werte als CSS-Custom-Properties; bei Änderungen immer beide anfassen. * * Drei Stufen je Produkt: * --nx--light Hover/Tints * --nx--base Akzent auf dunklem Grund * --nx--deep gedrückter Zustand + Text auf hellem Grund * * Basistöne sind NIE Textfarben auf Weiß — dafür deep (bzw. forge-rost, * commerce-ink, die den Kontrast sicher erreichen). * * Der semantische Token --nx- löst je nach Theme auf base (dark) * oder deep (light) auf. Hell ist Default (seit 2026-09-12 auch hier). */ :root { /* Eckenradien — vier Stufen, mehr braucht keine Seite. Bis zum 04.09.2026 standen im Quellcode 18 verschiedene Werte, und `var(--nx-radius)` wurde benutzt, ohne je definiert zu sein (Ergebnis: 0). Der Prüfer hat sechs Radien allein auf der Startseite gezählt. Karten, Knöpfe und Menüs sind drei Stufen, die Pille die vierte. Kreise (50 %) und die Squircle der App-Icons (22 %) sind Formen, keine Radien, und bleiben wie sie sind. */ --nx-radius: 1rem; /* Karten, Kacheln, Dialoge */ --nx-radius-sm: 0.625rem; /* Knöpfe (10 px, Phil 16.09.2026: statt Pille), Eingaben, Menüs */ --nx-radius-xs: 0.4rem; /* Menüeinträge, Chips, kleine Flächen */ --nx-radius-pill: 999px; /* Badges, Pillen */ /* ---- Produktfarben, drei Stufen ---- */ --nx-mentor-light: #afa0f5; --nx-mentor-base: #8c6fec; --nx-mentor-deep: #6a4ce0; --nx-connect-light: #78c489; --nx-connect-base: #53ae68; --nx-connect-deep: #3d8a50; --nx-connect-ink: #2f6b3e; /* Text auf hellen Flächen (deep erreicht AA nicht) */ --nx-nutria-light: #bfdd61; --nx-nutria-base: #a9ce3b; --nx-nutria-deep: #83a626; --nx-nutria-deep2: #63801c; /* nur für die Icon-Sonderregel */ --nx-nutria-ink: #496312; /* Text auf hellen Flächen (deep erreicht nur 2,5:1); aus Nutria src/ui/tokens.ts */ --nx-nutria-fill: #425a10; /* gefüllte Flächen mit weißer Schrift (7,8:1) */ --nx-nutria-akzent: #7e9d26; /* große Akzente (H1-Akzent, Kennzahlen) auf hellen Flächen: 3,12:1 auf Weiß, deep erreicht 2,82:1; ink wirkte fast schwarz (Nutria-Chat, 13.09.2026) */ --nx-pilot-light: #8fb0f9; --nx-pilot-base: #5e8bf6; --nx-pilot-deep: #3e67db; --nx-forge-light: #f29159; --nx-forge-base: #e56f35; --nx-forge-deep: #b5552f; --nx-forge-rost: #8f3b22; /* Text auf hellen Flächen (7,46:1) */ --nx-forge-glut: #d97706; /* NUR dekorative Effekte — nie Text, nie Icon */ /* Commerce = Butler · Guide · Scout, bewusst identisch */ --nx-commerce-light: #68c6ba; --nx-commerce-base: #3fb3a6; --nx-commerce-deep: #3b8880; --nx-commerce-ink: #2c6660; /* Text auf hellen Flächen (deep erreicht AA knapp nicht) */ --nx-karat-light: #f2cc5c; --nx-karat-base: #e0b13a; --nx-karat-deep: #b58a1f; --nx-karat-ink: #8a6a17; /* Text auf hellen Flächen (deep erreicht nur 3,2:1); 5,05:1 auf Weiß */ --nx-flow-light: #f694b2; --nx-flow-base: #ed6b94; --nx-flow-deep: #ce4873; --nx-id-light: #b8c0cc; --nx-id-base: #99a3b3; --nx-id-deep: #737e8e; --nx-id-ink: #5c6673; /* Text auf hellen Flächen (deep erreicht AA nicht) */ /* Nexxus Atlas und Nexxus Engine — Infrastruktur, bewusst im ID-Neutralton */ --nx-atlas-light: #b8c0cc; --nx-atlas-base: #99a3b3; --nx-atlas-deep: #737e8e; --nx-atlas-ink: #5c6673; /* ---- Dachmarke: einziger Farbton-Verlauf im System ---- */ --nx-group-grad-start: #5e8bf6; --nx-group-grad-mid: #8c6fec; --nx-group-grad-end: #ed6b94; --nx-group-gradient: linear-gradient(135deg, #5e8bf6 0%, #8c6fec 50%, #ed6b94 100%); --nx-group-fallback: #8c6fec; /* Gefüllte Flächen mit weißer Schrift (Buttons): Der Basis-Verlauf ist für Text gemacht und trägt darunter nur 2,9–3,4:1. Die deep-Stufen erreichen 4,4–5,0:1 und damit den Textkontrast. */ --nx-group-grad-deep-start: #3e67db; --nx-group-grad-deep-end: #ce4873; /* Feste Stufe der Dachmarke für Text, Linien und Bildmarke auf hellem Grund: die Mitte des Verlaufs in deep (= mentor-deep, 5,6:1 auf Weiß). Ergänzt 2026-09-12 mit den Familienbausteinen (brand/web). Das Ende des deep-Verlaufs trägt weiße Schrift nur mit 4,38:1 (Tyrion, 12.09.); wer weiße Schrift auf den Verlauf setzt, dunkelt das Ende ab (produkte.css). */ --nx-group-ink: #6a4ce0; /* ---- Typografie ---- * Baloo Chettan 2 ist die Schrift der Marke: Sie trägt die Wortmarke UND * alle Überschriften (Vorgabe Phil, 2026-08-12). Space Grotesk stand hier * bis dahin und ist damit vollständig abgelöst — auch aus den Imports * entfernt, statt als Rückfall liegen zu bleiben. * * **Immer Regular (400).** Markenregel: Baloo wird nie in einer fetteren * Stufe gesetzt — auch nicht SemiBold. Deshalb ist genau ein Schnitt * importiert: Ein vergessenes `font-weight: 600/700` fällt so nicht auf * einen echten fetten Schnitt zurück, sondern bleibt künstlich gefettet * und damit sichtbar falsch. Wo Überschriften stehen, gehört * `font-weight: 400` ausdrücklich dazu — Browser setzen `h1`–`h6` sonst * von sich aus auf 700. * * Fallback bewusst `system-ui`, nicht eine zweite Markenschrift: Wenn Baloo * fehlt, soll das auffallen und nicht durch einen ähnlichen Ersatz kaschiert * werden. */ --nx-font-display: 'Twemoji Country Flags', 'Baloo Chettan 2', system-ui, sans-serif; --nx-font-body: 'Twemoji Country Flags', 'Manrope Variable', Manrope, sans-serif; } /* Hell ist Standard (Entscheidung Phil, 2026-09-07). Bis zum 2026-09-12 stand hier dunkel als Default; die Familienbausteine (brand/web) setzen hell voraus. Ein Projekt, das dunkel zeigen will, setzt data-theme="dark" am Wurzelelement. Auf hellem Grund tragen deep bzw. ink den Kontrast. */ :root, :root[data-theme='light'] { --nx-bg: #fafafa; --nx-bg-raised: #ffffff; --nx-fg: #4b535e; /* Graphit (Phil, 13.09.2026, Fassung C), wie --nx-schrift in familie.css; davor #2c3037 und #1a1d21 */ --nx-fg-muted: #6b7380; --nx-border: #e2e5e9; --nx-mentor: var(--nx-mentor-deep); --nx-connect: var(--nx-connect-ink); --nx-nutria: var(--nx-nutria-ink); --nx-pilot: var(--nx-pilot-deep); --nx-forge: var(--nx-forge-rost); --nx-commerce: var(--nx-commerce-ink); --nx-flow: var(--nx-flow-deep); --nx-karat: var(--nx-karat-ink); --nx-id: var(--nx-id-ink); --nx-atlas: var(--nx-atlas-ink); } /* Dunkel nur per Schalter — semantische Tokens lösen auf base auf */ :root[data-theme='dark'] { --nx-bg: #0d0f12; --nx-bg-raised: #16191e; --nx-fg: #e8eaed; --nx-fg-muted: #9aa1ab; --nx-border: #2a2f37; --nx-mentor: var(--nx-mentor-base); --nx-connect: var(--nx-connect-base); --nx-nutria: var(--nx-nutria-base); --nx-pilot: var(--nx-pilot-base); --nx-forge: var(--nx-forge-base); --nx-commerce: var(--nx-commerce-base); --nx-flow: var(--nx-flow-base); --nx-karat: var(--nx-karat-base); --nx-id: var(--nx-id-base); --nx-atlas: var(--nx-atlas-base); }