/* tokens.css - JEDYNE zrodlo stylu. 3 motywy: dark / slate (szary) / light (jasny). * Motyw ustawiany przez atrybut data-theme na . Zero inline styles. */ :root, [data-theme="dark"] { --bg: #0B0F14; --surface: #151B23; --surface-2: #1B232D; --border: #232B36; --text: #E6EDF3; --text-muted: #8B97A7; --accent: #4C8DFF; --accent-soft: rgba(76, 141, 255, 0.14); --green: #2ECC71; --yellow: #F5C518; --red: #FF5C5C; --nodata: #6B7685; --green-soft: rgba(46,204,113,0.12); --yellow-soft: rgba(245,197,24,0.12); --red-soft: rgba(255,92,92,0.12); --nodata-soft: rgba(107,118,133,0.12); --topbar-bg: linear-gradient(180deg, #11161d, #0d1117); --sidebar-bg: #0d1117; --kpi-bg: linear-gradient(180deg, #161c25, #131922); --code-bg: #0a0d11; } /* SZARY - jasniejszy, nie tak ciemny */ [data-theme="slate"] { --bg: #232834; --surface: #2c323f; --surface-2: #353c4a; --border: #3d4655; --text: #eef2f7; --text-muted: #aab4c2; --accent: #5b9bff; --accent-soft: rgba(91,155,255,0.16); --green: #34d27f; --yellow: #f5c518; --red: #ff6b6b; --nodata: #8b95a5; --green-soft: rgba(52,210,127,0.14); --yellow-soft: rgba(245,197,24,0.14); --red-soft: rgba(255,107,107,0.14); --nodata-soft: rgba(139,149,165,0.16); --topbar-bg: linear-gradient(180deg, #2a3140, #252b38); --sidebar-bg: #262c38; --kpi-bg: linear-gradient(180deg, #2f3744, #2a313d); --code-bg: #1c2029; } /* JASNY */ [data-theme="light"] { --bg: #eef1f6; --surface: #ffffff; --surface-2: #f1f4f9; --border: #dce3ec; --text: #1a2230; --text-muted: #5b6675; --accent: #2563eb; --accent-soft: rgba(37,99,235,0.10); --green: #16a34a; --yellow: #d97706; --red: #dc2626; --nodata: #94a3b8; --green-soft: rgba(22,163,74,0.12); --yellow-soft: rgba(217,119,6,0.14); --red-soft: rgba(220,38,38,0.10); --nodata-soft: rgba(148,163,184,0.16); --topbar-bg: #ffffff; --sidebar-bg: #f7f9fc; --kpi-bg: linear-gradient(180deg, #ffffff, #f4f7fb); --code-bg: #f1f4f9; } :root { --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --r-card: 12px; --r-el: 8px; --r-dot: 999px; } html { background: var(--bg); }