/* Active theme — must be first so its @import url() font directives resolve * to the top of the output. Themes are self-contained: tokens + fonts. */ @import "../../lib-theme-mightypix/theme.css"; /* CREMA:THEME */ @import "tailwindcss"; @import "tw-animate-css"; @import "shadcn/tailwind.css"; @source "../../lib-chat-ui/src"; @source "../../lib-aifirst-ui/src"; @source "../../lib-llm-ui/src"; @source "../../lib-action-bus/src"; /* CREMA:SOURCES */ @custom-variant dark (&:is(.dark *)); @theme inline { --font-heading: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-ai-prose: "Source Serif 4", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-syntax-keyword: var(--syntax-keyword); --color-syntax-string: var(--syntax-string); --color-syntax-number: var(--syntax-number); --color-syntax-comment: var(--syntax-comment); --color-syntax-function: var(--syntax-function); --color-syntax-type: var(--syntax-type); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --ease-standard: var(--ease-standard); --ease-emphasized: var(--ease-emphasized); --ease-decelerate: var(--ease-decelerate); --ease-accelerate: var(--ease-accelerate); --ease-spring-gentle: var(--ease-spring-gentle); --ease-spring-snappy: var(--ease-spring-snappy); --ease-spring-bouncy: var(--ease-spring-bouncy); --duration-spring: var(--duration-spring); --duration-fast: var(--duration-fast); --duration-base: var(--duration-base); --duration-slow: var(--duration-slow); --duration-slower: var(--duration-slower); --text-display: var(--text-display-size); --text-display--line-height: var(--text-display-lh); --text-headline: var(--text-headline-size); --text-headline--line-height: var(--text-headline-lh); --text-title: var(--text-title-size); --text-title--line-height: var(--text-title-lh); --text-body: var(--text-body-size); --text-body--line-height: var(--text-body-lh); --text-label: var(--text-label-size); --text-label--line-height: var(--text-label-lh); --text-caption: var(--text-caption-size); --text-caption--line-height: var(--text-caption-lh); --shadow-e0: var(--elevation-0); --shadow-e1: var(--elevation-1); --shadow-e2: var(--elevation-2); --shadow-e3: var(--elevation-3); --shadow-e4: var(--elevation-4); --shadow-e5: var(--elevation-5); --border-width-thin: var(--border-width-thin); --border-width-base: var(--border-width-base); --border-width-thick: var(--border-width-thick); --border-width-heavy: var(--border-width-heavy); --radius-sm: calc(var(--radius) * 0.5); --radius-md: calc(var(--radius) * 0.75); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.15); --radius-2xl: calc(var(--radius) * 1.3); --radius-3xl: calc(var(--radius) * 1.5); --radius-4xl: calc(var(--radius) * 1.75); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; overscroll-behavior-y: none; } html { @apply font-sans; font-size: 18px; overscroll-behavior-y: none; } html[data-font-scale="sm"] { font-size: 16px; } html[data-font-scale="md"] { font-size: 18px; } html[data-font-scale="lg"] { font-size: 20px; } html[data-font-scale="xl"] { font-size: 22px; } } /* ── Vivid text ── * Boost foreground tokens for more contrast + chroma than base mightypix. * NOT wrapped in @layer base — mightypix's `.dark{…}` block is unlayered, * which beats any layer. We use `html:root` / `html.dark` for matching * specificity and unlayered placement so the cascade resolves by source order. */ html:root { --foreground: oklch(0.16 0.08 255); --card-foreground: oklch(0.16 0.08 255); --popover-foreground: oklch(0.16 0.08 255); --sidebar-foreground: oklch(0.16 0.08 255); --muted-foreground: oklch(0.38 0.07 255); --secondary-foreground: oklch(0.22 0.09 255); --accent-foreground: oklch(0.22 0.09 255); } html.dark { --foreground: oklch(0.98 0.025 80); --card-foreground: oklch(0.98 0.025 80); --popover-foreground: oklch(0.98 0.025 80); --sidebar-foreground: oklch(0.98 0.025 80); --muted-foreground: oklch(0.84 0.04 80); --secondary-foreground: oklch(0.96 0.03 80); --accent-foreground: oklch(0.96 0.03 80); /* Darker primary so the user chat bubble is deep blue, not bright blue. */ --primary: oklch(0.48 0.18 255); /* Near-white text on filled buttons / user chat bubble (was dark-blue). */ --primary-foreground: oklch(0.99 0.01 80); /* Deepen muted so assistant bubble (bg-muted) reads cleanly. */ --muted: oklch(0.22 0.022 250); --secondary: oklch(0.24 0.025 250); } /* ── Surface tints ── * Override card / popover / sidebar tokens via `body[data-surface=""]`. * Light values are used in normal mode; dark values when `html.dark` is set. * Swatch preview classes (`.surface-swatch-`) sample the same hues. */ @layer base { body[data-surface="snow"] { --foreground: oklch(0.14 0.09 255); --card-foreground: oklch(0.14 0.09 255); --popover-foreground: oklch(0.14 0.09 255); --sidebar-foreground: oklch(0.14 0.09 255); --muted-foreground: oklch(0.36 0.08 255); --background: oklch(1 0 0); --card: oklch(0.99 0.002 250); --popover: oklch(1 0 0); --muted: oklch(0.96 0.004 250); --secondary: oklch(0.95 0.005 250); --accent: oklch(0.94 0.006 250); --sidebar: oklch(0.98 0.003 250); --sidebar-accent: oklch(0.94 0.005 250); } body[data-surface="stone"] { --foreground: oklch(0.18 0.1 40); --card-foreground: oklch(0.18 0.1 40); --popover-foreground: oklch(0.18 0.1 40); --sidebar-foreground: oklch(0.18 0.1 40); --muted-foreground: oklch(0.4 0.08 40); --background: oklch(0.97 0.012 65); --card: oklch(0.985 0.008 60); --popover: oklch(0.99 0.006 60); --muted: oklch(0.94 0.016 65); --secondary: oklch(0.93 0.02 65); --accent: oklch(0.91 0.024 65); --sidebar: oklch(0.95 0.014 65); --sidebar-accent: oklch(0.9 0.022 65); } body[data-surface="sage"] { --foreground: oklch(0.18 0.1 155); --card-foreground: oklch(0.18 0.1 155); --popover-foreground: oklch(0.18 0.1 155); --sidebar-foreground: oklch(0.18 0.1 155); --muted-foreground: oklch(0.4 0.08 155); --background: oklch(0.97 0.022 155); --card: oklch(0.985 0.014 155); --popover: oklch(0.99 0.012 155); --muted: oklch(0.94 0.025 155); --secondary: oklch(0.93 0.028 155); --accent: oklch(0.91 0.032 155); --sidebar: oklch(0.95 0.024 155); --sidebar-accent: oklch(0.9 0.034 155); } body[data-surface="slate"] { --foreground: oklch(0.16 0.11 240); --card-foreground: oklch(0.16 0.11 240); --popover-foreground: oklch(0.16 0.11 240); --sidebar-foreground: oklch(0.16 0.11 240); --muted-foreground: oklch(0.38 0.09 240); --background: oklch(0.96 0.014 240); --card: oklch(0.98 0.01 240); --popover: oklch(0.99 0.008 240); --muted: oklch(0.93 0.018 240); --secondary: oklch(0.92 0.022 240); --accent: oklch(0.9 0.026 240); --sidebar: oklch(0.94 0.018 240); --sidebar-accent: oklch(0.89 0.026 240); } html.dark body[data-surface="snow"] { --foreground: oklch(0.98 0.02 250); --card-foreground: oklch(0.98 0.02 250); --popover-foreground: oklch(0.98 0.02 250); --sidebar-foreground: oklch(0.98 0.02 250); --muted-foreground: oklch(0.84 0.03 250); --background: oklch(0.18 0.004 250); --card: oklch(0.24 0.005 250); --popover: oklch(0.24 0.005 250); --muted: oklch(0.26 0.006 250); --secondary: oklch(0.28 0.007 250); --accent: oklch(0.3 0.008 250); --sidebar: oklch(0.16 0.004 250); --sidebar-accent: oklch(0.26 0.007 250); } html.dark body[data-surface="stone"] { --foreground: oklch(0.98 0.04 80); --card-foreground: oklch(0.98 0.04 80); --popover-foreground: oklch(0.98 0.04 80); --sidebar-foreground: oklch(0.98 0.04 80); --muted-foreground: oklch(0.84 0.05 80); --background: oklch(0.18 0.016 60); --card: oklch(0.24 0.014 60); --popover: oklch(0.24 0.014 60); --muted: oklch(0.26 0.018 60); --secondary: oklch(0.28 0.02 60); --accent: oklch(0.3 0.022 60); --sidebar: oklch(0.16 0.018 60); --sidebar-accent: oklch(0.27 0.022 60); } html.dark body[data-surface="sage"] { --foreground: oklch(0.98 0.04 145); --card-foreground: oklch(0.98 0.04 145); --popover-foreground: oklch(0.98 0.04 145); --sidebar-foreground: oklch(0.98 0.04 145); --muted-foreground: oklch(0.84 0.05 145); --background: oklch(0.18 0.025 155); --card: oklch(0.24 0.022 155); --popover: oklch(0.24 0.02 155); --muted: oklch(0.26 0.028 155); --secondary: oklch(0.28 0.03 155); --accent: oklch(0.3 0.032 155); --sidebar: oklch(0.16 0.026 155); --sidebar-accent: oklch(0.27 0.032 155); } html.dark body[data-surface="slate"] { --foreground: oklch(0.98 0.025 240); --card-foreground: oklch(0.98 0.025 240); --popover-foreground: oklch(0.98 0.025 240); --sidebar-foreground: oklch(0.98 0.025 240); --muted-foreground: oklch(0.84 0.04 240); --background: oklch(0.18 0.02 240); --card: oklch(0.24 0.018 240); --popover: oklch(0.24 0.016 240); --muted: oklch(0.26 0.024 240); --secondary: oklch(0.28 0.026 240); --accent: oklch(0.3 0.028 240); --sidebar: oklch(0.16 0.022 240); --sidebar-accent: oklch(0.27 0.028 240); } .surface-swatch-default { background: var(--card); } .surface-swatch-snow { background: oklch(1 0 0); } .surface-swatch-stone { background: oklch(0.97 0.008 60); } .surface-swatch-sage { background: oklch(0.97 0.018 155); } .surface-swatch-slate { background: oklch(0.96 0.012 240); } html.dark .surface-swatch-snow { background: oklch(0.24 0.005 250); } html.dark .surface-swatch-stone { background: oklch(0.24 0.014 60); } html.dark .surface-swatch-sage { background: oklch(0.24 0.022 155); } html.dark .surface-swatch-slate { background: oklch(0.24 0.018 240); } } /* ── Background atmospheres ── * Selected via `body[data-bg=""]` (set by BackgroundPicker). * Default (no attribute) keeps the theme's flat surface. */ @layer base { /* ── Light, airy variants ── */ body[data-bg="pearl"], .bg-variant-pearl { background-image: radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.98 0.02 320 / 0.85), transparent 60%), radial-gradient(ellipse 60% 50% at 82% 18%, oklch(0.97 0.03 220 / 0.75), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.98 0.025 260 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.99 0.02 60 / 0.65), transparent 55%), linear-gradient(180deg, oklch(0.99 0.005 280), oklch(0.97 0.012 240)); } body[data-bg="linen"], .bg-variant-linen { background-image: radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.98 0.03 80 / 0.8), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.97 0.035 60 / 0.75), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.98 0.025 40 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.99 0.02 90 / 0.65), transparent 55%), linear-gradient(180deg, oklch(0.99 0.012 75), oklch(0.97 0.018 60)); } body[data-bg="mist"], .bg-variant-mist { background-image: radial-gradient(ellipse 70% 60% at 18% 14%, oklch(0.97 0.02 220 / 0.85), transparent 60%), radial-gradient(ellipse 60% 50% at 82% 16%, oklch(0.96 0.025 200 / 0.75), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.97 0.02 240 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.98 0.018 180 / 0.65), transparent 55%), linear-gradient(180deg, oklch(0.98 0.008 220), oklch(0.96 0.012 210)); } body[data-bg="dawn"], .bg-variant-dawn { background-image: radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.97 0.04 30 / 0.8), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.96 0.035 320 / 0.75), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.97 0.03 50 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.98 0.025 290 / 0.65), transparent 55%), linear-gradient(180deg, oklch(0.99 0.012 40), oklch(0.97 0.018 320)); } body[data-bg="seafoam"], .bg-variant-seafoam { background-image: radial-gradient(ellipse 70% 60% at 15% 14%, oklch(0.97 0.035 180 / 0.85), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.96 0.03 160 / 0.75), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.97 0.03 200 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.98 0.025 145 / 0.65), transparent 55%), linear-gradient(180deg, oklch(0.98 0.012 175), oklch(0.96 0.018 165)); } body[data-bg="aurora"], .bg-variant-aurora { background-image: radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.88 0.11 250 / 0.85), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.9 0.1 320 / 0.75), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.9 0.12 200 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.92 0.09 145 / 0.65), transparent 55%), linear-gradient(180deg, oklch(0.97 0.02 260), oklch(0.94 0.03 280)); } body[data-bg="sunset"], .bg-variant-sunset { background-image: radial-gradient(ellipse 70% 60% at 12% 15%, oklch(0.9 0.13 50 / 0.85), transparent 60%), radial-gradient(ellipse 65% 55% at 85% 10%, oklch(0.88 0.14 20 / 0.8), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 90%, oklch(0.9 0.12 340 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 85%, oklch(0.92 0.1 75 / 0.7), transparent 55%), linear-gradient(180deg, oklch(0.97 0.03 60), oklch(0.94 0.04 30)); } body[data-bg="meadow"], .bg-variant-meadow { background-image: radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.9 0.12 145 / 0.85), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.91 0.11 180 / 0.75), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.9 0.12 120 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.93 0.1 95 / 0.65), transparent 55%), linear-gradient(180deg, oklch(0.97 0.03 155), oklch(0.94 0.04 170)); } body[data-bg="midnight"], .bg-variant-midnight { background-image: radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.58 0.19 270 / 0.9), transparent 60%), radial-gradient(ellipse 65% 55% at 85% 20%, oklch(0.55 0.22 310 / 0.85), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.5 0.22 240 / 0.8), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.55 0.2 330 / 0.75), transparent 55%), linear-gradient(180deg, oklch(0.35 0.12 265), oklch(0.28 0.14 290)); } body[data-bg="blush"], .bg-variant-blush { background-image: radial-gradient(ellipse 70% 60% at 15% 15%, oklch(0.92 0.1 10 / 0.85), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 15%, oklch(0.93 0.09 340 / 0.8), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.92 0.1 300 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 12% 88%, oklch(0.94 0.08 45 / 0.7), transparent 55%), linear-gradient(180deg, oklch(0.98 0.02 20), oklch(0.95 0.03 355)); } body[data-bg="noir"], .bg-variant-noir { background-image: radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.85 0.01 260 / 0.9), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.82 0.01 280 / 0.85), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.8 0.01 240 / 0.8), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.84 0.01 200 / 0.75), transparent 55%), linear-gradient(180deg, oklch(0.95 0.005 260), oklch(0.9 0.005 260)); } /* ── Dark mode: same hues, deeper L, lower alpha ── */ html.dark body[data-bg="pearl"], html.dark .bg-variant-pearl { background-image: radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.42 0.06 320 / 0.55), transparent 60%), radial-gradient(ellipse 60% 50% at 82% 18%, oklch(0.4 0.07 220 / 0.5), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.06 260 / 0.45), transparent 60%), radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.05 60 / 0.4), transparent 55%), linear-gradient(180deg, oklch(0.18 0.015 280), oklch(0.15 0.02 240)); } html.dark body[data-bg="linen"], html.dark .bg-variant-linen { background-image: radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.42 0.07 80 / 0.55), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.08 60 / 0.5), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.07 40 / 0.45), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.06 90 / 0.4), transparent 55%), linear-gradient(180deg, oklch(0.18 0.025 75), oklch(0.15 0.03 60)); } html.dark body[data-bg="mist"], html.dark .bg-variant-mist { background-image: radial-gradient(ellipse 70% 60% at 18% 14%, oklch(0.4 0.06 220 / 0.55), transparent 60%), radial-gradient(ellipse 60% 50% at 82% 16%, oklch(0.4 0.07 200 / 0.5), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.06 240 / 0.45), transparent 60%), radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.05 180 / 0.4), transparent 55%), linear-gradient(180deg, oklch(0.17 0.018 220), oklch(0.14 0.022 210)); } html.dark body[data-bg="dawn"], html.dark .bg-variant-dawn { background-image: radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.42 0.1 30 / 0.55), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.1 320 / 0.5), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.09 50 / 0.45), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.08 290 / 0.4), transparent 55%), linear-gradient(180deg, oklch(0.18 0.03 40), oklch(0.15 0.035 320)); } html.dark body[data-bg="seafoam"], html.dark .bg-variant-seafoam { background-image: radial-gradient(ellipse 70% 60% at 15% 14%, oklch(0.42 0.08 180 / 0.55), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.08 160 / 0.5), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.08 200 / 0.45), transparent 60%), radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.07 145 / 0.4), transparent 55%), linear-gradient(180deg, oklch(0.18 0.025 175), oklch(0.15 0.03 165)); } html.dark body[data-bg="aurora"], html.dark .bg-variant-aurora { background-image: radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.45 0.18 250 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.42 0.2 320 / 0.65), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.4 0.18 200 / 0.6), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.16 145 / 0.55), transparent 55%), linear-gradient(180deg, oklch(0.16 0.04 260), oklch(0.13 0.05 280)); } html.dark body[data-bg="sunset"], html.dark .bg-variant-sunset { background-image: radial-gradient(ellipse 70% 60% at 12% 15%, oklch(0.5 0.18 50 / 0.7), transparent 60%), radial-gradient(ellipse 65% 55% at 85% 10%, oklch(0.48 0.2 20 / 0.65), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 90%, oklch(0.45 0.18 340 / 0.6), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 85%, oklch(0.5 0.16 75 / 0.55), transparent 55%), linear-gradient(180deg, oklch(0.18 0.06 30), oklch(0.14 0.08 15)); } html.dark body[data-bg="meadow"], html.dark .bg-variant-meadow { background-image: radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.45 0.16 145 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.45 0.16 180 / 0.65), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.16 120 / 0.6), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.45 0.14 95 / 0.55), transparent 55%), linear-gradient(180deg, oklch(0.16 0.04 155), oklch(0.13 0.05 170)); } html.dark body[data-bg="midnight"], html.dark .bg-variant-midnight { background-image: radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.4 0.22 270 / 0.85), transparent 60%), radial-gradient(ellipse 65% 55% at 85% 20%, oklch(0.38 0.24 310 / 0.8), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.36 0.24 240 / 0.75), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.38 0.22 330 / 0.7), transparent 55%), linear-gradient(180deg, oklch(0.12 0.08 265), oklch(0.09 0.1 290)); } html.dark body[data-bg="blush"], html.dark .bg-variant-blush { background-image: radial-gradient(ellipse 70% 60% at 15% 15%, oklch(0.5 0.16 10 / 0.7), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 15%, oklch(0.48 0.16 340 / 0.65), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.45 0.16 300 / 0.6), transparent 60%), radial-gradient(ellipse 60% 50% at 12% 88%, oklch(0.5 0.14 45 / 0.55), transparent 55%), linear-gradient(180deg, oklch(0.18 0.05 20), oklch(0.14 0.06 355)); } html.dark body[data-bg="noir"], html.dark .bg-variant-noir { background-image: radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.3 0.01 260 / 0.9), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.28 0.01 280 / 0.85), transparent 55%), radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.26 0.01 240 / 0.8), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.28 0.01 200 / 0.75), transparent 55%), linear-gradient(180deg, oklch(0.12 0.005 260), oklch(0.08 0.005 260)); } }