/* QShell theme — public stylesheet for sub-apps (v1). Generated by tools/generate-theme-css.py from GlowThemes.cs — do not edit by hand. Coherent backdrop for any app in the moducube environment. Vendor or this file, then let the shell's bootstrap params drive it — put BOTH on the root element: document.documentElement.dataset.theme = params.theme; // "light" | "dark" document.documentElement.classList.add("qsk-bg-" + params.background); // glow id | "none" | "image" The background fills the viewport by spec, and --qsk-accent then cascades everywhere — keep transparent so the backdrop shows, and read --qsk-accent for buttons/controls to match the shell. Light/dark follows [data-theme] (explicit) or the OS (prefers-color-scheme) when unset. */ :root { --qsk-accent: #4b72e5; /* brand primary; glow classes override for chromatic glows */ --qsk-bg: #ffffff; /* surface for the none/image fallback */ --qsk-surface: #f5f6f9; /* Glass surfaces over the glow (mirror the shell's chrome). Pair with backdrop-filter. */ --qsk-glass-blur: 14px; --qsk-glass-panel: rgba(255, 255, 255, 0.35); /* frosted card / panel */ --qsk-glass-field: rgba(255, 255, 255, 0.62); /* frosted input / field */ --qsk-glass-border: rgba(9, 28, 55, 0.1); /* hairline on glass */ } [data-theme="dark"] { --qsk-accent: #829eee; --qsk-bg: #272930; --qsk-surface: #35373e; --qsk-glass-panel: rgba(18, 20, 26, 0.35); --qsk-glass-field: rgba(255, 255, 255, 0.06); --qsk-glass-border: rgba(255, 255, 255, 0.09); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --qsk-accent: #829eee; --qsk-bg: #272930; --qsk-surface: #35373e; --qsk-glass-panel: rgba(18, 20, 26, 0.35); --qsk-glass-field: rgba(255, 255, 255, 0.06); --qsk-glass-border: rgba(255, 255, 255, 0.09); } } /* Glow backgrounds — one class per theme, light default + dark override. */ .qsk-bg-blue { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.153 260 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.085 260 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 260) 0%, oklch(0.9 0.0425 260) 100%); --qsk-accent: oklch(0.52 0.17 260); } [data-theme="dark"].qsk-bg-blue, [data-theme="dark"] .qsk-bg-blue { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.085 260 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.051 260 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0425 260) 0%, oklch(0.16 0.051 260) 100%); --qsk-accent: oklch(0.78 0.119 260); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-blue, :root:not([data-theme="light"]) .qsk-bg-blue { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.085 260 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.051 260 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0425 260) 0%, oklch(0.16 0.051 260) 100%); --qsk-accent: oklch(0.78 0.119 260); } } .qsk-bg-indigo { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.144 278 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.08 278 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 278) 0%, oklch(0.9 0.04 278) 100%); --qsk-accent: oklch(0.52 0.16 278); } [data-theme="dark"].qsk-bg-indigo, [data-theme="dark"] .qsk-bg-indigo { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 278 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 278 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 278) 0%, oklch(0.16 0.048 278) 100%); --qsk-accent: oklch(0.78 0.112 278); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-indigo, :root:not([data-theme="light"]) .qsk-bg-indigo { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 278 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 278 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 278) 0%, oklch(0.16 0.048 278) 100%); --qsk-accent: oklch(0.78 0.112 278); } } .qsk-bg-sky { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.144 235 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.08 235 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 235) 0%, oklch(0.9 0.04 235) 100%); --qsk-accent: oklch(0.52 0.16 235); } [data-theme="dark"].qsk-bg-sky, [data-theme="dark"] .qsk-bg-sky { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 235 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 235 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 235) 0%, oklch(0.16 0.048 235) 100%); --qsk-accent: oklch(0.78 0.112 235); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-sky, :root:not([data-theme="light"]) .qsk-bg-sky { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 235 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 235 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 235) 0%, oklch(0.16 0.048 235) 100%); --qsk-accent: oklch(0.78 0.112 235); } } .qsk-bg-cyan { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.144 210 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.08 210 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 210) 0%, oklch(0.9 0.04 210) 100%); --qsk-accent: oklch(0.52 0.16 210); } [data-theme="dark"].qsk-bg-cyan, [data-theme="dark"] .qsk-bg-cyan { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 210 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 210 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 210) 0%, oklch(0.16 0.048 210) 100%); --qsk-accent: oklch(0.78 0.112 210); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-cyan, :root:not([data-theme="light"]) .qsk-bg-cyan { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 210 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 210 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 210) 0%, oklch(0.16 0.048 210) 100%); --qsk-accent: oklch(0.78 0.112 210); } } .qsk-bg-teal { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.144 190 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.08 190 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 190) 0%, oklch(0.9 0.04 190) 100%); --qsk-accent: oklch(0.52 0.16 190); } [data-theme="dark"].qsk-bg-teal, [data-theme="dark"] .qsk-bg-teal { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 190 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 190 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 190) 0%, oklch(0.16 0.048 190) 100%); --qsk-accent: oklch(0.78 0.112 190); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-teal, :root:not([data-theme="light"]) .qsk-bg-teal { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 190 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 190 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 190) 0%, oklch(0.16 0.048 190) 100%); --qsk-accent: oklch(0.78 0.112 190); } } .qsk-bg-forest { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.162 160 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.09 160 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 160) 0%, oklch(0.9 0.045 160) 100%); --qsk-accent: oklch(0.52 0.18 160); } [data-theme="dark"].qsk-bg-forest, [data-theme="dark"] .qsk-bg-forest { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.09 160 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.054 160 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.045 160) 0%, oklch(0.16 0.054 160) 100%); --qsk-accent: oklch(0.78 0.126 160); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-forest, :root:not([data-theme="light"]) .qsk-bg-forest { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.09 160 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.054 160 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.045 160) 0%, oklch(0.16 0.054 160) 100%); --qsk-accent: oklch(0.78 0.126 160); } } .qsk-bg-emerald { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.153 145 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.085 145 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 145) 0%, oklch(0.9 0.0425 145) 100%); --qsk-accent: oklch(0.52 0.17 145); } [data-theme="dark"].qsk-bg-emerald, [data-theme="dark"] .qsk-bg-emerald { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.085 145 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.051 145 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0425 145) 0%, oklch(0.16 0.051 145) 100%); --qsk-accent: oklch(0.78 0.119 145); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-emerald, :root:not([data-theme="light"]) .qsk-bg-emerald { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.085 145 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.051 145 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0425 145) 0%, oklch(0.16 0.051 145) 100%); --qsk-accent: oklch(0.78 0.119 145); } } .qsk-bg-moss { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.144 130 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.08 130 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 130) 0%, oklch(0.9 0.04 130) 100%); --qsk-accent: oklch(0.52 0.16 130); } [data-theme="dark"].qsk-bg-moss, [data-theme="dark"] .qsk-bg-moss { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 130 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 130 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 130) 0%, oklch(0.16 0.048 130) 100%); --qsk-accent: oklch(0.78 0.112 130); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-moss, :root:not([data-theme="light"]) .qsk-bg-moss { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 130 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 130 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 130) 0%, oklch(0.16 0.048 130) 100%); --qsk-accent: oklch(0.78 0.112 130); } } .qsk-bg-lime { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.144 110 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.08 110 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 110) 0%, oklch(0.9 0.04 110) 100%); --qsk-accent: oklch(0.52 0.16 110); } [data-theme="dark"].qsk-bg-lime, [data-theme="dark"] .qsk-bg-lime { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 110 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 110 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 110) 0%, oklch(0.16 0.048 110) 100%); --qsk-accent: oklch(0.78 0.112 110); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-lime, :root:not([data-theme="light"]) .qsk-bg-lime { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 110 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 110 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 110) 0%, oklch(0.16 0.048 110) 100%); --qsk-accent: oklch(0.78 0.112 110); } } .qsk-bg-sand { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.12 90 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.06 90 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 90) 0%, oklch(0.9 0.03 90) 100%); --qsk-accent: oklch(0.52 0.14 90); } [data-theme="dark"].qsk-bg-sand, [data-theme="dark"] .qsk-bg-sand { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.06 90 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.036 90 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.03 90) 0%, oklch(0.16 0.036 90) 100%); --qsk-accent: oklch(0.78 0.1 90); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-sand, :root:not([data-theme="light"]) .qsk-bg-sand { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.06 90 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.036 90 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.03 90) 0%, oklch(0.16 0.036 90) 100%); --qsk-accent: oklch(0.78 0.1 90); } } .qsk-bg-amber { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.144 65 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.08 65 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 65) 0%, oklch(0.9 0.04 65) 100%); --qsk-accent: oklch(0.52 0.16 65); } [data-theme="dark"].qsk-bg-amber, [data-theme="dark"] .qsk-bg-amber { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 65 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 65 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 65) 0%, oklch(0.16 0.048 65) 100%); --qsk-accent: oklch(0.78 0.112 65); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-amber, :root:not([data-theme="light"]) .qsk-bg-amber { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.08 65 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.048 65 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.04 65) 0%, oklch(0.16 0.048 65) 100%); --qsk-accent: oklch(0.78 0.112 65); } } .qsk-bg-peach { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.126 40 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.07 40 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 40) 0%, oklch(0.9 0.035 40) 100%); --qsk-accent: oklch(0.52 0.14 40); } [data-theme="dark"].qsk-bg-peach, [data-theme="dark"] .qsk-bg-peach { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.07 40 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.042 40 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.035 40) 0%, oklch(0.16 0.042 40) 100%); --qsk-accent: oklch(0.78 0.1 40); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-peach, :root:not([data-theme="light"]) .qsk-bg-peach { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.07 40 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.042 40 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.035 40) 0%, oklch(0.16 0.042 40) 100%); --qsk-accent: oklch(0.78 0.1 40); } } .qsk-bg-rose { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.126 15 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.07 15 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 15) 0%, oklch(0.9 0.035 15) 100%); --qsk-accent: oklch(0.52 0.14 15); } [data-theme="dark"].qsk-bg-rose, [data-theme="dark"] .qsk-bg-rose { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.07 15 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.042 15 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.035 15) 0%, oklch(0.16 0.042 15) 100%); --qsk-accent: oklch(0.78 0.1 15); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-rose, :root:not([data-theme="light"]) .qsk-bg-rose { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.07 15 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.042 15 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.035 15) 0%, oklch(0.16 0.042 15) 100%); --qsk-accent: oklch(0.78 0.1 15); } } .qsk-bg-magenta { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.135 350 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.075 350 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 350) 0%, oklch(0.9 0.0375 350) 100%); --qsk-accent: oklch(0.52 0.15 350); } [data-theme="dark"].qsk-bg-magenta, [data-theme="dark"] .qsk-bg-magenta { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.075 350 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.045 350 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0375 350) 0%, oklch(0.16 0.045 350) 100%); --qsk-accent: oklch(0.78 0.105 350); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-magenta, :root:not([data-theme="light"]) .qsk-bg-magenta { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.075 350 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.045 350 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0375 350) 0%, oklch(0.16 0.045 350) 100%); --qsk-accent: oklch(0.78 0.105 350); } } .qsk-bg-plum { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.126 330 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.07 330 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 330) 0%, oklch(0.9 0.035 330) 100%); --qsk-accent: oklch(0.52 0.14 330); } [data-theme="dark"].qsk-bg-plum, [data-theme="dark"] .qsk-bg-plum { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.07 330 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.042 330 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.035 330) 0%, oklch(0.16 0.042 330) 100%); --qsk-accent: oklch(0.78 0.1 330); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-plum, :root:not([data-theme="light"]) .qsk-bg-plum { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.07 330 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.042 330 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.035 330) 0%, oklch(0.16 0.042 330) 100%); --qsk-accent: oklch(0.78 0.1 330); } } .qsk-bg-mauve { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.12 300 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.055 300 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 300) 0%, oklch(0.9 0.0275 300) 100%); --qsk-accent: oklch(0.52 0.14 300); } [data-theme="dark"].qsk-bg-mauve, [data-theme="dark"] .qsk-bg-mauve { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.055 300 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.033 300 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0275 300) 0%, oklch(0.16 0.033 300) 100%); --qsk-accent: oklch(0.78 0.1 300); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-mauve, :root:not([data-theme="light"]) .qsk-bg-mauve { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.055 300 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.033 300 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0275 300) 0%, oklch(0.16 0.033 300) 100%); --qsk-accent: oklch(0.78 0.1 300); } } .qsk-bg-slate { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.12 250 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.025 250 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 250) 0%, oklch(0.9 0.0125 250) 100%); } [data-theme="dark"].qsk-bg-slate, [data-theme="dark"] .qsk-bg-slate { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.025 250 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.015 250 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0125 250) 0%, oklch(0.16 0.015 250) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-slate, :root:not([data-theme="light"]) .qsk-bg-slate { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.025 250 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.015 250 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0125 250) 0%, oklch(0.16 0.015 250) 100%); } } .qsk-bg-taupe { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.12 70 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.035 70 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 70) 0%, oklch(0.9 0.0175 70) 100%); } [data-theme="dark"].qsk-bg-taupe, [data-theme="dark"] .qsk-bg-taupe { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.035 70 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.021 70 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0175 70) 0%, oklch(0.16 0.021 70) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-taupe, :root:not([data-theme="light"]) .qsk-bg-taupe { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.035 70 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.021 70 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.0175 70) 0%, oklch(0.16 0.021 70) 100%); } } .qsk-bg-graphite { background: radial-gradient(110% 85% at 50% 110%, oklch(0.58 0.12 250 / 0.5) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.72 0.008 250 / 0.28) 0%, transparent 70%), linear-gradient(180deg, oklch(0.97 0.012 250) 0%, oklch(0.9 0.004 250) 100%); } [data-theme="dark"].qsk-bg-graphite, [data-theme="dark"] .qsk-bg-graphite { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.008 250 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.0048 250 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.004 250) 0%, oklch(0.16 0.0048 250) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).qsk-bg-graphite, :root:not([data-theme="light"]) .qsk-bg-graphite { background: radial-gradient(110% 85% at 50% 110%, oklch(0.52 0.008 250 / 0.55) 0%, transparent 65%), radial-gradient(70% 55% at 50% 45%, oklch(0.46 0.0048 250 / 0.35) 0%, transparent 70%), linear-gradient(180deg, oklch(0.21 0.004 250) 0%, oklch(0.16 0.0048 250) 100%); } } /* No glow / user image: the shell shows a flat surface / a private photo we don't share — apps fall back to a neutral surface. */ .qsk-bg-none, .qsk-bg-image { background: var(--qsk-bg); }