:root {
  --theme-bg: #020617;
  --theme-panel: #0f172a;
  --theme-panel-2: #1e293b;
  --theme-text: #f1f5f9;
  --theme-muted: #94a3b8;
  --theme-accent: #06b6d4;
  --theme-accent-text: #020617;
  --theme-border: #1e293b;
  --theme-radius: 1rem;
  --theme-font: ui-sans-serif, system-ui, sans-serif;
}

html {
  font-size: calc(16px * var(--font-scale, 1));
}

body {
  background: var(--theme-background, var(--theme-bg)) !important;
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
}

/* Algemene themalaag */
#appShell header,
#appShell nav,
article,
.modal-backdrop > div,
.modal-backdrop > form {
  border-color: var(--theme-border) !important;
}

article,
.modal-backdrop > div,
.modal-backdrop > form {
  border-radius: var(--theme-radius) !important;
}

input,
select,
textarea {
  background: var(--theme-input, var(--theme-bg)) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--theme-muted) !important;
}

.text-slate-300,
.text-slate-400,
.text-slate-500 {
  color: var(--theme-muted) !important;
}

.bg-cyan-500 {
  background-color: var(--theme-accent) !important;
}

.text-cyan-300,
.text-cyan-400 {
  color: var(--theme-accent) !important;
}

.border-cyan-500\/30,
.border-cyan-500\/20,
.border-cyan-500\/40 {
  border-color: color-mix(
    in srgb,
    var(--theme-accent) 40%,
    transparent
  ) !important;
}

/* PULSEFIT */
html[data-theme="pulsefit"] {
  --theme-bg: #020617;
  --theme-panel: #0f172a;
  --theme-panel-2: #1e293b;
  --theme-text: #f1f5f9;
  --theme-muted: #94a3b8;
  --theme-accent: #06b6d4;
  --theme-accent-text: #020617;
  --theme-border: #1e293b;
  --theme-radius: 1rem;
  --theme-font: ui-sans-serif, system-ui, sans-serif;
  --theme-background:
    radial-gradient(circle at 20% 0%, rgba(6,182,212,.09), transparent 30rem),
    #020617;
}

/* FANTASY GUILD */
html[data-theme="fantasy"] {
  --theme-bg: #10150f;
  --theme-panel: #1b2418;
  --theme-panel-2: #293321;
  --theme-text: #f5ecd2;
  --theme-muted: #b7aa89;
  --theme-accent: #d6aa4b;
  --theme-accent-text: #171208;
  --theme-border: #66512a;
  --theme-radius: .55rem;
  --theme-font: Georgia, "Times New Roman", serif;
  --theme-input: #11170f;
  --theme-background:
    radial-gradient(circle at 50% -10%, rgba(214,170,75,.18), transparent 35rem),
    linear-gradient(135deg, #0c120c, #182017 55%, #0b100b);
}

html[data-theme="fantasy"] article,
html[data-theme="fantasy"] .modal-backdrop > div,
html[data-theme="fantasy"] .modal-backdrop > form {
  background:
    linear-gradient(145deg, rgba(37,48,31,.98), rgba(20,27,18,.98))
    !important;
  border: 1px solid #66512a !important;
  box-shadow:
    0 12px 35px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(214,170,75,.08) !important;
}

html[data-theme="fantasy"] #appShell header,
html[data-theme="fantasy"] #appShell nav {
  background: rgba(18,25,16,.97) !important;
  border-color: #66512a !important;
}

html[data-theme="fantasy"] h1,
html[data-theme="fantasy"] h2,
html[data-theme="fantasy"] h3 {
  letter-spacing: .025em;
  text-shadow: 0 1px 8px rgba(214,170,75,.14);
}

/* OBSIDIAN GOLD */
html[data-theme="obsidian"] {
  --theme-bg: #050505;
  --theme-panel: #111111;
  --theme-panel-2: #1c1a15;
  --theme-text: #faf5e7;
  --theme-muted: #a89e86;
  --theme-accent: #e8b94f;
  --theme-accent-text: #080604;
  --theme-border: #42371f;
  --theme-radius: .85rem;
  --theme-font: ui-sans-serif, system-ui, sans-serif;
  --theme-input: #090909;
  --theme-background:
    radial-gradient(circle at 80% 0%, rgba(232,185,79,.12), transparent 30rem),
    linear-gradient(145deg, #020202, #0c0b08);
}

html[data-theme="obsidian"] article,
html[data-theme="obsidian"] .modal-backdrop > div,
html[data-theme="obsidian"] .modal-backdrop > form {
  background:
    linear-gradient(145deg, rgba(20,20,19,.98), rgba(7,7,7,.98))
    !important;
  border-color: #42371f !important;
}

/* MINIMAL LIGHT */
html[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #f3f5f7;
  --theme-panel: #ffffff;
  --theme-panel-2: #e8edf2;
  --theme-text: #152033;
  --theme-muted: #667085;
  --theme-accent: #087f98;
  --theme-accent-text: #ffffff;
  --theme-border: #d5dce5;
  --theme-radius: 1rem;
  --theme-font: ui-sans-serif, system-ui, sans-serif;
  --theme-input: #ffffff;
  --theme-background: linear-gradient(145deg, #f7f9fb, #edf1f5);
}

html[data-theme="light"] article,
html[data-theme="light"] .modal-backdrop > div,
html[data-theme="light"] .modal-backdrop > form {
  background: #ffffff !important;
  color: #152033 !important;
  border-color: #d5dce5 !important;
  box-shadow: 0 8px 25px rgba(30,41,59,.08) !important;
}

html[data-theme="light"] #appShell header,
html[data-theme="light"] #appShell nav {
  background: rgba(255,255,255,.97) !important;
  color: #152033 !important;
  border-color: #d5dce5 !important;
}

html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-800 {
  background-color: #f2f5f8 !important;
  color: #152033 !important;
}

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300 {
  color: #152033 !important;
}

/* Toegankelijkheid */
html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

/* Themavoorbeelden */
.theme-preview {
  min-height: 78px;
  border: 2px solid transparent;
}

.theme-preview.selected {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,.12);
}

.theme-preview-pulsefit {
  background: linear-gradient(135deg, #0f172a, #083344) !important;
  color: #ecfeff;
}

.theme-preview-fantasy {
  background: linear-gradient(135deg, #182017, #40351f) !important;
  color: #f5ecd2;
  font-family: Georgia, serif;
}

.theme-preview-obsidian {
  background: linear-gradient(135deg, #050505, #302713) !important;
  color: #f4d782;
}

.theme-preview-light {
  background: linear-gradient(135deg, #ffffff, #e8edf2) !important;
  color: #152033;
}