/*
Theme preview overrides.
This file is intentionally small and low-specificity, scoped under [data-theme].
Use: add ?theme=<name> to the URL (e.g. ?theme=dune_lite).
*/

/* Dune-lite: warm neutrals + spice replaces teal (statuses keep their safety colors) */
html[data-theme="dune_lite"] {
  /* Replace teal tokens globally to remove "green" accents in focus states/components. */
  --color-teal-50: #f7efe5;
  --color-teal-500: #c2410c;
  --color-teal-600: #9a3412;
  --color-teal-700: #7c2d12;
  /* Primary semantic tokens (used by input.css components) */
  --color-primary: #9a3412;
  --color-primary-dark: #7c2d12;
  --color-primary-muted: #f7efe5;
  --color-primary-focus: #c2410c;
}

[data-theme="dune_lite"] body {
  background-color: #f2f1ee; /* cooler sand */
  color: #1f1a14; /* ink */
}

[data-theme="dune_lite"] nav {
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom-color: #e2ddd3;
  backdrop-filter: saturate(1.2) blur(10px);
}

/* Neutralize slate slightly warmer */
[data-theme="dune_lite"] .bg-slate-50 {
  background-color: #f2f1ee;
}
[data-theme="dune_lite"] .border-slate-200 {
  border-color: #e2ddd3;
}
[data-theme="dune_lite"] .border-slate-100 {
  border-color: #ece7df;
}

/* Links/active accents: replace teal tokens with "spice" */
[data-theme="dune_lite"] .bg-teal-600 {
  /* Primary buttons: contrasty "ink" without reading as black. */
  background-color: #1f2937;
}
[data-theme="dune_lite"] .hover\\:bg-teal-700:hover {
  background-color: #111827;
}
[data-theme="dune_lite"] .text-teal-600 {
  color: #c2410c;
}
[data-theme="dune_lite"] .text-teal-700 {
  color: #9a3412;
}
[data-theme="dune_lite"] .bg-teal-50 {
  background-color: #f7efe5;
}

/* Focus rings */
[data-theme="dune_lite"] .focus\\:ring-teal-500:focus {
  --tw-ring-color: rgba(194, 65, 12, 0.22);
}
[data-theme="dune_lite"] .ring-teal-500\\/30 {
  --tw-ring-color: rgba(194, 65, 12, 0.18);
}

/*
Soft Indigo: muted multi-accent palette (low-chroma) to play nicely with emoji/details.
Brand/interactive tokens map onto the existing teal-* utilities (so we don't refactor templates).
*/
html[data-theme="soft_indigo"] {
  --of-bg: #f7f8fb;
  --of-surface: #ffffff;
  --of-ink: #0f172a;

  --of-brand: #4b5cc4; /* indigo */
  --of-info: #2f6f9f; /* blue */
  --of-success: #1f7a75; /* teal */
  --of-warning: #b8792e; /* amber */
  --of-danger: #b24a6f; /* rose */

  /* Brand/interactive (teal utilities -> brand) */
  --color-teal-50: color-mix(in oklab, var(--of-brand) 6%, white);
  --color-teal-500: color-mix(in oklab, var(--of-brand) 88%, white);
  --color-teal-600: var(--of-brand);
  --color-teal-700: color-mix(in oklab, var(--of-brand) 90%, black);
  /* Primary semantic tokens (used by input.css components) */
  --color-primary: var(--of-brand);
  --color-primary-dark: color-mix(in oklab, var(--of-brand) 90%, black);
  --color-primary-muted: color-mix(in oklab, var(--of-brand) 6%, white);
  --color-primary-focus: color-mix(in oklab, var(--of-brand) 88%, white);

  /* Info */
  --color-blue-50: color-mix(in oklab, var(--of-info) 6%, white);
  --color-blue-100: color-mix(in oklab, var(--of-info) 12%, white);
  --color-blue-200: color-mix(in oklab, var(--of-info) 20%, white);
  --color-blue-500: color-mix(in oklab, var(--of-info) 88%, white);
  --color-blue-700: color-mix(in oklab, var(--of-info) 90%, black);
  --color-blue-800: color-mix(in oklab, var(--of-info) 94%, black);

  /* Success */
  --color-emerald-50: color-mix(in oklab, var(--of-success) 6%, white);
  --color-emerald-100: color-mix(in oklab, var(--of-success) 12%, white);
  --color-emerald-200: color-mix(in oklab, var(--of-success) 20%, white);
  --color-emerald-500: color-mix(in oklab, var(--of-success) 88%, white);
  --color-emerald-600: var(--of-success);
  --color-emerald-700: color-mix(in oklab, var(--of-success) 90%, black);
  --color-emerald-800: color-mix(in oklab, var(--of-success) 94%, black);

  /* Warning (amber + orange share one soft base) */
  --color-amber-50: color-mix(in oklab, var(--of-warning) 7%, white);
  --color-amber-100: color-mix(in oklab, var(--of-warning) 14%, white);
  --color-amber-200: color-mix(in oklab, var(--of-warning) 22%, white);
  --color-amber-600: var(--of-warning);
  --color-amber-700: color-mix(in oklab, var(--of-warning) 90%, black);
  --color-amber-800: color-mix(in oklab, var(--of-warning) 94%, black);
  --color-orange-100: var(--color-amber-100);
  --color-orange-500: color-mix(in oklab, var(--of-warning) 88%, white);
  --color-orange-800: var(--color-amber-800);

  /* Danger (red + rose share one soft base) */
  --color-rose-600: var(--of-danger);
  --color-rose-700: color-mix(in oklab, var(--of-danger) 90%, black);
  --color-red-50: color-mix(in oklab, var(--of-danger) 6%, white);
  --color-red-100: color-mix(in oklab, var(--of-danger) 12%, white);
  --color-red-200: color-mix(in oklab, var(--of-danger) 20%, white);
  --color-red-500: color-mix(in oklab, var(--of-danger) 88%, white);
  --color-red-600: var(--of-danger);
  --color-red-700: color-mix(in oklab, var(--of-danger) 90%, black);
  --color-red-800: color-mix(in oklab, var(--of-danger) 94%, black);
}

