/*
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;
}