/* GENERIERT aus /Users/jeremy/.claude/standards/design/tokens/semantic.css — nicht von Hand ändern. Neu holen: node /Users/jeremy/.claude/standards/design/scripts/install.mjs Global gültig. Lokale Abweichungen gehören NICHT hierher, sondern in eine eigene Datei daneben, die nach diesem Generat geladen wird. */ /* SEMANTIC — die einzige Ebene, die Komponenten benutzen dürfen. * * Prinzip: Fläche und die darauf garantiert lesbare Textfarbe kommen als PAAR. * Wer immer das Paar nimmt, kann nicht falsch kombinieren — das ist der * eigentliche Kontrast-Mechanismus, nicht die Prüfung hinterher. * * Namenslogik folgt shadcn/ui (fläche / fläche-foreground), weil Agents darauf * trainiert sind und die Fehlerquote dort am kleinsten ist. * * Diese Datei ist von Hand gepflegt und referenziert NUR Primitives. * Referenzrichtung strikt einseitig: primitives ← semantic ← Komponente. * NIEMALS umgekehrt, niemals ein roher Farbwert hier drin. */ :root { /* ═══ FLÄCHEN ══════════════════════════════════════════════════════════ */ --background: var(--navy-1); /* Seitengrund */ --foreground: var(--navy-12); /* Haupttext darauf */ --surface-subtle: var(--navy-2); /* Sidebar, abgesetzter Bereich */ --surface: var(--navy-3); /* Card, Zeile, Input im Ruhezustand */ --surface-foreground: var(--navy-12); --surface-hover: var(--navy-4); --surface-active: var(--navy-5); /* selektierte Zeile */ --muted-foreground: var(--navy-11); /* Sekundärtext, Labels */ /* ═══ RÄNDER ═══════════════════════════════════════════════════════════ Ein Rand bedeutet: hier ist eine Grenze oder etwas Bedienbares. Er bedeutet NICHT Erhebung — das macht der Schatten. */ /* Eine Stufe leiser als zuvor (war 6 und 7). Angeglichen an intelli-os, dessen Ränder halbtransparentes Weiss sind: 0.07 und 0.13 über der Fläche ergeben #2c3137 und #3a3e44 — das sind auf unserer Skala Stufe 5 und 6, nachgemessen mit Farbabstand 7 bzw. 3. Als Skalenstufe notiert, nicht als Transparenz: derselbe Anblick, aber der Rand wirkt über jeder Fläche gleich stark. Kontrastpflicht haben diese beiden keine — sie trennen, sie tragen keine Information. */ --border-subtle: var(--navy-5); /* Trennlinie innerhalb einer Fläche */ --border: var(--navy-6); /* Abgrenzung zwischen Bereichen */ /* BLEIBT auf Stufe 8. Gemessen 3.00:1 gegen die Fläche — exakt die Grenze aus WCAG 1.4.11. Der intelli-os-Wert entspricht 1.73 und fällt durch; das ist die eine Stelle, an der wir ihnen NICHT folgen. */ --border-control: var(--navy-8); /* Input, Control — erfüllt WCAG 1.4.11 */ /* ═══ ERHEBUNG ═════════════════════════════════════════════════════════ Flächen sind randlos. Getragen wird die Erhebung vom Tonwechsel plus einem weichen Schatten. Das funktioniert nur, weil der Grund MATT ist und nicht near-black — auf near-black wäre der Schatten unsichtbar und man bräuchte Ränder. Siehe DECISIONS.md. */ --shadow-raised: 0 1px 4px rgb(0 0 0 / 0.30); --shadow-float: 0 10px 30px rgb(0 0 0 / 0.45); /* Angefasst und in Bearbeitung — zwei Zustände, die eine Fläche über ihre Ruhelage hebt. Aus intelli-os, wo die Notizkarte beides zeigt. Der Bearbeiten-Zustand ist bewusst ein farbiger Schein und KEIN Ring: ein Ring verschiebt das Papier um seine eigene Breite und der Text springt. Über color-mix aus dem Akzent gerechnet, damit hier kein zweiter Farbwert entsteht. */ --shadow-hover: 0 4px 14px rgb(0 0 0 / 0.40); --shadow-edit: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 28px color-mix(in srgb, var(--accent) 30%, transparent); /* Eingelassen: Eingabefelder liegen TIEFER als die Fläche, auf der sie sitzen. Der Innenschatten macht die Mulde sichtbar, ohne einen Rand zu brauchen — das war der Grund, warum die Felder auf der Auth-Karte verschwanden. */ /* Kein Ring — das Feld wird durch seine hellere Füllung und einen weichen Schatten von oben erkennbar. Eine Linie um das Feld liest sich als Rahmen und widerspricht der randlosen Sprache. */ /* Angehoben am 18.08.2026 von 0.30: auf der Karte, wo Fläche und Feld nur eine Tonstufe trennt, war die Mulde kaum zu sehen. Der Rand bleibt aus. */ --inset-shadow: inset 0 2px 5px rgb(0 0 0 / 0.38); /* ═══ MATT-PAPIER ══════════════════════════════════════════════════════ Die Anatomie jeder Flaeche: eine matte Aufhellung ueber dem Grund, ein schwaches Sheen-Radial aus der unteren Ecke, darueber ein feines Korn. Zusammen ergibt das Papier statt Plastik — eine grosse Flaeche in einem einzigen Flachton wirkt tot, weil ihr die Unregelmaessigkeit fehlt, an der das Auge Material erkennt. Aus intelli-os geerntet, wo es seit je traegt. Auf Light invertiert: Tinte statt Licht, und leiser, weil eine Aufhellung auf hellem Grund nichts mehr aufhellen kann. Es gab hier zwei Sätze — `--surface-sheen`/`--surface-grain` aus einer früheren Ernte und diesen. Fünf Bauteile trugen den Schimmer dadurch doppelt, mit zwei verschiedenen Werten. Ein Satz, ihre Namen. Das Korn ist eine FERTIGE BILDEBENE und keine Deckkraft, weil es sonst ein `::after` bräuchte — und ein `::after` scrollt in einer Fläche, die intern scrollt, mit dem Inhalt weg. Als Bildebene bleibt es am Kasten kleben (`background-attachment: scroll` bezieht sich auf den Kasten, nicht auf den Inhalt). Denselben Weg geht intelli-os an ihrer scrollenden Board-Spalte, mit dem Grund wörtlich im Kommentar (`ui/board.css:57`). Die Stärke steht deshalb zweimal: als Zahl in `--mat-grain` und in die SVG-Zeichenkette eingebacken. Eine CSS-Variable lässt sich nicht in eine data-URI hineinrechnen — das ist der Preis der Bildebene. Wer die Zahl ändert, ändert beide. Bei intelli-os sind die beiden bereits auseinander- gelaufen (0.07 in der Spalte gegen 0.055/0.075 im Token); hier nicht. */ --mat-base: rgb(255 255 255 / 0.05); --mat-sheen: rgb(255 255 255 / 0.04); --mat-grain: 0.075; --mat-grain-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.075'/%3E%3C/svg%3E"); /* ═══ RASTER auf der Navigationsfläche ═════════════════════════════════ Ein feines Gitter, das oben links kräftig ist und zur unteren Ecke ausläuft. Ohne die Maske wird es eine Tapete — mit ihr ist es das, was die Seitenleiste als Fläche erkennbar macht, ohne sie zu beschriften. Exakt aus intelli-os übernommen (`.shell-nav::before`), inklusive der Werte: 30px Teilung, 0.5px Strich, 14px Versatz, Ellipse bis 41 %. Die Linienfarbe ist bei ihnen halbtransparentes Weiss; hier eine feste Skalenstufe, damit sie über jeder Fläche gleich stark wirkt. */ --grid-line: var(--navy-5); --grid-size: 30px; --grid-width: 0.5px; --grid-offset: 14px; --grid-mask: radial-gradient(ellipse at 0% 0%, rgb(0 0 0) 0%, transparent 41%); /* ═══ PRIMÄRAKTION ═════════════════════════════════════════════════════ Brand, weil es als einzige Ankerfarbe in BEIDEN Modi weisse Schrift trägt. */ --primary: var(--brand-9); --primary-foreground: #ffffff; --primary-hover: var(--brand-10); /* ═══ AKZENT ═══════════════════════════════════════════════════════════ Identitätsmarker: Fokus, Selektion, Links, aktive Nav. NIE grossflächig. */ --accent: var(--teal-9); /* gefüllte Akzentfläche */ --accent-foreground: var(--navy-1); /* dunkle Schrift — weiss fällt durch */ --accent-hover: var(--teal-10); --accent-text: var(--teal-11); /* Links, Akzentschrift im Fliesstext */ /* Volle Stufe für den AKTIVEN Zustand. Stufe 11 ist die gedämpfte Textfarbe — auf einer selektierten Zeile wirkt sie matt, und sie ist dort auch nicht gelöst (siehe DECISIONS.md). Stufe 12 ist die volle Textfarbe der Skala und trägt auf jeder Flächenstufe mit grossem Abstand. */ --accent-text-strong: var(--teal-12); --accent-surface: var(--teal-3); /* Selektion, aktive Zeile */ --accent-border: var(--teal-6); /* Eine Stufe lauter: für Ränder, die etwas BEHAUPTEN statt zu trennen — der gestrichelte Rand des Vorschlags-Chips. Stufe 6 verschwindet dort. */ --accent-border-strong: var(--teal-7); --ring: var(--teal-8); /* Fokusring */ /* ═══ DIAGRAMME ════════════════════════════════════════════════════════ Balken sind EIN Gruen mit Verlauf: Fuss dunkel, Spitze hell. Wie weit ein Balken die Rampe hinauflaeuft, haengt an seiner Laenge — der Verlauf traegt damit dieselbe Aussage wie die Hoehe und behauptet keine zweite Dimension. Auf Dark startet die Rampe eine Stufe hoeher: tiefes Gruen verschwindet sonst im Grund. Serienfarben fuer mehrere Reihen kommen aus categorical.css, nicht von hier. */ --chart-bar-from: var(--brand-10); --chart-bar-to: var(--brand-11); /* ═══ STATUS ═══════════════════════════════════════════════════════════ Vier Rollen je Bedeutung: Fläche · Text darauf · Rand · Solid. Der Badge nimmt Stufe 3 als Fläche und Stufe 11 als Schrift — also die GEDÄMPFTE Richtung in beiden Modi. Die frühere Umkehr (helle Fläche, dunkle Schrift) stach zwar heraus, wirkte auf Dark aber als greller Fremdkörper: eine leuchtende Kachel mit fast schwarzem Text in einer ruhigen Zeile. Kontrast tragen beide Varianten (>5:1), es ist eine Entscheidung über Lautstärke, nicht über Lesbarkeit. Bedeutungen und Zuordnung stehen in standards/01-color.md. */ --info-surface: var(--blue-3); --info-foreground: var(--blue-11); --info-border: var(--blue-6); --info-solid: var(--blue-9); --info-badge: var(--blue-3); --info-badge-foreground: var(--blue-11); --warning-surface: var(--amber-3); --warning-foreground: var(--amber-11); --warning-border: var(--amber-6); --warning-solid: var(--amber-9); --warning-badge: var(--amber-3); --warning-badge-foreground: var(--amber-11); --success-surface: var(--green-3); --success-foreground: var(--green-11); --success-border: var(--green-6); --success-solid: var(--green-9); --success-badge: var(--green-3); --success-badge-foreground: var(--green-11); --danger-surface: var(--red-3); --danger-foreground: var(--red-11); --danger-border: var(--red-6); --danger-solid: var(--red-9); --danger-badge: var(--red-3); --danger-badge-foreground: var(--red-11); /* Neutraler Status: erledigt und nicht mehr interessant. */ --neutral-surface: var(--navy-3); --neutral-foreground: var(--navy-11); --neutral-border: var(--navy-6); --neutral-badge: var(--navy-3); --neutral-badge-foreground: var(--navy-11); /* ═══ DEAKTIVIERT ══════════════════════════════════════════════════════ */ --disabled-surface: var(--navy-3); --disabled-foreground: var(--navy-8); /* ═══ ÜBERLAGERUNG ═════════════════════════════════════════════════════ */ --overlay-scrim: rgb(0 0 0 / 0.6); --popover: var(--navy-3); --popover-foreground: var(--navy-12); /* ═══ UMGEKEHRTE FLÄCHE ════════════════════════════════════════════════ Die Auswahlleiste über markiertem Text ist in BEIDEN Modi dunkel. Sie gehört zur AUSWAHL, nicht zur Seite — deshalb dreht sie nicht mit. Das ist dieselbe Regel wie beim Papier, nur andersherum, und sie steht aus demselben Grund als fester Wert: eine modus-feste Rolle kann nicht auf eine Skala zeigen, die sich umdreht. Aus intelli-os (`.seltool`). Die gedämpfte Schrift ist ihr 75-%-Weiss als solide Stufe gerechnet (über beiden Gründen praktisch derselbe Ton, deshalb ein Wert). */ --inverse-surface: #2a323d; --inverse-surface-hover: #464a54; --inverse-foreground: #ffffff; --inverse-muted-foreground: #c7c9cc; --inverse-shadow: 0 10px 30px rgb(0 0 0 / 0.50); /* ═══ PAPIER ═══════════════════════════════════════════════════════════ Belege — Rechnung, Angebot, Lieferschein — sind IMMER hell und druckecht. Diese Rollen werden im Dark-Modus bewusst NICHT überschrieben: ein Beleg ist weiss, auch wenn die App dunkel ist. Aus intelli-os übernommen. */ --paper: #ffffff; --paper-ink: #1a1a1a; --paper-muted: #666666; --paper-line: #d9d9d9; --paper-line-strong: #1a1a1a; /* Die Papier-Leiter. Eigene Einheiten, weil ein Beleg gedruckt wird: mm für Masse, pt für Schrift. Die px-Leiter der Oberfläche gilt hier NICHT — sie ist an einen Bildschirm gebunden, das Blatt nicht. */ --paper-width: 210mm; --paper-height: 297mm; --paper-margin-x: 20mm; --paper-margin-y: 16mm; --paper-margin-window: 34mm; /* Kopfabstand, damit die Adresse ins Sichtfenster fällt */ --paper-text-body: 10.5pt; --paper-text-table: 10pt; --paper-text-lead: 12pt; /* Titel, Betreff, Abschnittstitel */ --paper-text-foot: 8pt; --paper-leading: 1.45; /* Inline-Bearbeiten auf dem Blatt. Aus intelli-os (--paper-edit-bg/-ring), dort noch als rgba. Hier über color-mix aus dem Akzent, damit kein zweiter Farbwert entsteht. */ --paper-edit: color-mix(in srgb, var(--accent) 8%, transparent); --paper-edit-ring: color-mix(in srgb, var(--accent) 40%, transparent); /* ═══ MARKER ═══════════════════════════════════════════════════════════ Textmarker über Fliesstext: Suchtreffer, Fundstellen, Anmerkungen. Dieselbe Regel wie beim Papier — in BEIDEN Modi gleich. Ein Marker ist deckendes Pigment, er dreht sich nicht um, wenn das Licht ausgeht. Die Schrift darauf ist deshalb immer dunkel; helle Schrift verschwindet im Neon. NICHT die Gelb-Skala aus `categorical.css`: die ist für Badges und Diagramme gebaut und im Dunkelmodus ein dunkles Oliv. Ein Marker, den man suchen muss, ist keiner. Zwei Stufen, wie in jedem Browser: alle Fundstellen gelb, die aktuelle orange. Ohne die zweite sieht die Stelle, zu der man gesprungen ist, aus wie zehn andere. */ --marker: #fff23d; --marker-jetzt: #ffa53d; --marker-ink: #1a1a1a; /* ═══ ABSTAND als Beziehung ════════════════════════════════════════════ NIE eine Zahl wählen. Immer die Beziehung benennen. */ --space-inline: var(--space-1); /* Icon neben Text */ --space-stack: var(--space-2); /* Zeilen untereinander */ --space-inset: var(--space-3); /* Innenabstand kompakter Flächen */ --space-group: var(--space-4); /* Karte neben Karte */ --space-section: var(--space-5); /* Sektion gegen Sektion */ --space-page: var(--space-6); /* Seitenrand */ } /* ═══ LIGHT ═════════════════════════════════════════════════════════════ Nur die Rollen, deren Stufe sich umkehrt. Alles andere erbt, weil die Primitives in html.light bereits umgeschrieben sind. Zwei echte Unterschiede: 1. Auf hellem Grund trägt der Schatten die Elevation, nicht der Rand. 2. Nur Brand trägt im Light-Modus Text auf gefüllter Fläche — mittelhelle Farben schaffen weder mit Weiss noch mit Schwarz 4.5:1. Status erscheint dort als Badge, nicht als gefüllte Fläche. */ html.light { /* Dunkle Schrift auf gefülltem Teal, weil Weiss dort nur 3.62:1 trägt. ACHTUNG: auch dieser Wert erreicht kein AA. --accent ALS GEFÜLLTE FLÄCHE MIT TEXT IST IM LIGHT-MODUS VERBOTEN — dafür ist --primary da. Der Token bleibt für Punkte, Balken und Ränder, die keinen Text tragen. */ --accent-foreground: var(--navy-12); --grid-line: var(--navy-4); --shadow-raised: 0 1px 4px rgb(0 0 0 / 0.04); --shadow-float: 0 8px 24px rgb(0 0 0 / 0.06); --shadow-hover: 0 4px 12px rgb(0 0 0 / 0.06); --shadow-edit: 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent), 0 6px 28px color-mix(in srgb, var(--accent) 22%, transparent); --overlay-scrim: rgb(0 0 0 / 0.35); /* Auf hellem Grund ist die umgekehrte Fläche fast schwarz, und ihr Schatten muss dreimal so kräftig sein wie der allgemeine Schwebe-Schatten: 6 % verschwinden unter einer dunklen Fläche restlos. Beides aus intelli-os. */ --inverse-surface: #111826; --inverse-surface-hover: #2e323b; --inverse-shadow: 0 8px 24px rgb(0 0 0 / 0.18); /* Auf hellem Grund tönt der Schimmer nach unten statt nach oben, und das Korn darf leiser sein — helle Flächen zeigen Rauschen deutlicher. */ /* Angehoben am 18.08.2026 von 0.09. Auf Weiss trug der Schatten praktisch nichts, und ein Feld, das man erst beim Klicken findet, ist keines. Immer noch leiser als im Dunkeln: auf hellem Grund fällt jeder Schatten mehr auf. */ --inset-shadow: inset 0 2px 5px rgb(26 35 50 / 0.18); /* Diagramme: im Light Mode reicht das dunkle Logo-Gruen bis ins Mint. */ --chart-bar-from: var(--brand-9); --chart-bar-to: var(--brand-8); /* Matt-Papier auf Light: Tinte statt Licht, und leiser. Die Bildebene trägt dieselbe Zahl wie `--mat-grain`, siehe den Block oben. */ --mat-base: rgb(26 35 50 / 0.035); --mat-sheen: rgb(26 35 50 / 0.02); --mat-grain: 0.055; --mat-grain-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); }