/* * FinNavigator — Design-Token-System (Dark + Light) * Erzeugt aus: docs/FinNavigator-DesignTokens.md (Stand 24.05.2026) * * EINZIGE Quelle für Hex-/rgb-/rgba-Werte. Überall sonst (Komponenten, Razor, * app.css, Scoped-CSS) gilt: ausschließlich var(--fn-*)-Tokens, keine rohen Farben, * keine Inline-Styles. Werteänderungen zuerst in der .md eintragen, dann hier angleichen. * * Aktivierung: (Dark = FIN-Default) * (Light-Variante) */ :root, [data-design="finnavigator"].dark-mode { /* ===== FinNavigator — Dark (Default) ===== */ --fn-bg:#0a1220; --fn-bg-alt:#0c1626; --fn-bg-muted:#0f1b2d; --fn-surface:#11203a; --fn-surface-alt:#12233d; --fn-hover:#16294a; --fn-input-bg:#152035; --fn-input-border:rgba(200,220,255,0.14); --fn-text:#e9eef8; --fn-text-secondary:#8493ac; --fn-text-tertiary:#5b6a82; --fn-on-primary:#06121f;--fn-primary:#5cc8ff; --fn-primary-hover:#7ad3ff; --fn-success:#4ade80; --fn-warning:#fbbf24; --fn-danger:#f87171; --fn-info:#60a5fa; --fn-accent-soft:rgba(92,200,255,0.10); --fn-success-soft:rgba(74,222,128,0.10); --fn-warning-soft:rgba(251,191,36,0.10); --fn-danger-soft:rgba(248,113,113,0.10); --fn-info-soft:rgba(96,165,250,0.10); --fn-border:#1b2840; --fn-border-strong:#27395a; --fn-accent-line:rgba(92,200,255,0.30); --fn-cat-blue:#60a5fa; --fn-cat-purple:#a78bfa; --fn-cat-pink:#f472b6; --fn-cat-orange:#fb923c; --fn-cat-gold:#fbbf24; --fn-cat-teal:#2dd4bf; --fn-cat-blue-soft:rgba(96,165,250,0.14); --fn-cat-purple-soft:rgba(167,139,250,0.14); --fn-cat-pink-soft:rgba(244,114,182,0.14); --fn-cat-orange-soft:rgba(251,146,60,0.14); --fn-cat-gold-soft:rgba(251,191,36,0.14); --fn-cat-teal-soft:rgba(45,212,191,0.14); --fn-shadow:rgba(0,0,0,0.25); --fn-shadow-hover:rgba(0,0,0,0.40); --fn-elevation-1:0 1px 4px rgba(0,0,0,0.25); --fn-elevation-2:0 2px 8px rgba(0,0,0,0.30); --fn-elevation-3:0 6px 20px rgba(0,0,0,0.35); /* Bereichs-Tokens — RPO-Stack (Security-Detail / Fundamentals-Tab). */ --fn-rpo-current:#16a34a; --fn-rpo-noncurrent:#86efac; /* Bereichs-Tokens — Event-Ampel (AlphaDNA Event Radar, EventStatusBadge). */ --fn-event-green:#4ade80; --fn-event-yellow:#fde047; --fn-event-orange:#fb923c; --fn-event-red:#f87171; --fn-event-black:#05080d; --fn-event-black-ring:rgba(248,113,113,0.85); } [data-design="finnavigator"]:not(.dark-mode) { /* ===== FinNavigator — Light ===== */ --fn-bg:#f4f7fb; --fn-bg-alt:#ffffff; --fn-bg-muted:#e9eef5; --fn-surface:#ffffff; --fn-surface-alt:#f1f5fa; --fn-hover:#e6edf6; --fn-input-bg:#ffffff; --fn-input-border:rgba(10,30,60,0.16); --fn-text:#0d1b2e; --fn-text-secondary:#4a5a72; --fn-text-tertiary:#8090a6; --fn-on-primary:#ffffff;--fn-primary:#1583c2; --fn-primary-hover:#0f6ba0; --fn-success:#12b76a; --fn-warning:#dc6803; --fn-danger:#d92d20; --fn-info:#2e90fa; --fn-accent-soft:rgba(21,131,194,0.08); --fn-success-soft:rgba(18,183,106,0.08); --fn-warning-soft:rgba(220,104,3,0.08); --fn-danger-soft:rgba(217,45,32,0.08); --fn-info-soft:rgba(46,144,250,0.08); --fn-border:rgba(10,30,60,0.10); --fn-border-strong:rgba(10,30,60,0.18); --fn-accent-line:rgba(21,131,194,0.30); --fn-cat-blue:#2e90fa; --fn-cat-purple:#7c5cff; --fn-cat-pink:#db2777; --fn-cat-orange:#ea7317; --fn-cat-gold:#d99a06; --fn-cat-teal:#0d9488; --fn-cat-blue-soft:rgba(46,144,250,0.10); --fn-cat-purple-soft:rgba(124,92,255,0.10); --fn-cat-pink-soft:rgba(219,39,119,0.10); --fn-cat-orange-soft:rgba(234,115,23,0.10); --fn-cat-gold-soft:rgba(217,154,6,0.10); --fn-cat-teal-soft:rgba(13,148,136,0.10); --fn-shadow:rgba(0,0,0,0.05); --fn-shadow-hover:rgba(0,0,0,0.10); --fn-elevation-1:0 1px 2px rgba(0,0,0,0.05); --fn-elevation-2:0 2px 6px rgba(0,0,0,0.08); --fn-elevation-3:0 6px 16px rgba(0,0,0,0.10); /* Bereichs-Tokens — RPO-Stack (Security-Detail / Fundamentals-Tab). */ --fn-rpo-current:#047857; --fn-rpo-noncurrent:#6ee7b7; /* Bereichs-Tokens — Event-Ampel (AlphaDNA Event Radar, EventStatusBadge). */ --fn-event-green:#12b76a; --fn-event-yellow:#eab308; --fn-event-orange:#ea7317; --fn-event-red:#d92d20; --fn-event-black:#0a0a0a; --fn-event-black-ring:rgba(217,45,32,0.85); } :root, [data-design="finnavigator"] { /* ===== Typografie & Geometrie (modusunabhängig) ===== */ --fn-font:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --fn-font-mono:'IBM Plex Mono', ui-monospace, monospace; --fn-font-weight-regular:400; --fn-font-weight-medium:500; --fn-font-weight-bold:600; --fn-radius-sm:10px; --fn-radius:12px; --fn-radius-lg:14px; --fn-radius-pill:999px; --fn-radius-round:50%; --fn-border-width:1px; --fn-focus-ring:0 0 0 3px rgba(92,200,255,0.25); }