/* ============================================================================= Wettbewerbsdatenbank - Design-Tokens (seit 2026-09-08) ============================================================================= Der EINZIGE Ort, an dem Farben stehen. app.css, app.js und die Shells verwenden ausschliesslich var(--token); tests/test_theme_tokens.py haelt das fest und rechnet die Kontraste nach (WCAG 2.x: Text 4,5:1, Bedienelemente 3:1). Ein semantischer Satz, zwei Wertesaetze: :root hell - nobank-CI aus ../nobank/webapp/src/index.css (shadcn-Tokens, Akzent Cyan #00D5FF); Canvas eine Stufe grauer als dort, weil Karten hier ohne Rahmen auf dem Canvas liegen :root.dark dunkel - Dirks Dark-Terminal-Palette (2026-07-03: Anthrazit, Amber) mit den Kontrastfixes vom 2026-09-08 und leicht gespreizten Flaechenstufen (Karte vs. Canvas ohne Rahmen erkennbar). Entscheidung Projektleitung 08.09.: nah am Original bleiben. Der Akzent ist damit je Palette verschieden (Cyan hell, Amber dunkel) - bewusst. Cyan auch im Dunkeln waere eine Aenderung der sechs Akzent-Werte in :root.dark (--primary, --primary-hover, --on-primary, --primary-text, --primary-soft, --focus). Gruppierung durch Flaechen, nicht durch Rahmen (Projektleitung 08.09.: "less is more"): Karten sind --panel auf --bg mit --shadow-card (hell) bzw. Tonstufe (dunkel); Eingabefelder sind gefuellt (--input-bg) mit hauchduenner Kante (--border-input), die 3:1-Kante gibt es erst im Fokus (--focus). Struktur-Linien (Sidebar, Header, Detail, Zeilen, Tab-Grundlinien) gibt es nicht mehr. Die Trennung in Text- und Fuellwerte (--amber vs. --amber-text, --primary vs. --primary-text) traegt beide Paletten: eine Fuellung darf Marken-Cyan sein, Text auf Weiss muss 4,5:1 erreichen - das ist ein dunkleres Cyan. Mechanik wie die Webapp (theme-sync.tsx): Klasse .dark auf , color-scheme, theme-color-Meta aus --browser-theme-color. Herleitung/Pruefung der Werte: scripts/dev/theme_palette.py (druckt beide Paletten, rechnet die Paare). ============================================================================= */ :root { color-scheme: light; --browser-theme-color: #f3f4f6; /* Schrift ist Token wie Farbe. Satoshi kommt aus fonts.css (selbst gehostet, Lizenz dort). */ --font-sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Zahlen, Scores, Zaehler, kurze Kennzeichen - jede Regel damit setzt tabular-nums. Entschieden #12 (14.09.): Satoshi-Tabellenziffern, Variante A - keine zweite Webfont. */ --font-num: var(--font-sans); /* Code, URLs, Slugs, Hashes, Protokolle, Kennwoerter - Systemschrift, keine Webfont. */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---- Flaechen ---------------------------------------------------------- */ --bg: #f3f4f6; /* Canvas - grau, damit weisse Karten ohne Rahmen tragen */ --rail: #f9fafb; /* Nav-Rail / Header / Detail-Panel */ --panel: #ffffff; /* Karten / Tabellen (Webapp --card) */ --surface: var(--panel); --panel-soft: #f3f4f6; /* eingelassene Flaechen IN Karten: Kacheln, Slug-Pills */ --panel-inset: #f6f7f9; /* Baender IN Karten: Pagination, Gruppenkopf */ --table-head: #f6f7f9; /* Sticky Tabellenkopf */ --bg-soft: #eceff2; /* tonale Buttons, Hover, graue Pills, Toast */ --bg-soft-hover: #e2e6ea; --segment-active: #ffffff;/* aktives Segment im Umschalter (Konsolidiert/Roh) */ --input-bg: #f3f4f6; /* gefuelltes Eingabefeld auf weisser Karte */ --row-hover: #f6f7f9; --row-selected: #e0faff; /* 12 % Cyan auf Weiss, plus 2-px-Kante in --primary (app.css) */ /* ---- Linien (nur noch Kanten von Feldern und SVG-Ringe) ---------------- */ --border: #e5e8ec; /* leerer Score-/Donut-Ring */ --border-input: #e1e5ea; /* Ruhe-Kante gefuellter Felder, bewusst hauchduenn */ --focus: var(--primary-text); /* Fokus-Kante: 3:1 (5,4 auf dem Feld) */ --track: #78858f; /* Toggle aus, Achsen, leerer Score-Ring: 3:1 */ --knob: #ffffff; --scroll-thumb: #c5cad1; --scroll-thumb-hover: #a9b0b8; /* ---- Text -------------------------------------------------------------- */ --text: #0a0a0a; /* Webapp --foreground */ --text-2: #2a2e33; --text-muted: #5b616b; --text-soft: #626873; /* "--", Zaehler, Sub-Zeilen, Tabellenkopf-Pfeil */ --text-faint: #626873; /* Tastenkuerzel in der Suche */ /* ---- Marke / Akzent ---------------------------------------------------- */ --primary: #00d5ff; /* nobank Cyan - Fuellung: Buttons, Kanten, Avatar, Toggle an */ --primary-hover: #00bfe6; --on-primary: #020e1b; /* Text auf Cyan ist dunkel, nicht weiss (Webapp --primary-surface-foreground) */ --primary-text: #006c8b; /* Akzent als TEXT: 4,5:1 auf Weiss (Webapp --primary-text-strong, etwas dunkler) */ --primary-soft: #dbf9ff; /* Nav aktiv, Chips: 14 % Cyan auf Weiss */ /* ---- Status: Fuellung / weicher Hintergrund / Text --------------------- */ --green: #287a4d; --green-soft: #e2f3e8; --green-text: #1b6b3f; --amber: #bf8312; --amber-soft: #fbf0d5; --amber-text: #7d5200; --amber-border: #e8d3a3; --amber-deep: #fff8e6; --red: #c9352a; --red-soft: #fbe6e4; --red-text: #a3251d; --purple: #7a5bc2; --purple-soft: #eee8fa; --purple-text: #5a3ea0; --purple-deep: #f6f2fc; --cyan: #2a9d8f; --cyan-soft: #def3ef; --cyan-text: #146a5f; /* Tuerkis (Convenience), nicht das Marken-Cyan */ --blue: #4f87a5; --blue-soft: #e5eff7; --blue-text: #245b82; --orange: #c2410c; /* bank_key-Konfidenz "niedrig" (nur Rahmen) */ --on-status: #ffffff; /* Text auf --green/--red-Vollflaeche */ --accent-blue: var(--blue-text); /* Dimensions-Farbcodierung (Preis / Leistung / Convenience) */ --dim-preis: var(--amber-text); --dim-leistung: var(--blue-text); --dim-conv: var(--cyan-text); /* ---- Ebenen ------------------------------------------------------------ */ --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05); --overlay: rgba(15,20,30,.45); --shadow-pop: 0 8px 24px rgba(20,30,45,.18); --shadow-modal: 0 24px 60px rgba(20,30,45,.25); /* ---- Masse ------------------------------------------------------------- */ --sidebar-w: 236px; --detail-w: 392px; --header-h: 52px; } /* Dunkel: Dirks Werte. Bewegt haben sich nur die durchgefallenen Tokens (Track, --text-soft/-faint) und die Flaechenstufen Rail/Karte/Hover, damit Karten ohne Rahmen auf dem Canvas erkennbar sind (vorher 1,05:1). Kein Karten-Schatten. */ :root.dark { color-scheme: dark; --browser-theme-color: #0a0d14; --bg: #0a0d14; --rail: #0e121b; --panel: #141a24; --panel-soft: #0c1018; --panel-inset: #10151f; --table-head: #10151f; --bg-soft: #1c2431; --bg-soft-hover: #242e3d; --segment-active: #242e3d; --input-bg: #0c1018; --row-hover: #1a2130; --row-selected: #1f2838; --border: #232d3b; --border-input: #2a3547; /* Dirks Wert; die 3:1-Kante ist der Fokus */ --focus: var(--primary); --track: #66768e; --knob: #e6eaf0; --scroll-thumb: #2f3b4d; --scroll-thumb-hover: #3d4b60; --text: #e8edf4; --text-2: #c3cdda; --text-muted: #8b97ab; --text-soft: #8390a3; --text-faint: #8390a3; --primary: #f2b03d; /* Amber, wie im Original */ --primary-hover: #f7c05f; --on-primary: #0a0d14; --primary-text: #f2b03d; --primary-soft: #1a1408; --green: #46c26a; --green-soft: #0f2318; --green-text: #5ad18c; --amber: #e0a94a; --amber-soft: #241d0f; --amber-text: #e0a94a; --amber-border: #3a2f10; --amber-deep: #161206; --red: #f2564b; --red-soft: #2a1414; --red-text: #f08080; --purple: #b58cf0; --purple-soft: #221434; --purple-text: #b58cf0; --purple-deep: #1c1630; --cyan: #5ad1a8; --cyan-soft: #0d211a; --cyan-text: #5ad1a8; --blue: #8ea0f5; --blue-soft: #12172e; --blue-text: #8ea0f5; --orange: #c2703a; --on-status: #0a0d14; --shadow-card: 0 0 0 0 rgba(0,0,0,0); --overlay: rgba(0,0,0,.55); --shadow-pop: 0 8px 24px rgba(0,0,0,.5); --shadow-modal: 0 24px 60px rgba(0,0,0,.6); }