[data-theme="soft_indigo"] body {
  background-color: var(--of-bg);
  color: var(--of-ink);
}

[data-theme="soft_indigo"] nav {
  background-color: rgba(255, 255, 255, 0.86);
  border-bottom-color: color-mix(in oklab, var(--of-brand) 10%, #e5e7eb);
  backdrop-filter: saturate(1.1) blur(10px);
}

/* Keep "surface" feeling consistent with the theme background */
[data-theme="soft_indigo"] .bg-slate-50 {
  background-color: var(--of-bg);
}

/*
Soft Warm: same low-chroma idea, but warmer neutrals + softer berry brand.
*/
html[data-theme="soft_warm"] {
  --of-bg: #f7f5f2;
  --of-surface: #ffffff;
  --of-ink: #1f2937;

  --of-brand: #8b5a8e; /* muted plum */
  --of-info: #2f6f9f;
  --of-success: #2a7b5f; /* muted green */
  --of-warning: #b67a3a; /* muted apricot */
  --of-danger: #a94c5e; /* muted brick-rose */

  --color-teal-50: color-mix(in oklab, var(--of-brand) 6%, white);
  --color-teal-500: color-mix(in oklab, var(--of-brand) 88%, white);
  --color-teal-600: var(--of-brand);
  --color-teal-700: color-mix(in oklab, var(--of-brand) 90%, black);
  --color-primary: var(--of-brand);
  --color-primary-dark: color-mix(in oklab, var(--of-brand) 90%, black);
  --color-primary-muted: color-mix(in oklab, var(--of-brand) 6%, white);
  --color-primary-focus: color-mix(in oklab, var(--of-brand) 88%, white);

  --color-blue-50: color-mix(in oklab, var(--of-info) 6%, white);
  --color-blue-100: color-mix(in oklab, var(--of-info) 12%, white);
  --color-blue-200: color-mix(in oklab, var(--of-info) 20%, white);
  --color-blue-500: color-mix(in oklab, var(--of-info) 88%, white);
  --color-blue-700: color-mix(in oklab, var(--of-info) 90%, black);
  --color-blue-800: color-mix(in oklab, var(--of-info) 94%, black);

  --color-emerald-50: color-mix(in oklab, var(--of-success) 6%, white);
  --color-emerald-100: color-mix(in oklab, var(--of-success) 12%, white);
  --color-emerald-200: color-mix(in oklab, var(--of-success) 20%, white);
  --color-emerald-500: color-mix(in oklab, var(--of-success) 88%, white);
  --color-emerald-600: var(--of-success);
  --color-emerald-700: color-mix(in oklab, var(--of-success) 90%, black);
  --color-emerald-800: color-mix(in oklab, var(--of-success) 94%, black);

  --color-amber-50: color-mix(in oklab, var(--of-warning) 7%, white);
  --color-amber-100: color-mix(in oklab, var(--of-warning) 14%, white);
  --color-amber-200: color-mix(in oklab, var(--of-warning) 22%, white);
  --color-amber-600: var(--of-warning);
  --color-amber-700: color-mix(in oklab, var(--of-warning) 90%, black);
  --color-amber-800: color-mix(in oklab, var(--of-warning) 94%, black);
  --color-orange-100: var(--color-amber-100);
  --color-orange-500: color-mix(in oklab, var(--of-warning) 88%, white);
  --color-orange-800: var(--color-amber-800);

  --color-rose-600: var(--of-danger);
  --color-rose-700: color-mix(in oklab, var(--of-danger) 90%, black);
  --color-red-50: color-mix(in oklab, var(--of-danger) 6%, white);
  --color-red-100: color-mix(in oklab, var(--of-danger) 12%, white);
  --color-red-200: color-mix(in oklab, var(--of-danger) 20%, white);
  --color-red-500: color-mix(in oklab, var(--of-danger) 88%, white);
  --color-red-600: var(--of-danger);
  --color-red-700: color-mix(in oklab, var(--of-danger) 90%, black);
  --color-red-800: color-mix(in oklab, var(--of-danger) 94%, black);
}

[data-theme="soft_warm"] body {
  background-color: var(--of-bg);
  color: var(--of-ink);
}

[data-theme="soft_warm"] nav {
  background-color: rgba(255, 255, 255, 0.86);
  border-bottom-color: color-mix(in oklab, var(--of-brand) 10%, #e5e7eb);
  backdrop-filter: saturate(1.1) blur(10px);
}

[data-theme="soft_warm"] .bg-slate-50 {
  background-color: var(--of-bg);
}

/*
Lumen: “electric” (high-chroma) accents on calm neutrals.
Feels a bit “luminescent” without going full neon, and works with emoji/details.
*/
html[data-theme="lumen"] {
  --of-bg: #f8fafc;
  --of-surface: #ffffff;
  --of-ink: #0f172a;

  --of-brand: #5b5dff; /* electric indigo */
  --of-info: #1e90ff; /* vivid blue */
  --of-success: #00bfa6; /* aqua-teal */
  --of-warning: #ff9f1c; /* highlighter amber */
  --of-danger: #ff2d6d; /* hot rose */

  --color-teal-50: color-mix(in oklab, var(--of-brand) 7%, white);
  --color-teal-500: color-mix(in oklab, var(--of-brand) 92%, white);
  --color-teal-600: var(--of-brand);
  --color-teal-700: color-mix(in oklab, var(--of-brand) 88%, black);
  --color-primary: var(--of-brand);
  --color-primary-dark: color-mix(in oklab, var(--of-brand) 88%, black);
  --color-primary-muted: color-mix(in oklab, var(--of-brand) 7%, white);
  --color-primary-focus: color-mix(in oklab, var(--of-brand) 92%, white);

  --color-blue-50: color-mix(in oklab, var(--of-info) 7%, white);
  --color-blue-100: color-mix(in oklab, var(--of-info) 14%, white);
  --color-blue-200: color-mix(in oklab, var(--of-info) 24%, white);
  --color-blue-500: color-mix(in oklab, var(--of-info) 92%, white);
  --color-blue-700: color-mix(in oklab, var(--of-info) 88%, black);
  --color-blue-800: color-mix(in oklab, var(--of-info) 92%, black);

  --color-emerald-50: color-mix(in oklab, var(--of-success) 7%, white);
  --color-emerald-100: color-mix(in oklab, var(--of-success) 14%, white);
  --color-emerald-200: color-mix(in oklab, var(--of-success) 24%, white);
  --color-emerald-500: color-mix(in oklab, var(--of-success) 92%, white);
  --color-emerald-600: var(--of-success);
  --color-emerald-700: color-mix(in oklab, var(--of-success) 88%, black);
  --color-emerald-800: color-mix(in oklab, var(--of-success) 92%, black);

  --color-amber-50: color-mix(in oklab, var(--of-warning) 9%, white);
  --color-amber-100: color-mix(in oklab, var(--of-warning) 18%, white);
  --color-amber-200: color-mix(in oklab, var(--of-warning) 30%, white);
  --color-amber-600: color-mix(in oklab, var(--of-warning) 92%, black);
  --color-amber-700: color-mix(in oklab, var(--of-warning) 84%, black);
  --color-amber-800: color-mix(in oklab, var(--of-warning) 76%, black);
  --color-orange-100: var(--color-amber-100);
  --color-orange-500: color-mix(in oklab, var(--of-warning) 92%, white);
  --color-orange-800: var(--color-amber-800);

  --color-rose-600: var(--of-danger);
  --color-rose-700: color-mix(in oklab, var(--of-danger) 88%, black);
  --color-red-50: color-mix(in oklab, var(--of-danger) 7%, white);
  --color-red-100: color-mix(in oklab, var(--of-danger) 14%, white);
  --color-red-200: color-mix(in oklab, var(--of-danger) 24%, white);
  --color-red-500: color-mix(in oklab, var(--of-danger) 92%, white);
  --color-red-600: var(--of-danger);
  --color-red-700: color-mix(in oklab, var(--of-danger) 88%, black);
  --color-red-800: color-mix(in oklab, var(--of-danger) 92%, black);
}

[data-theme="lumen"] body {
  background-color: var(--of-bg);
  background-image:
    radial-gradient(900px circle at 12% 0%, color-mix(in oklab, var(--of-brand) 22%, white) 0%, transparent 55%),
    radial-gradient(820px circle at 100% 12%, color-mix(in oklab, var(--of-success) 18%, white) 0%, transparent 60%),
    radial-gradient(900px circle at 80% 110%, color-mix(in oklab, var(--of-danger) 14%, white) 0%, transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--of-ink);
}

[data-theme="lumen"] nav {
  background-color: rgba(255, 255, 255, 0.84);
  border-bottom-color: color-mix(in oklab, var(--of-brand) 14%, #e5e7eb);
  backdrop-filter: saturate(1.15) blur(10px);
}

[data-theme="lumen"] .bg-slate-50 {
  background-color: var(--of-bg);
}

/*
Lumen variations
Try:
- ?theme=lumen_cool (cooler + a bit more “tech”)
- ?theme=lumen_warm (warmer + friendlier)
- ?theme=lumen_subtle (same idea, lower intensity)
*/

html[data-theme="lumen_cool"] {
  --of-bg: #f8fafc;
  --of-surface: #ffffff;
  --of-ink: #0f172a;

  --of-brand: #2f5bff; /* electric blue */
  --of-info: #22c3ff; /* cyan */
  --of-success: #00d1c1; /* aqua */
  --of-warning: #ffc400; /* highlighter yellow */
  --of-danger: #ff3fa1; /* hot pink */

  --color-teal-50: color-mix(in oklab, var(--of-brand) 7%, white);
  --color-teal-500: color-mix(in oklab, var(--of-brand) 92%, white);
  --color-teal-600: var(--of-brand);
  --color-teal-700: color-mix(in oklab, var(--of-brand) 88%, black);
  --color-primary: var(--of-brand);
  --color-primary-dark: color-mix(in oklab, var(--of-brand) 88%, black);
  --color-primary-muted: color-mix(in oklab, var(--of-brand) 7%, white);
  --color-primary-focus: color-mix(in oklab, var(--of-brand) 92%, white);

  --color-blue-50: color-mix(in oklab, var(--of-info) 7%, white);
  --color-blue-100: color-mix(in oklab, var(--of-info) 14%, white);
  --color-blue-200: color-mix(in oklab, var(--of-info) 24%, white);
  --color-blue-500: color-mix(in oklab, var(--of-info) 92%, white);
  --color-blue-700: color-mix(in oklab, var(--of-info) 88%, black);
  --color-blue-800: color-mix(in oklab, var(--of-info) 92%, black);

  --color-emerald-50: color-mix(in oklab, var(--of-success) 7%, white);
  --color-emerald-100: color-mix(in oklab, var(--of-success) 14%, white);
  --color-emerald-200: color-mix(in oklab, var(--of-success) 24%, white);
  --color-emerald-500: color-mix(in oklab, var(--of-success) 92%, white);
  --color-emerald-600: var(--of-success);
  --color-emerald-700: color-mix(in oklab, var(--of-success) 88%, black);
  --color-emerald-800: color-mix(in oklab, var(--of-success) 92%, black);

  --color-amber-50: color-mix(in oklab, var(--of-warning) 9%, white);
  --color-amber-100: color-mix(in oklab, var(--of-warning) 18%, white);
  --color-amber-200: color-mix(in oklab, var(--of-warning) 30%, white);
  --color-amber-600: color-mix(in oklab, var(--of-warning) 92%, black);
  --color-amber-700: color-mix(in oklab, var(--of-warning) 84%, black);
  --color-amber-800: color-mix(in oklab, var(--of-warning) 76%, black);
  --color-orange-100: var(--color-amber-100);
  --color-orange-500: color-mix(in oklab, var(--of-warning) 92%, white);
  --color-orange-800: var(--color-amber-800);

  --color-rose-600: var(--of-danger);
  --color-rose-700: color-mix(in oklab, var(--of-danger) 88%, black);
  --color-red-50: color-mix(in oklab, var(--of-danger) 7%, white);
  --color-red-100: color-mix(in oklab, var(--of-danger) 14%, white);
  --color-red-200: color-mix(in oklab, var(--of-danger) 24%, white);
  --color-red-500: color-mix(in oklab, var(--of-danger) 92%, white);
  --color-red-600: var(--of-danger);
  --color-red-700: color-mix(in oklab, var(--of-danger) 88%, black);
  --color-red-800: color-mix(in oklab, var(--of-danger) 92%, black);
}

[data-theme="lumen_cool"] body {
  background-color: var(--of-bg);
  background-image:
    radial-gradient(900px circle at 10% 0%, color-mix(in oklab, var(--of-brand) 20%, white) 0%, transparent 55%),
    radial-gradient(900px circle at 100% 0%, color-mix(in oklab, var(--of-info) 18%, white) 0%, transparent 60%),
    radial-gradient(900px circle at 80% 110%, color-mix(in oklab, var(--of-success) 14%, white) 0%, transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--of-ink);
}

[data-theme="lumen_cool"] nav {
  background-color: rgba(255, 255, 255, 0.84);
  border-bottom-color: color-mix(in oklab, var(--of-brand) 14%, #e5e7eb);
  backdrop-filter: saturate(1.15) blur(10px);
}

[data-theme="lumen_cool"] .bg-slate-50 {
  background-color: var(--of-bg);
}

html[data-theme="lumen_warm"] {
  --of-bg: #faf8f6;
  --of-surface: #ffffff;
  --of-ink: #111827;

  --of-brand: #b14cff; /* electric purple */
  --of-info: #4d7cff; /* periwinkle */
  --of-success: #00c58a; /* mint */
  --of-warning: #ff9a3c; /* orange */
  --of-danger: #ff4d5a; /* coral */

  --color-teal-50: color-mix(in oklab, var(--of-brand) 7%, white);
  --color-teal-500: color-mix(in oklab, var(--of-brand) 92%, white);
  --color-teal-600: var(--of-brand);
  --color-teal-700: color-mix(in oklab, var(--of-brand) 88%, black);
  --color-primary: var(--of-brand);
  --color-primary-dark: color-mix(in oklab, var(--of-brand) 88%, black);
  --color-primary-muted: color-mix(in oklab, var(--of-brand) 7%, white);
  --color-primary-focus: color-mix(in oklab, var(--of-brand) 92%, white);

  --color-blue-50: color-mix(in oklab, var(--of-info) 7%, white);
  --color-blue-100: color-mix(in oklab, var(--of-info) 14%, white);
  --color-blue-200: color-mix(in oklab, var(--of-info) 24%, white);
  --color-blue-500: color-mix(in oklab, var(--of-info) 92%, white);
  --color-blue-700: color-mix(in oklab, var(--of-info) 88%, black);
  --color-blue-800: color-mix(in oklab, var(--of-info) 92%, black);

  --color-emerald-50: color-mix(in oklab, var(--of-success) 7%, white);
  --color-emerald-100: color-mix(in oklab, var(--of-success) 14%, white);
  --color-emerald-200: color-mix(in oklab, var(--of-success) 24%, white);
  --color-emerald-500: color-mix(in oklab, var(--of-success) 92%, white);
  --color-emerald-600: var(--of-success);
  --color-emerald-700: color-mix(in oklab, var(--of-success) 88%, black);
  --color-emerald-800: color-mix(in oklab, var(--of-success) 92%, black);

  --color-amber-50: color-mix(in oklab, var(--of-warning) 9%, white);
  --color-amber-100: color-mix(in oklab, var(--of-warning) 18%, white);
  --color-amber-200: color-mix(in oklab, var(--of-warning) 30%, white);
  --color-amber-600: color-mix(in oklab, var(--of-warning) 92%, black);
  --color-amber-700: color-mix(in oklab, var(--of-warning) 84%, black);
  --color-amber-800: color-mix(in oklab, var(--of-warning) 76%, black);
  --color-orange-100: var(--color-amber-100);
  --color-orange-500: color-mix(in oklab, var(--of-warning) 92%, white);
  --color-orange-800: var(--color-amber-800);

  --color-rose-600: var(--of-danger);
  --color-rose-700: color-mix(in oklab, var(--of-danger) 88%, black);
  --color-red-50: color-mix(in oklab, var(--of-danger) 7%, white);
  --color-red-100: color-mix(in oklab, var(--of-danger) 14%, white);
  --color-red-200: color-mix(in oklab, var(--of-danger) 24%, white);
  --color-red-500: color-mix(in oklab, var(--of-danger) 92%, white);
  --color-red-600: var(--of-danger);
  --color-red-700: color-mix(in oklab, var(--of-danger) 88%, black);
  --color-red-800: color-mix(in oklab, var(--of-danger) 92%, black);
}

[data-theme="lumen_warm"] body {
  background-color: var(--of-bg);
  background-image:
    radial-gradient(900px circle at 12% 0%, color-mix(in oklab, var(--of-brand) 18%, white) 0%, transparent 58%),
    radial-gradient(900px circle at 100% 10%, color-mix(in oklab, var(--of-warning) 14%, white) 0%, transparent 62%),
    radial-gradient(900px circle at 78% 110%, color-mix(in oklab, var(--of-danger) 12%, white) 0%, transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--of-ink);
}

[data-theme="lumen_warm"] nav {
  background-color: rgba(255, 255, 255, 0.84);
  border-bottom-color: color-mix(in oklab, var(--of-brand) 14%, #e5e7eb);
  backdrop-filter: saturate(1.15) blur(10px);
}

[data-theme="lumen_warm"] .bg-slate-50 {
  background-color: var(--of-bg);
}

html[data-theme="lumen_subtle"] {
  --of-bg: #f8fafc;
  --of-surface: #ffffff;
  --of-ink: #0f172a;

  --of-brand: #5a62e8; /* softer electric indigo */
  --of-info: #2786e8; /* calmer blue */
  --of-success: #1aae9a; /* calmer teal */
  --of-warning: #e99a2f; /* calmer amber */
  --of-danger: #e54878; /* calmer rose */

  /* Optional: decouple selection (checkbox) from brand (primary button) */
  --of-selection: var(--of-info);

  /* Optional: logo can be a different shade within the same palette (away from blue/purple). */
  --of-logo-a: color-mix(in oklab, var(--of-warning) 78%, #0f172a);
  --of-logo-b: color-mix(in oklab, var(--of-danger) 78%, #0f172a);

  --color-teal-50: color-mix(in oklab, var(--of-brand) 6%, white);
  --color-teal-500: color-mix(in oklab, var(--of-brand) 90%, white);
  --color-teal-600: var(--of-brand);
  --color-teal-700: color-mix(in oklab, var(--of-brand) 88%, black);
  --color-primary: var(--of-brand);
  --color-primary-dark: color-mix(in oklab, var(--of-brand) 88%, black);
  --color-primary-muted: color-mix(in oklab, var(--of-brand) 6%, white);
  --color-primary-focus: color-mix(in oklab, var(--of-brand) 90%, white);

  --color-blue-50: color-mix(in oklab, var(--of-info) 6%, white);
  --color-blue-100: color-mix(in oklab, var(--of-info) 12%, white);
  --color-blue-200: color-mix(in oklab, var(--of-info) 22%, white);
  --color-blue-500: color-mix(in oklab, var(--of-info) 90%, white);
  --color-blue-700: color-mix(in oklab, var(--of-info) 88%, black);
  --color-blue-800: color-mix(in oklab, var(--of-info) 92%, black);

  --color-emerald-50: color-mix(in oklab, var(--of-success) 6%, white);
  --color-emerald-100: color-mix(in oklab, var(--of-success) 12%, white);
  --color-emerald-200: color-mix(in oklab, var(--of-success) 22%, white);
  --color-emerald-500: color-mix(in oklab, var(--of-success) 90%, white);
  --color-emerald-600: var(--of-success);
  --color-emerald-700: color-mix(in oklab, var(--of-success) 88%, black);
  --color-emerald-800: color-mix(in oklab, var(--of-success) 92%, black);

  --color-amber-50: color-mix(in oklab, var(--of-warning) 8%, white);
  --color-amber-100: color-mix(in oklab, var(--of-warning) 16%, white);
  --color-amber-200: color-mix(in oklab, var(--of-warning) 26%, white);
  --color-amber-600: color-mix(in oklab, var(--of-warning) 90%, black);
  --color-amber-700: color-mix(in oklab, var(--of-warning) 84%, black);
  --color-amber-800: color-mix(in oklab, var(--of-warning) 78%, black);
  --color-orange-100: var(--color-amber-100);
  --color-orange-500: color-mix(in oklab, var(--of-warning) 90%, white);
  --color-orange-800: var(--color-amber-800);

  --color-rose-600: var(--of-danger);
  --color-rose-700: color-mix(in oklab, var(--of-danger) 88%, black);
  --color-red-50: color-mix(in oklab, var(--of-danger) 6%, white);
  --color-red-100: color-mix(in oklab, var(--of-danger) 12%, white);
  --color-red-200: color-mix(in oklab, var(--of-danger) 22%, white);
  --color-red-500: color-mix(in oklab, var(--of-danger) 90%, white);
  --color-red-600: var(--of-danger);
  --color-red-700: color-mix(in oklab, var(--of-danger) 88%, black);
  --color-red-800: color-mix(in oklab, var(--of-danger) 92%, black);
}

[data-theme="lumen_subtle"] body {
  background-color: var(--of-bg);
  background-image:
    radial-gradient(900px circle at 12% 0%, color-mix(in oklab, var(--of-brand) 14%, white) 0%, transparent 60%),
    radial-gradient(820px circle at 100% 12%, color-mix(in oklab, var(--of-success) 10%, white) 0%, transparent 62%),
    radial-gradient(900px circle at 80% 110%, color-mix(in oklab, var(--of-danger) 8%, white) 0%, transparent 64%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--of-ink);
}

[data-theme="lumen_subtle"] nav {
  background-color: rgba(255, 255, 255, 0.84);
  border-bottom-color: color-mix(in oklab, var(--of-brand) 12%, #e5e7eb);
  backdrop-filter: saturate(1.12) blur(10px);
}

[data-theme="lumen_subtle"] .bg-slate-50 {
  background-color: var(--of-bg);
}

[data-theme="lumen_subtle"] .nav-logo .brand-wordmark {
  color: var(--of-logo-a); /* fallback */
  background-image: linear-gradient(90deg, var(--of-logo-a), var(--of-logo-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="lumen_subtle"] .nav-logo:hover .brand-wordmark {
  background-image: linear-gradient(
    90deg,
    color-mix(in oklab, var(--of-logo-a) 86%, white),
    color-mix(in oklab, var(--of-logo-b) 86%, white)
  );
}

/* “Lamp” glow for status indicators (dot/play/pause) in lumen themes */
html[data-theme^="lumen"] .status-mark {
  position: relative;
  /* Push colors toward “LED” (brighter + more saturated) without affecting layout. */
  filter: saturate(1.28) brightness(1.05);
}
html[data-theme^="lumen"] .status-mark::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  background-image: radial-gradient(
    circle at 50% 50%,
    color-mix(in oklab, currentColor 52%, #fff7ed) 0%,
    transparent 74%
  );
  filter: blur(4.5px);
  opacity: 0.5;
  pointer-events: none;
}
html[data-theme^="lumen"] .status-icon,
html[data-theme^="lumen"] .status-dot {
  filter:
    drop-shadow(0 0 4px color-mix(in oklab, currentColor 62%, transparent))
    drop-shadow(0 0 10px color-mix(in oklab, currentColor 28%, transparent));
}
html[data-theme^="lumen"] .status-dot {
  background-color: currentColor;
  background-image: radial-gradient(
    circle at 28% 28%,
    color-mix(in oklab, currentColor 32%, #fff7ed) 0%,
    currentColor 55%,
    color-mix(in oklab, currentColor 86%, black) 100%
  );
  box-shadow:
    0 0 6px 2px color-mix(in oklab, currentColor 32%, transparent),
    0 0 12px 5px color-mix(in oklab, currentColor 18%, transparent);
}
html[data-theme="lumen_subtle"] .status-mark::before {
  /* Keep the “LED” feel but avoid a large halo in subtle mode. */
  inset: 0;
  opacity: 0;
  filter: none;
}
html[data-theme="lumen_subtle"] .status-icon,
html[data-theme="lumen_subtle"] .status-dot {
  filter:
    drop-shadow(0 0 2px color-mix(in oklab, currentColor 56%, transparent))
    drop-shadow(0 0 5px color-mix(in oklab, currentColor 18%, transparent));
}

html[data-theme="lumen_subtle"] .status-dot {
  box-shadow:
    0 0 3px 1px color-mix(in oklab, currentColor 26%, transparent),
    0 0 8px 3px color-mix(in oklab, currentColor 14%, transparent);
}

/* Blue needs a smaller/cooler halo (warm halos read bigger against blue). */
html[data-theme^="lumen"] .status-mark.text-blue-500::before,
html[data-theme^="lumen"] .status-mark.text-blue-700::before,
html[data-theme^="lumen"] .status-mark.text-blue-800::before {
  inset: -1px;
  opacity: 0.34;
  filter: blur(3.25px);
  background-image: radial-gradient(
    circle at 50% 50%,
    color-mix(in oklab, currentColor 46%, #eff6ff) 0%,
    transparent 78%
  );
}
html[data-theme^="lumen"] .status-mark.text-blue-500 .status-icon,
html[data-theme^="lumen"] .status-mark.text-blue-500 .status-dot {
  filter:
    drop-shadow(0 0 2.5px color-mix(in oklab, currentColor 56%, transparent))
    drop-shadow(0 0 6px color-mix(in oklab, currentColor 22%, transparent));
}
html[data-theme="lumen_subtle"] .status-mark.text-blue-500::before {
  opacity: 0;
  filter: none;
}

/*
Lumen Night: modern dark with subtle glows (emoji-friendly) + gradients.
*/
html[data-theme="lumen_night"] {
  /* Neutral dark (gray/black), with a soft “lumen” glow. */
  --of-bg: #0a0a0d;
  --of-surface: rgba(18, 20, 26, 0.78);
  --of-ink: #e8e9ee;

  /* Keep accents intentionally muted to avoid colorful cast around emoji. */
  --of-brand: #64748b; /* slate */
  --of-info: #8fa1bc; /* steel blue */
  --of-success: #7e9f91; /* muted sage */
  --of-warning: #b7a07d; /* muted sand */
  --of-danger: #b28a98; /* muted mauve */

  --of-selection: var(--of-info);
  --of-logo-a: color-mix(in oklab, var(--of-info) 52%, #e2e8f0);
  --of-logo-b: color-mix(in oklab, var(--of-brand) 55%, #e2e8f0);

  /* Dark-mode slate scale (used by tailwind utilities across templates). */
  --color-slate-50: #0a0a0d;
  --color-slate-100: #0f1015;
  --color-slate-200: #171a22;
  --color-slate-300: #252a38;
  --color-slate-400: #3a4257;
  --color-slate-500: #58637d;
  --color-slate-600: #7a879f;
  --color-slate-700: #aab3c4;
  --color-slate-800: #d5dae4;
  --color-slate-900: #f1f5f9;

  --color-teal-50: color-mix(in oklab, var(--of-brand) 10%, var(--of-bg));
  --color-teal-500: color-mix(in oklab, var(--of-brand) 88%, white);
  --color-teal-600: var(--of-brand);
  --color-teal-700: color-mix(in oklab, var(--of-brand) 86%, black);

  --color-primary: var(--of-brand);
  --color-primary-dark: color-mix(in oklab, var(--of-brand) 86%, black);
  --color-primary-muted: color-mix(in oklab, var(--of-brand) 12%, var(--of-bg));
  --color-primary-focus: color-mix(in oklab, var(--of-brand) 62%, white);
}

[data-theme="lumen_night"] body {
  background-color: var(--of-bg);
  background-image:
    radial-gradient(
      900px circle at 10% 0%,
      color-mix(in oklab, var(--of-brand) 8%, var(--of-bg)) 0%,
      transparent 64%
    ),
    radial-gradient(
      860px circle at 100% 12%,
      color-mix(in oklab, var(--of-info) 6%, var(--of-bg)) 0%,
      transparent 66%
    ),
    radial-gradient(
      980px circle at 78% 110%,
      color-mix(in oklab, var(--of-success) 4%, var(--of-bg)) 0%,
      transparent 68%
    ),
    radial-gradient(1200px circle at 40% 120%, rgba(255, 255, 255, 0.015) 0%, transparent 58%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--of-ink);
}

[data-theme="lumen_night"] nav {
  background-color: rgba(18, 20, 26, 0.78);
  border-bottom-color: rgba(148, 163, 184, 0.16);
  backdrop-filter: saturate(1.2) blur(12px);
}

[data-theme="lumen_night"] .nav-logo .brand-wordmark {
  background-image: linear-gradient(90deg, var(--of-logo-a), var(--of-logo-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="lumen_night"] .brand-emoji-wrap {
  background: linear-gradient(180deg, rgba(36, 40, 52, 0.9), rgba(20, 22, 30, 0.95));
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

[data-theme="lumen_night"] .bg-slate-50 {
  background-color: var(--of-bg);
}

[data-theme="lumen_night"] .bg-white {
  background-color: var(--of-surface);
}

[data-theme="lumen_night"] .border-slate-100 {
  border-color: rgba(148, 163, 184, 0.12);
}
[data-theme="lumen_night"] .border-slate-200 {
  border-color: rgba(148, 163, 184, 0.14);
}
[data-theme="lumen_night"] .border-slate-300 {
  border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="lumen_night"] .text-slate-900 {
  color: #f1f5f9;
}
[data-theme="lumen_night"] .text-slate-800 {
  color: #e5e7eb;
}
[data-theme="lumen_night"] .text-slate-700 {
  color: #cbd5e1;
}
[data-theme="lumen_night"] .text-slate-600 {
  color: #94a3b8;
}
[data-theme="lumen_night"] .text-slate-500 {
  color: #64748b;
}
[data-theme="lumen_night"] .text-slate-400 {
  color: #475569;
}

[data-theme="lumen_night"] .card {
  background-color: rgba(18, 20, 26, 0.82);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 14px 40px -28px rgba(0, 0, 0, 0.7);
}

[data-theme="lumen_night"] .btn-secondary {
  background-color: rgba(18, 20, 26, 0.52);
  border-color: rgba(148, 163, 184, 0.2);
  color: #e5e7eb;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px -20px rgba(0, 0, 0, 0.75);
}
[data-theme="lumen_night"] .btn-secondary:hover:not(:disabled) {
  background-color: rgba(30, 33, 42, 0.72);
}

[data-theme="lumen_night"] .btn-primary {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 24px -20px rgba(0, 0, 0, 0.78);
}
[data-theme="lumen_night"] .btn-primary:hover:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 28px -20px rgba(0, 0, 0, 0.8);
}
[data-theme="lumen_night"] .btn-primary:active:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px -18px rgba(0, 0, 0, 0.82);
}

[data-theme="lumen_night"] .form-input,
[data-theme="lumen_night"] .form-select,
[data-theme="lumen_night"] .form-select-trigger,
[data-theme="lumen_night"] .form-textarea {
  background-color: rgba(18, 20, 26, 0.62);
  border-color: rgba(148, 163, 184, 0.2);
  color: #e5e7eb;
}
[data-theme="lumen_night"] .form-input::placeholder {
  color: rgba(148, 163, 184, 0.9);
}
[data-theme="lumen_night"] .form-textarea::placeholder {
  color: rgba(148, 163, 184, 0.9);
}
[data-theme="lumen_night"] .form-select,
[data-theme="lumen_night"] .form-select-trigger {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
[data-theme="lumen_night"] .form-select-dropdown {
  background-color: rgba(18, 20, 26, 0.96);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 36px -20px rgba(0, 0, 0, 0.82);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) rgba(18, 20, 26, 0.3);
}
[data-theme="lumen_night"] .form-select-dropdown::-webkit-scrollbar {
  width: 10px;
}
[data-theme="lumen_night"] .form-select-dropdown::-webkit-scrollbar-track {
  background: rgba(18, 20, 26, 0.35);
}
[data-theme="lumen_night"] .form-select-dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.45);
  border-radius: 9999px;
  border: 2px solid rgba(18, 20, 26, 0.35);
}
[data-theme="lumen_night"] .form-select-dropdown::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.62);
}
[data-theme="lumen_night"] .form-select-option {
  color: #e5e7eb;
}
[data-theme="lumen_night"] .form-select-option:hover {
  background-color: rgba(148, 163, 184, 0.12);
}
[data-theme="lumen_night"] .form-select-option[aria-selected="true"] {
  background-color: rgba(100, 116, 139, 0.35);
  color: #f1f5f9;
}

[data-theme="lumen_night"] .form-checkbox {
  background-color: rgba(18, 20, 26, 0.62);
  border-color: rgba(148, 163, 184, 0.24);
}
[data-theme="lumen_night"] .form-checkbox:hover {
  border-color: rgba(148, 163, 184, 0.36);
}
[data-theme="lumen_night"] .form-checkbox:checked,
[data-theme="lumen_night"] .form-checkbox:indeterminate {
  border-color: var(--of-selection, var(--color-primary));
  background-color: color-mix(in oklab, var(--of-selection, var(--color-primary)) 26%, #0b1020);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12l5 5L20 7'/%3e%3c/svg%3e");
}
[data-theme="lumen_night"] .form-checkbox:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M5 12h14' stroke='%23e2e8f0' stroke-width='2.25' stroke-linecap='round'/%3e%3c/svg%3e");
}

[data-theme="lumen_night"] .hover\\:bg-slate-50:hover {
  background-color: rgba(148, 163, 184, 0.08);
}

[data-theme="lumen_night"] .catalog-chip-link,
[data-theme="lumen_night"] .catalog-chip-text {
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px -16px rgba(0, 0, 0, 0.7);
}
[data-theme="lumen_night"] .catalog-chip-availability-in,
[data-theme="lumen_night"] .catalog-chip-availability-low,
[data-theme="lumen_night"] .catalog-chip-availability-out {
  background-color: rgba(30, 33, 42, 0.75);
  color: #d5dae4;
}
[data-theme="lumen_night"] .catalog-chip-availability-in:hover,
[data-theme="lumen_night"] .catalog-chip-availability-low:hover,
[data-theme="lumen_night"] .catalog-chip-availability-out:hover {
  background-color: rgba(42, 46, 58, 0.86);
}

[data-theme="lumen_night"] .data-table thead {
  background-color: rgba(26, 29, 38, 0.88);
}
[data-theme="lumen_night"] .data-table tbody {
  background-color: rgba(18, 20, 26, 0.78);
}
[data-theme="lumen_night"] .data-table tbody tr:hover {
  background-color: rgba(148, 163, 184, 0.08);
}