/* theme.css — accent themes ported from the 3SKID desktop app, for the website. Each theme sets BOTH token systems so one selection colours the whole site: • --skid-accent-rgb → the app workspace (style.css / credits5gb.css / web.css) • --accent/-2/-deep/-ink + --glow → the marketing landing (landing.css) Selected via [data-accent] on , persisted to localStorage '3skid_accent'. Loaded AFTER each page's own CSS so these win over the base + light-mode accent defaults. Default (no data-accent) stays the page's own accent. */ :root[data-accent="bmw-blue"] { --skid-accent-rgb: 200,200,255; --glow: 200,200,255; --accent:#c8c8ff; --accent-2:#e0e0ff; --accent-deep:#9a9ae6; --accent-ink:#0a0a1a; } :root[data-accent="pure-white"] { --skid-accent-rgb: 255,255,255; --glow: 236,236,246; --accent:#ffffff; --accent-2:#ffffff; --accent-deep:#c6c6d2; --accent-ink:#0a0a0a; } :root[data-accent="cyan-ice"] { --skid-accent-rgb: 0,230,255; --glow: 0,230,255; --accent:#00e6ff; --accent-2:#66f0ff; --accent-deep:#00a9bd; --accent-ink:#04211f; } :root[data-accent="red-alert"] { --skid-accent-rgb: 255,34,34; --glow: 255,34,34; --accent:#ff2222; --accent-2:#ff6060; --accent-deep:#c01414; --accent-ink:#ffffff; } :root[data-accent="amber"] { --skid-accent-rgb: 255,160,32; --glow: 255,160,32; --accent:#ffa020; --accent-2:#ffbb5a; --accent-deep:#c47810; --accent-ink:#1a1000; } :root[data-accent="green-matrix"]{ --skid-accent-rgb: 0,255,102; --glow: 0,255,102; --accent:#00ff66; --accent-2:#66ff9c; --accent-deep:#00b347; --accent-ink:#04140a; } :root[data-accent="purple-neon"] { --skid-accent-rgb: 200,64,255; --glow: 200,64,255; --accent:#c840ff; --accent-2:#d97dff; --accent-deep:#9a1fd0; --accent-ink:#ffffff; } :root[data-accent="retro"] { --skid-accent-rgb: 90,162,240; --glow: 90,162,240; --accent:#5aa2f0; --accent-2:#8cc0f7; --accent-deep:#3a78c0; --accent-ink:#04140f; } /* ── theme picker component (self-contained; matches the lang menu look) ── */ .tpick { position: relative; display: inline-flex; } .tpick-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 40px; padding: 0 11px; border-radius: 10px; cursor: pointer; background: var(--card, #14161a); color: var(--fg, #e9e9ee); border: 1px solid var(--line-2, var(--line, #2a2d33)); transition: border-color .18s ease, color .18s ease; } .tpick-btn:hover { border-color: rgba(var(--glow, 66,232,224), .7); color: var(--accent, #42e8e0); } .tpick-btn .tpick-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--accent, #42e8e0); box-shadow: 0 0 8px 1px rgba(var(--glow, 66,232,224), .8); flex: none; } .tpick-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 1200; min-width: 210px; padding: 8px; border-radius: 14px; background: var(--card, #101216); border: 1px solid var(--line, #2a2d33); box-shadow: 0 24px 60px -24px rgba(0,0,0,.75); display: none; } .tpick-menu.open { display: block; } [dir="rtl"] .tpick-menu { inset-inline-end: auto; inset-inline-start: 0; } .tpick-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px; border-radius: 9px; cursor: pointer; user-select: none; font-size: 14px; color: var(--fg, #e9e9ee); } .tpick-toggle:hover { background: rgba(var(--glow, 66,232,224), .08); } .tpick-sw { position: relative; width: 40px; height: 22px; flex: none; } .tpick-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .tpick-sw-track { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2, #3a3d44); transition: background .18s ease; } .tpick-sw-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s ease; } .tpick-sw input:checked + .tpick-sw-track { background: var(--accent, #42e8e0); } .tpick-sw input:checked + .tpick-sw-track::after { transform: translateX(18px); } [dir="rtl"] .tpick-sw input:checked + .tpick-sw-track::after { transform: translateX(-18px); } .tpick-sep { height: 1px; margin: 7px 4px; background: var(--line, #2a2d33); } .tpick-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--fg, #e9e9ee); } .tpick-item:hover { background: rgba(var(--glow, 66,232,224), .09); } .tpick-item.active { background: rgba(var(--glow, 66,232,224), .13); font-weight: 700; } .tpick-item .tpick-swatch { width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; } .tpick-item .tpick-check { margin-inline-start: auto; opacity: 0; color: var(--accent, #42e8e0); } .tpick-item.active .tpick-check { opacity: 1; }