/* ============================================================ Theme: Dark v2 — "Calibrated Cool" Override-Schicht auf prodkit-design.css. Bewusster Hue-Lean, refined Cobalt-Sky Accent, getintete Borders, warmes Off-White, subtiler Grain — distanziert sich vom Tailwind-Default-Slop. ============================================================ */ :root[data-theme="dark-v2"]{ /* Neutral scale — minimal Warmlift (R-Kanal +1-2), bleibt kühl */ --pk-gray-0:#ffffff; --pk-gray-50:#f6f7fa; --pk-gray-100:#e8e9ee; /* warmes Off-White (vorher #e6edf3, klar bläulich) */ --pk-gray-200:#c4c8d4; --pk-gray-300:#969aa7; --pk-gray-400:#6a6f7c; --pk-gray-500:#4a4f5b; --pk-gray-600:#333742; --pk-gray-700:#222632; --pk-gray-800:#171b25; --pk-gray-850:#13161e; --pk-gray-900:#0f1219; --pk-gray-950:#0c0f15; /* Base — minimal warmer Lift (vs #0a0d12) */ /* Surfaces — perceptual lightness steps, kein Hue-Sprung */ --pk-bg: var(--pk-gray-950); --pk-bg-surface: var(--pk-gray-900); --pk-bg-elevated: var(--pk-gray-800); --pk-bg-input: #0a0d13; --pk-bg-hover: rgba(146,170,210,.05); /* getintet statt rein weiß */ --pk-bg-active: rgba(146,170,210,.09); /* Borders — getintet mit Accent-Hue, nicht rgba(255,255,255) */ --pk-border-subtle: rgba(120,150,200,.07); --pk-border: rgba(120,150,200,.11); --pk-border-strong: rgba(120,150,200,.18); --pk-border-focus: rgba(58,141,255,.55); /* Text — warmes Off-White, kein reines Grau */ --pk-text: var(--pk-gray-100); --pk-text-secondary: #b6bcc9; --pk-text-muted: #7d8390; --pk-text-disabled: #525762; /* Accent — Cobalt-Sky, cyan-leaning. Confident statt soft */ --pk-accent: #3a8dff; --pk-accent-hover: #5aa0ff; --pk-accent-active: #2877e0; --pk-accent-bg: rgba(58,141,255,.10); --pk-accent-bg-strong: rgba(58,141,255,.16); --pk-accent-border: rgba(58,141,255,.30); --pk-accent-text: #a8c8ff; /* Status — in Dark Mode leicht entsaettigt + lighter (Premium-Tell) */ --pk-success:#4cc66a; --pk-success-bg:rgba(76,198,106,.10); --pk-success-border:rgba(76,198,106,.28); --pk-success-text:#92dca0; --pk-warning:#e0a542; --pk-warning-bg:rgba(224,165,66,.10); --pk-warning-border:rgba(224,165,66,.30); --pk-warning-text:#eac17a; --pk-error:#ff6259; --pk-error-bg:rgba(255,98,89,.10); --pk-error-border:rgba(255,98,89,.30); --pk-error-text:#ffa099; --pk-info:#5fb0ff; --pk-info-bg:rgba(95,176,255,.10); --pk-info-border:rgba(95,176,255,.28); --pk-info-text:#a8cfff; /* Reserved Warm-Highlight — fuer Persoenlichkeit (Set-Pricing, Streaks etc) */ --pk-amber-accent: #d68842; --pk-amber-accent-bg: rgba(214,136,66,.10); --pk-amber-accent-border: rgba(214,136,66,.28); --pk-amber-accent-text: #e6a878; /* Tool accents — re-calibrated, weniger pastel */ --pk-tool-movebase:#3a8dff; --pk-tool-watchcost:#d68842; --pk-tool-mapmark:#4cc66a; --pk-tool-setinfo:#9b6cf2; --pk-tool-overtime:#5fb0ff; --pk-tool-callgap:#e466a3; --pk-tool-callsheetcheck:#52b8eb; /* Selection — neuer Accent-Hue */ --pk-selection:rgba(58,141,255,.30); } /* Body — clean flat bg (radial gradients entfernt fuer cleanen Launcher-Look). Card-Tints bleiben als micro-polish auf einzelnen Surfaces. */ :root[data-theme="dark-v2"] body{ background: var(--pk-bg); } /* Topbar — Frosted mit warmem Tinge */ :root[data-theme="dark-v2"] .pk-topbar{ background:rgba(14,17,24,.78); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid var(--pk-border-subtle); } /* Brand-Mark — Cobalt gradient statt Lavendel-Drift */ :root[data-theme="dark-v2"] .pk-nav__brand-mark{ background:linear-gradient(135deg,#3a8dff 0%,#6db4ff 100%); box-shadow:0 0 0 1px rgba(58,141,255,.25), 0 4px 16px rgba(58,141,255,.18); } /* Focus ring — neuer Accent */ :root[data-theme="dark-v2"] .pk-focus-ring:focus-visible, :root[data-theme="dark-v2"] .pk-btn:focus-visible, :root[data-theme="dark-v2"] .pk-input:focus-visible, :root[data-theme="dark-v2"] .pk-select:focus-visible, :root[data-theme="dark-v2"] .pk-textarea:focus-visible{ box-shadow:0 0 0 3px rgba(58,141,255,.22); } /* Selection */ :root[data-theme="dark-v2"] ::selection{background:var(--pk-selection);color:var(--pk-text)} /* Primary button — confident Cobalt mit minimal mesh-hint */ :root[data-theme="dark-v2"] .pk-btn--primary{ background:linear-gradient(180deg,#3a8dff 0%,#2f7ce8 100%); border-color:#2f7ce8; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.20); } :root[data-theme="dark-v2"] .pk-btn--primary:hover{ background:linear-gradient(180deg,#5aa0ff 0%,#3a8dff 100%); border-color:#3a8dff; } /* HUD-Total — replace soft grey gradient mit subtle accent-tinted */ :root[data-theme="dark-v2"] .pk-hud__total{ background: linear-gradient(180deg,rgba(58,141,255,.06) 0%,transparent 60%), linear-gradient(180deg,var(--pk-bg-elevated) 0%,var(--pk-bg-surface) 100%); border-color:var(--pk-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.30); } /* ─── Subtle Grain Overlay ─────────────────────────────────── Der wichtigste Premium-Tell laut Research. feTurbulence noise, blend overlay, 2.5% opacity. Vermeidet OLED-halation und gleicht banding aus. */ :root[data-theme="dark-v2"] body::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.028; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; } @media (prefers-reduced-motion: reduce){ :root[data-theme="dark-v2"] body::before{opacity:.02} } /* Stage / Card — minimal hue-shift damit Surfaces "leben" */ :root[data-theme="dark-v2"] .pk-stage{ background: linear-gradient(180deg,rgba(58,141,255,.025),transparent 40%), var(--pk-bg-surface); } :root[data-theme="dark-v2"] .pk-card{ background: linear-gradient(180deg,rgba(58,141,255,.020),transparent 40%), var(--pk-bg-surface); } /* Badge-Accent — subtilerer Glow im Akzent */ :root[data-theme="dark-v2"] .pk-badge--accent{ background:var(--pk-accent-bg); border-color:var(--pk-accent-border); color:var(--pk-accent-text); box-shadow:inset 0 0 0 1px rgba(58,141,255,.06); } /* Modal backdrop — leicht waermer Smoke */ :root[data-theme="dark-v2"] .pk-modal{ background:rgba(4,6,12,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } :root[data-theme="dark-v2"] .pk-modal__card{ background:linear-gradient(180deg,rgba(58,141,255,.035),transparent 30%),var(--pk-bg-elevated); }