/* LAVA ops themes: creamy lights + a soft dusk, never near-black. */

:root,
[data-theme="cream"] {
  --lava-bg: #f6efe2;
  --lava-surface: #fffaf2;
  --lava-surface-alt: #f1e4cf;
  --lava-surface-2: #ead9be;
  --lava-hover: #e6d4b6;
  --lava-border: #ddc9a8;
  --lava-border-strong: #c9ae82;
  --lava-text: #3b2d1f;
  --lava-text-2: #5c4a38;
  --lava-muted: #8a7460;
  --lava-faint: #cbb9a4;
  --lava-primary: #7a5c3d;
  --lava-primary-hover: #926c48;
  --lava-primary-soft: #efe0c8;
  --lava-on-primary: #fffaf2;
  --lava-success: #4e6b4a;
  --lava-success-2: #3f5740;
  --lava-danger: #b54a3c;
  --lava-danger-2: #8f2e28;
  --lava-warning: #8a5a20;
  --lava-warning-2: #6e4618;
  --lava-info: #6a5340;
  --lava-teal: #4e6b4a;
  --lava-teal-2: #6df5e1;
  --lava-header: color-mix(in srgb, var(--lava-bg) 88%, transparent);
  --lava-shadow: rgba(90, 60, 30, 0.08);
  --lava-scheme: light;
  color-scheme: light;
}

[data-theme="lavender"] {
  --lava-bg: #fdf8ff;
  --lava-surface: #ffffff;
  --lava-surface-alt: #f7f1ff;
  --lava-surface-2: #f1ebff;
  --lava-hover: #ece4ff;
  --lava-border: #e6deff;
  --lava-border-strong: #d0bcff;
  --lava-text: #1c1246;
  --lava-text-2: #494550;
  --lava-muted: #7a7581;
  --lava-faint: #cbc4d1;
  --lava-primary: #523d86;
  --lava-primary-hover: #6a55a0;
  --lava-primary-soft: #ece4ff;
  --lava-on-primary: #ffffff;
  --lava-success: #006b5f;
  --lava-success-2: #005048;
  --lava-danger: #ba1a1a;
  --lava-danger-2: #93000a;
  --lava-warning: #703d00;
  --lava-warning-2: #935100;
  --lava-info: #4e3983;
  --lava-teal: #006b5f;
  --lava-teal-2: #6df5e1;
  --lava-header: color-mix(in srgb, var(--lava-bg) 90%, transparent);
  --lava-shadow: rgba(42, 33, 84, 0.08);
  --lava-scheme: light;
  color-scheme: light;
}

[data-theme="sage"] {
  --lava-bg: #eef3ea;
  --lava-surface: #f8faf6;
  --lava-surface-alt: #e3eadc;
  --lava-surface-2: #d7e1cf;
  --lava-hover: #cdd8c4;
  --lava-border: #c5d1bb;
  --lava-border-strong: #a7b89b;
  --lava-text: #243028;
  --lava-text-2: #445248;
  --lava-muted: #6b7a70;
  --lava-faint: #b4c0b6;
  --lava-primary: #4f6b57;
  --lava-primary-hover: #62856c;
  --lava-primary-soft: #d7e1cf;
  --lava-on-primary: #f8faf6;
  --lava-success: #3f6b4e;
  --lava-success-2: #2f5440;
  --lava-danger: #a24b45;
  --lava-danger-2: #7e3532;
  --lava-warning: #7a5b28;
  --lava-warning-2: #5f461d;
  --lava-info: #3f5a4c;
  --lava-teal: #3f6b4e;
  --lava-teal-2: #b7e8c8;
  --lava-header: color-mix(in srgb, var(--lava-bg) 88%, transparent);
  --lava-shadow: rgba(40, 60, 45, 0.08);
  --lava-scheme: light;
  color-scheme: light;
}

[data-theme="blush"] {
  --lava-bg: #f8efe9;
  --lava-surface: #fffaf8;
  --lava-surface-alt: #f3e3db;
  --lava-surface-2: #ead4ca;
  --lava-hover: #e4c8bc;
  --lava-border: #e0c6bb;
  --lava-border-strong: #cda89b;
  --lava-text: #3a2a28;
  --lava-text-2: #5d4743;
  --lava-muted: #8a706a;
  --lava-faint: #d0b8b0;
  --lava-primary: #8a5a52;
  --lava-primary-hover: #a26c63;
  --lava-primary-soft: #ead4ca;
  --lava-on-primary: #fffaf8;
  --lava-success: #4e6b4a;
  --lava-success-2: #3c5440;
  --lava-danger: #b54a3c;
  --lava-danger-2: #8f2e28;
  --lava-warning: #8a5a20;
  --lava-warning-2: #6e4618;
  --lava-info: #6e4a46;
  --lava-teal: #4e6b4a;
  --lava-teal-2: #f3d2c8;
  --lava-header: color-mix(in srgb, var(--lava-bg) 88%, transparent);
  --lava-shadow: rgba(90, 50, 40, 0.08);
  --lava-scheme: light;
  color-scheme: light;
}

[data-theme="dusk"] {
  --lava-bg: #3e4558;
  --lava-surface: #4c5468;
  --lava-surface-alt: #555e74;
  --lava-surface-2: #5f6980;
  --lava-hover: #6a7388;
  --lava-border: #6f788e;
  --lava-border-strong: #8891a6;
  --lava-text: #f3efe6;
  --lava-text-2: #d8d3c8;
  --lava-muted: #b4afc2;
  --lava-faint: #8b87a0;
  --lava-primary: #6b617c;
  --lava-primary-hover: #7d738f;
  --lava-primary-soft: #5a5470;
  --lava-on-primary: #f3efe6;
  --lava-success: #8fbf9a;
  --lava-success-2: #6ea07a;
  --lava-danger: #e08b80;
  --lava-danger-2: #c56d64;
  --lava-warning: #e0b070;
  --lava-warning-2: #c99655;
  --lava-info: #b8a8d0;
  --lava-teal: #8fbf9a;
  --lava-teal-2: #b7e8c8;
  --lava-header: color-mix(in srgb, var(--lava-bg) 90%, transparent);
  --lava-shadow: rgba(20, 24, 36, 0.22);
  --lava-scheme: dark;
  color-scheme: dark;
}

html,
body {
  background-color: var(--lava-bg);
  color: var(--lava-text);
}

body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

::-webkit-scrollbar-thumb {
  background: var(--lava-faint);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--lava-muted);
}

.bg-\[\#fdf8ff\],
.min-h-screen.bg-\[\#fdf8ff\] {
  background-color: var(--lava-bg) !important;
}
.bg-\[\#fdf8ff\]\/90,
header.bg-\[\#fdf8ff\]\/90 {
  background-color: var(--lava-header) !important;
}
.bg-white {
  background-color: var(--lava-surface) !important;
}
.bg-\[\#f7f1ff\] {
  background-color: var(--lava-surface-alt) !important;
}
.bg-\[\#f1ebff\],
.bg-\[\#e9ddff\],
.bg-\[\#e5d8ff\] {
  background-color: var(--lava-surface-2) !important;
}
.bg-\[\#ece4ff\] {
  background-color: var(--lava-primary-soft) !important;
}
.bg-\[\#523d86\],
.bg-\[\#31295c\] {
  background-color: var(--lava-primary) !important;
  color: var(--lava-on-primary);
}
.bg-\[\#6a55a0\] {
  background-color: var(--lava-primary-hover) !important;
}
.bg-\[\#cbc4d1\] {
  background-color: var(--lava-faint) !important;
}

.hover\:bg-\[\#ece4ff\]:hover,
.hover\:bg-\[\#f1ebff\]:hover,
.hover\:bg-\[\#f7f1ff\]:hover {
  background-color: var(--lava-hover) !important;
}

.text-\[\#1c1246\],
.text-\[\#31295c\] {
  color: var(--lava-text) !important;
}
.text-\[\#494550\] {
  color: var(--lava-text-2) !important;
}
.text-\[\#7a7581\] {
  color: var(--lava-muted) !important;
}
.text-\[\#cbc4d1\] {
  color: var(--lava-faint) !important;
}
.text-\[\#523d86\],
.text-\[\#4e3983\],
.text-\[\#6a55a0\] {
  color: var(--lava-primary) !important;
}
.hover\:text-\[\#1c1246\]:hover,
.hover\:text-\[\#523d86\]:hover {
  color: var(--lava-text) !important;
}
.placeholder\:text-\[\#7a7581\]::placeholder {
  color: var(--lava-muted) !important;
}

.border-\[\#e6deff\],
.border-\[\#d0bcff\] {
  border-color: var(--lava-border) !important;
}
.border-\[\#f1ebff\],
.border-\[\#ece4ff\] {
  border-color: var(--lava-surface-2) !important;
}
.border-\[\#523d86\],
.focus-within\:border-\[\#523d86\]:focus-within {
  border-color: var(--lava-primary) !important;
}

.ring-white {
  --tw-ring-color: var(--lava-surface) !important;
}
.focus-within\:ring-\[\#523d86\]\/20:focus-within {
  --tw-ring-color: color-mix(in srgb, var(--lava-primary) 20%, transparent) !important;
}

.selection\:bg-\[\#6a55a0\]\/20::selection {
  background-color: color-mix(in srgb, var(--lava-primary) 22%, transparent);
}
.selection\:text-\[\#523d86\]::selection {
  color: var(--lava-primary);
}

aside.fixed,
header.fixed {
  background-color: var(--lava-surface-alt) !important;
  border-color: var(--lava-border) !important;
}
header.fixed {
  background-color: var(--lava-header) !important;
}

input,
textarea,
select {
  color: var(--lava-text);
}

#lava-theme-panel {
  position: fixed;
  z-index: 80;
  width: 220px;
  padding: 10px;
  border-radius: 16px;
  background: var(--lava-surface);
  color: var(--lava-text);
  border: 1px solid var(--lava-border);
  box-shadow: 0 12px 32px var(--lava-shadow);
  display: none;
}
#lava-theme-panel.is-open {
  display: block;
}
#lava-theme-panel h3 {
  margin: 0 0 8px;
  padding: 4px 6px 8px;
  font-size: 12px;
  font-weight: 800;
  border-bottom: 1px solid var(--lava-border);
}
#lava-theme-panel button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 2px 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--lava-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
}
#lava-theme-panel button:hover,
#lava-theme-panel button[aria-checked="true"] {
  background: var(--lava-surface-2);
}
#lava-theme-panel .swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--lava-border-strong);
  flex-shrink: 0;
}
#lava-theme-panel .check {
  margin-right: auto;
  font-size: 16px;
  color: var(--lava-primary);
  visibility: hidden;
}
#lava-theme-panel button[aria-checked="true"] .check {
  visibility: visible;
}