/* ─────────────────────────────────────────────────────────────────────────

   DARK MODE

   The neutral palette flips while Klui's structure stays unchanged.

   ───────────────────────────────────────────────────────────────────────── */

body[data-mode="dark"] {

  color-scheme: dark;

  --bg: #1f1f1f;

  --bg-secondary: #2b2b2b;

  --text: #ececec;

  --text-secondary: #b4b4b4;

  --text-tertiary: #8a8a8a;

  --border: #3a3a3a;

  --border-light: #2e2e2e;

  --accent: #ececec;

  --accent-hover: #ffffff;

  --accent-contrast: #1a1a1a;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);

  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);

  --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);

  --code-bg: #161616;

  --code-header-bg: #232323;

  --code-border: #333333;

  --code-text: #e6e6e6;

  --code-inline-bg: #3a2a30;

  --code-inline-text: #ff9bb3;

  background: #1f1f1f;

}

body[data-mode="dark"] {

  --bg: #000000;

  --bg-secondary: #1a1a1a;

  --border: #303030;

  --border-light: #1f1f1f;

  background: #000000;

}

body[data-mode="dark"] .composer {

  background: var(--bg-secondary);

}

body[data-mode="dark"] .spectrum-pop {

  background: var(--bg-secondary);

}

body[data-mode="dark"] .spectrum-thumb {

  background: #f4f4f5;

}

/* ─────────────────────────────────────────────────────────────────────────

   ACCENT COLOR PRESETS

   "default" emits no override. Saturated presets pair with readable text.

   ───────────────────────────────────────────────────────────────────────── */

body[data-accent="indigo"] { --accent: #4f46e5; --accent-hover: #4338ca; --accent-contrast: #ffffff; }

body[data-accent="emerald"] { --accent: #059669; --accent-hover: #047857; --accent-contrast: #ffffff; }

body[data-accent="rose"] { --accent: #e11d48; --accent-hover: #be123c; --accent-contrast: #ffffff; }

body[data-accent="ocean"] { --accent: #1aa7ff; --accent-hover: #0b8fe6; --accent-contrast: #ffffff; }

body[data-accent="violet"] { --accent: #7c3aed; --accent-hover: #6d28d9; --accent-contrast: #ffffff; }

body[data-accent="teal"] { --accent: #0f766e; --accent-hover: #115e59; --accent-contrast: #ffffff; }

body[data-accent="amber"] { --accent: #b45309; --accent-hover: #92400e; --accent-contrast: #ffffff; }

/* Slightly brighter accents in dark mode for contrast against dark surfaces.

   --accent-contrast is restated to keep text on colored accents legible. */

body[data-mode="dark"][data-accent="indigo"] { --accent: #6366f1; --accent-hover: #818cf8; --accent-contrast: #ffffff; }

body[data-mode="dark"][data-accent="emerald"] { --accent: #10b981; --accent-hover: #34d399; --accent-contrast: #ffffff; }

body[data-mode="dark"][data-accent="rose"] { --accent: #f43f5e; --accent-hover: #fb7185; --accent-contrast: #ffffff; }

body[data-mode="dark"][data-accent="ocean"] { --accent: #1aa7ff; --accent-hover: #4dbbff; --accent-contrast: #ffffff; }

body[data-mode="dark"][data-accent="violet"] { --accent: #8b5cf6; --accent-hover: #a78bfa; --accent-contrast: #ffffff; }

body[data-mode="dark"][data-accent="teal"] { --accent: #14b8a6; --accent-hover: #2dd4bf; --accent-contrast: #062c2a; }

body[data-mode="dark"][data-accent="amber"] { --accent: #f59e0b; --accent-hover: #fbbf24; --accent-contrast: #1a1a1a; }

/* Color preset swatches (settings) */

.color-preset-row {

  display: flex;

  gap: 10px;

  align-items: center;

}

.color-swatch {

  width: 30px;

  height: 30px;

  border-radius: var(--radius-full);

  border: 1px solid var(--border);

  background: var(--bg);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;

}

.color-swatch:hover { transform: translateY(-1px); }

.color-swatch.active {

  border-color: var(--text);

  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);

}

.color-swatch-dot {

  width: 18px;

  height: 18px;

  border-radius: var(--radius-full);

  display: block;

}

.color-swatch-dot[data-swatch="default"] {

  background: linear-gradient(135deg, #0d0d0d 0 50%, #c9c9c9 50% 100%);

}

.color-swatch-dot[data-swatch="indigo"] { background: #4f46e5; }

.color-swatch-dot[data-swatch="emerald"] { background: #059669; }

.color-swatch-dot[data-swatch="rose"] { background: #e11d48; }

.color-swatch-dot[data-swatch="ocean"] { background: #1aa7ff; }

.color-swatch-dot[data-swatch="violet"] { background: #7c3aed; }

.color-swatch-dot[data-swatch="teal"] { background: #0f766e; }

.color-swatch-dot[data-swatch="amber"] { background: #f59e0b; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; border: none; background: none; }

.hidden { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }