/* ============================================================================ TGV DESIGN-SYSTEM — TOKEN-SCHICHT (PLAT#06, SSOT) ---------------------------------------------------------------------------- 2 Schichten: ┌ LAYER 1 PRIMITIVES (--p-*) = rohe Palette. Werte aus der LIVE-Quelle │ 06_DASHBOARD/rka_v2.html :root (v2.9.8). NIE direkt in Komponenten │ benutzen — nur die semantische Schicht referenziert sie. └ LAYER 2 SEMANTIK (--c-*, --ent-*, --cls-*, --conf-*, --surface/--text…) = Rolle/Bedeutung → Primitive. KOMPONENTEN benutzen NUR diese. Prinzip: FARBE = BEDEUTUNG (nie Deko). Themes (dark / white-label) tauschen NUR Layer 2 — die Komponenten ändern sich nie. White-Label-Hook: eine Marke darf --c-action (Marken-Primärfarbe) umfärben, ABER die Bedeutungs-Anker bleiben fest: --c-confirm BLEIBT GRÜN · --c-warn amber · --c-danger rot. So heißt „Bestätigen" überall grün, egal welche Marke. DO-NOT-APPLY: reine Design-Schicht. Cockpits ziehen sie später (PLAT#03). ============================================================================ */ /* ───────────────────────── LAYER 1 — PRIMITIVES ─────────────────────────── */ :root { /* Neutrale Flächen / Linien / Tinte (Papier-Look der Cockpits) */ --p-paper: #f7f7f4; --p-white: #ffffff; --p-ink: #23221e; --p-ink-mut: #6b6a63; --p-ink-hint: #92918a; --p-line: #e3e2db; --p-line-2: #cfcec6; /* Akzent-Familien — je Familie ein 700-Stop (Vordergrund) + 50-Stop (Fläche). Werte 1:1 aus rka_v2.html. Dunklere/​hellere Stops für dark-Theme ergänzt. */ --p-blue-800: #114a82; --p-blue-700: #185fa5; --p-blue-300: #7db4e3; --p-blue-50: #e6f1fb; --p-green-800: #2d5410; --p-green-700:#3b6d11; --p-green-300:#9ec97a; --p-green-50:#eaf3de; --p-amber-800: #6a3f08; --p-amber-700:#854f0b; --p-amber-300:#d9a45a; --p-amber-50:#faeeda; --p-red-800: #832323; --p-red-700: #a32d2d; --p-red-300: #d98a8a; --p-red-50: #f7e3e3; --p-coral-800: #7a2f16; --p-coral-700:#993c1d; --p-coral-300:#d39a82; --p-coral-50:#faece7; --p-purple-800: #2e2769; --p-purple-700:#3c3489; --p-purple-300:#9690cf; --p-purple-50:#eeedfe; --p-teal-800: #0b5443; --p-teal-700: #0f6e56; --p-teal-300: #6cb8a4; --p-teal-50: #e1f5ee; --p-gray-800: #45443f; --p-gray-700: #5f5e5a; --p-gray-300: #b6b5ad; --p-gray-50: #f1efe8; /* Selektion (gewählte Zeile/Karte) */ --p-gold: #e3c200; --p-gold-50: #fff7e0; /* ─────────────────────── LAYER 2 — SEMANTIK (LIGHT) ─────────────────────── */ /* Flächen & Tinte */ --bg: var(--p-paper); /* Seiten-Hintergrund */ --surface: var(--p-white); /* Karten / Panels */ --surface-2: var(--p-gray-50); /* eingebettete Felder / Metriken*/ --text: var(--p-ink); --text-muted: var(--p-ink-mut); --text-hint: var(--p-ink-hint); --border: var(--p-line); --border-strong: var(--p-line-2); --selected-bg: var(--p-gold-50); --selected-bd: var(--p-gold); --focus-ring: var(--p-blue-700); /* AKTIONS-ROLLEN (fg = Text/Rahmen · bg = Füllung · ink = Text auf bg) */ --c-action: var(--p-blue-700); --c-action-bg: var(--p-blue-50); --c-action-ink: var(--p-blue-800); --c-confirm: var(--p-green-700); --c-confirm-bg:var(--p-green-50); --c-confirm-ink:var(--p-green-800); /* ⚓ WHITE-LABEL-ANKER: bleibt grün */ --c-warn: var(--p-amber-700); --c-warn-bg: var(--p-amber-50); --c-warn-ink: var(--p-amber-800); --c-danger: var(--p-red-700); --c-danger-bg: var(--p-red-50); --c-danger-ink: var(--p-red-800); --c-neutral: var(--p-gray-700); --c-neutral-bg:var(--p-gray-50); --c-neutral-ink:var(--p-gray-800); /* ── STATUS-ACHSE A — ENTITÄT (wer/welche Firma) ── orthogonal zu Einstufung & Konfidenz. NIE für Status/Sektion zweckentfremden. */ --ent-c3: var(--p-blue-700); --ent-c3-bg: var(--p-blue-50); /* C3 · Convis Consult & Marketing GmbH */ --ent-c4: var(--p-purple-700); --ent-c4-bg: var(--p-purple-50); /* C4 · Convis SARL */ --ent-privat: var(--p-gray-700); --ent-privat-bg: var(--p-gray-50); /* Privat */ /* ── STATUS-ACHSE B — EINSTUFUNG / CONFIDENTIALITY (Sensibilität) ── orthogonal zur Entität: ein Business-Doc KANN sensibel sein (HR/bAV). reuse confidentiality_level (Mig 112+181). Eskalierend public→strict. */ --cls-public: var(--p-gray-700); --cls-public-bg: var(--p-gray-50); --cls-internal: var(--p-teal-700); --cls-internal-bg: var(--p-teal-50); --cls-confidential: var(--p-amber-700); --cls-confidential-bg: var(--p-amber-50); --cls-strict: var(--p-red-700); --cls-strict-bg: var(--p-red-50); /* streng_vertraulich */ /* ── STATUS-ACHSE C — KONFIDENZ (wie sicher ist die Klassifikation) ── orthogonal zu A & B. Wird mit Schloss-Icon kombiniert: bestätigt/gelockt = 🔒. Skala-Entscheid (JC 2026-06-20, gesperrt) → numerische confidence 0..1: high ≥ 0.85 · medium 0.60–0.85 · low < 0.60 · 🔒 (.is-locked) = bestätigt (User/Korroboration), orthogonal zum Zahlenwert. */ --conf-high: var(--p-green-700); --conf-high-bg: var(--p-green-50); --conf-medium: var(--p-amber-700); --conf-medium-bg: var(--p-amber-50); --conf-low: var(--p-coral-700); --conf-low-bg: var(--p-coral-50); --conf-locked: var(--p-ink); /* Schloss-Tinte bei bestätigt */ /* Zahlungs-Hinweise (RKA-Domäne, semantisch eigenständig) */ --pay-private: var(--p-coral-700); --pay-private-bg: var(--p-coral-50); /* privat ausgelegt → Erstattung */ --pay-firm: var(--p-green-700); --pay-firm-bg: var(--p-green-50); /* Firmenkarte → keine Erstattung */ /* ───────────────────────── TYPO / SPACING / FORM ───────────────────────── Skala & Regeln aus dem Style-Guide §2. Sentence-case immer, nie ALL-CAPS. */ --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; /* nur Titel/Beträge — kein 3. Gewicht im Fließtext */ --fs-h1: 22px; --fs-h2: 18px; --fs-h3: 16px; --fs-body: 16px; --fs-small:13px; --fs-micro:11px; /* harte Untergrenze — nie < 11px */ --lh-body: 1.5; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --radius-md: 8px; /* Buttons, Inputs, Chips */ --radius-lg: 12px; /* Karten, Panels */ --bd-width: 1px; --shadow-card: 0 1px 2px rgba(35,34,30,.04), 0 1px 3px rgba(35,34,30,.06); --shadow-pop: 0 4px 16px rgba(35,34,30,.12); color-scheme: light; } /* ───────────────────────── LAYER 2 — SEMANTIK (DARK) ───────────────────────── Nur die semantische Schicht wird umgehängt. Flächen dunkel, Tinte hell, Akzente auf hellere Stops gezogen + Flächen als getönte 800-Stops. */ :root[data-theme="dark"] { --bg: #1b1a17; --surface: #24231f; --surface-2: #2d2c27; --text: #ecebe4; --text-muted: #b6b5ac; --text-hint: #8a897f; --border: #3a3933; --border-strong: #4c4b43; --selected-bg: #3a3414; --selected-bd: var(--p-gold); --focus-ring: var(--p-blue-300); --c-action: var(--p-blue-300); --c-action-bg: #14304d; --c-action-ink: #dcebfb; --c-confirm: var(--p-green-300); --c-confirm-bg:#1e3210; --c-confirm-ink:#e7f3da; /* ⚓ bleibt grün */ --c-warn: var(--p-amber-300); --c-warn-bg: #3a2806; --c-warn-ink: #f7e9cf; --c-danger: var(--p-red-300); --c-danger-bg: #3d1717; --c-danger-ink: #f6dede; --c-neutral: var(--p-gray-300); --c-neutral-bg:#34332d; --c-neutral-ink:#ecebe4; --ent-c3: var(--p-blue-300); --ent-c3-bg: #14304d; --ent-c4: var(--p-purple-300); --ent-c4-bg: #241e52; --ent-privat: var(--p-gray-300); --ent-privat-bg: #34332d; --cls-public: var(--p-gray-300); --cls-public-bg: #34332d; --cls-internal: var(--p-teal-300); --cls-internal-bg: #0c382c; --cls-confidential: var(--p-amber-300); --cls-confidential-bg: #3a2806; --cls-strict: var(--p-red-300); --cls-strict-bg: #3d1717; --conf-high: var(--p-green-300); --conf-high-bg: #1e3210; --conf-medium: var(--p-amber-300); --conf-medium-bg: #3a2806; --conf-low: var(--p-coral-300); --conf-low-bg: #3a2013; --conf-locked: #ecebe4; --pay-private: var(--p-coral-300); --pay-private-bg: #3a2013; --pay-firm: var(--p-green-300); --pay-firm-bg: #1e3210; --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 4px 16px rgba(0,0,0,.55); color-scheme: dark; } /* ════════════════════════════════ WHITE-LABEL / BRAND-LAYER ═══════════════════════ FORMALER MARKEN-VERTRAG (DESIGN#01, 2026-06-20) — was eine Marke überschreiben DARF und was FEST bleibt. Pro Instanz per data-brand="…" auf /. Wirkt in light UND dark, weil nur Layer-2-Rollen getauscht werden — Komponenten nie. ✅ ÜBERSCHREIBBAR (Marken-Identität — „Look"): Akzent --c-action / --c-action-bg / --c-action-ink (Primär/CTA/Links) Fokus --focus-ring Flächen --bg / --surface / --surface-2 (warme vs. kühle Anmutung) Linien --border / --border-strong Selektion --selected-bg / --selected-bd ⚓ ANKER — NIE marken-überschreiben (Bedeutung = überall gleich): --c-confirm* (grün) · --c-warn* (amber) · --c-danger* (rot) · --c-neutral* Status-Achsen --ent-* (Entität) · --cls-* (Einstufung) · --conf-* (Konfidenz) Domänen-Semantik --pay-* u.a. → „Bestätigen" ist überall grün, „streng vertraulich" überall rot, C3 überall blau — egal welche Marke. Re-Branding ändert NUR Look, nie Bedeutung/Funktion (S2/S3). ÜBERSICHT DER MARKEN (Coverage-Map = COVERAGE_MAP.md): (Default, ohne data-brand) = startact-Blau · CORE-Mandant jcbinetti, RKA/Cockpits data-brand="gabriel" = warme Terracotta/Crème · Live-Memory-Mandant (volle Flächen-Marke — überschreibt Akzent UND Flächen) data-brand="megabook" = Lila-Akzent (Beispiel: reine Akzent-Marke, Flächen neutral) ══════════════════════════════════════════════════════════════════════════════════ */ /* ── Marke „GABRIEL" (Live Memory) — VOLLE Flächen-Marke: warme Terracotta auf Crème. Zeigt die tiefe Override-Stufe: Akzent + Flächen + Linien + Selektion. Anker fix. */ :root[data-brand="gabriel"] { /* warme Crème-Flächen statt kühlem Papier */ --bg: #faf5ec; --surface: #fffdf8; --surface-2: #f2e9da; --border: #e7dcc9; --border-strong: #d8c9af; --selected-bg: #fbe7cf; --selected-bd: #d99a3a; /* Terracotta-Akzent */ --c-action: #9a4a28; --c-action-bg: #f6e7de; --c-action-ink: #5c2a15; --focus-ring: #9a4a28; } :root[data-brand="gabriel"][data-theme="dark"] { --bg: #1d1813; --surface: #262019; --surface-2: #2f2820; --border: #3c342a; --border-strong: #4d4335; --selected-bg: #3a2a14; --selected-bd: #d99a3a; --c-action: #e0a07a; --c-action-bg: #3a2013; --c-action-ink: #f8e7dc; --focus-ring: #e0a07a; } /* ── Marke „MEGABOOK" — reine AKZENT-Marke (Lila): nur --c-action + Fokus, Flächen neutral. Beispiel für die leichte Override-Stufe. */ :root[data-brand="megabook"] { --c-action: var(--p-purple-700); --c-action-bg: var(--p-purple-50); --c-action-ink: var(--p-purple-800); --focus-ring: var(--p-purple-700); } :root[data-brand="megabook"][data-theme="dark"] { --c-action: var(--p-purple-300); --c-action-bg: #241e52; --c-action-ink: #e6e3fb; --focus-ring: var(--p-purple-300); }