:root {
  color-scheme: light;
  /* hsl (fallback color) */
  --bg-dark: hsl(210 12% 93%);
  --bg: hsl(210 12% 97%);
  --bg-light: hsl(0 0% 100%);
  --text: hsl(210 20% 12%);
  --text-muted: hsl(210 10% 50%);
  --highlight: hsl(210 100% 100%);
  --border: hsl(210 15% 82%);
  --border-muted: hsl(210 15% 90%);

  /* Vivid Accents */
  --primary: #2B6CB0;
  --secondary: hsl(35 95% 55%);
  --danger: hsl(0 85% 58%);
  --warning: hsl(45 95% 50%);
  --success: hsl(145 80% 42%);
  --info: hsl(200 90% 52%);

  --scrollbar: rgba(0, 0, 0, 0.2);
  --scrollbar-hover: rgba(0, 0, 0, 0.4);

  /* oklch */
  --bg-dark: oklch(0.94 0.01 250);
  --bg: oklch(0.97 0.005 250);
  --bg-light: oklch(1 0 0);
  --text: oklch(0.25 0.02 250);
  --text-muted: oklch(0.55 0.02 250);
  --highlight: oklch(1 0 0);
  --border: oklch(0.85 0.01 250);
  --border-muted: oklch(0.92 0.01 250);

  --primary: #2B6CB0;
  --secondary: oklch(0.7 0.18 60);
  --danger: oklch(0.6 0.2 25);
  --warning: oklch(0.75 0.18 85);
  --success: oklch(0.6 0.18 145);
  --info: oklch(0.65 0.15 230);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-1-4: 0.35rem;
  --space-2-8: 0.7rem;
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-4: 12px;
  --control-h: 32px;
  --control-h-lg: 42px;
  --space-1-5: 0.375rem;
  --icon-1: 14px;
  --icon-2: 18px;
  --icon-3: 20px;
  --icon-4: 22px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0 0 0 / 0.06);
  --shadow-md: 0 2px 6px rgba(0 0 0 / 0.12);
  --shadow-lg: 0 8px 16px rgba(0 0 0 / 0.10);

  /* =====================================================
     Block Type Colors - Light Mode
     Each block type has a distinct, easily identifiable color
  ===================================================== */

  --block-ai-color: oklch(0.75 0.14 255);
  /* blue */
  --block-freetext-color: oklch(0.75 0.14 45);
  /* yellow-gold */
  --block-date-color: oklch(0.75 0.14 0);
  /* red */
  --block-lib-1-color: oklch(0.75 0.14 100);
  /* green */
  --block-lib-2-color: oklch(0.75 0.14 150);
  /* blue-green */
  --block-lib-3-color: oklch(0.75 0.14 200);
  /* cyan-blue */
  --block-lib-4-color: oklch(0.75 0.14 300);
  /* purple */
  --block-lib-all-color: oklch(0.88 0.02 250);
  /* neutral light */

  --placeholder-color: var(--text-muted);
  /* ghost text */
  --placeholder-underline: var(--border);
  /* dotted line when empty */
  --placeholder-active: var(--primary);
  /* underline when focused */
  --placeholder-text: var(--primary);
  /* typed value */


  /* Transitions */
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}

body {
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

.qlus-offer-editor *:not(select),
.qlus-offer-editor *:not(select)::before,
.qlus-offer-editor *:not(select)::after {
  transition: background-color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow), color var(--transition-slow);
}

.qlus-offer-editor select {
  transition: none !important;
}


/* =====================================================
   BlockType → Real UI styles
   Assembly + Library blocks
===================================================== */

.qlus-block {
  border-left: 4px solid var(--border-muted);
  background: var(--bg-light);
}

/* AI */
.qlus-block[data-block-type="block-ai"] {
  border-left-color: var(--block-ai-color);
}

/* Free text */
.qlus-block[data-block-type="block-freetext"] {
  border-left-color: var(--block-freetext-color);
}

/* Date */
.qlus-block[data-block-type="block-date"] {
  border-left-color: var(--block-date-color);
}

/* Library categories */
.qlus-block[data-block-type="block-lib-1"] {
  border-left-color: var(--block-lib-1-color);
}

.qlus-block[data-block-type="block-lib-2"] {
  border-left-color: var(--block-lib-2-color);
}

.qlus-block[data-block-type="block-lib-3"] {
  border-left-color: var(--block-lib-3-color);
}

.qlus-block[data-block-type="block-lib-4"] {
  border-left-color: var(--block-lib-4-color);
}

/* "All" pseudo-type used in filters */
.qlus-block[data-block-type="block-lib-all"] {
  border-left-color: var(--block-lib-all-color);
}


:root.dark,
html.dark {
  color-scheme: dark;
  /* hsl (fallback color) */
  --bg-dark: hsl(220 20% 8%);
  --bg: hsl(220 20% 12%);
  --bg-light: hsl(220 20% 16%);
  --text: hsl(210 20% 90%);
  --text-muted: hsl(210 15% 65%);
  --highlight: hsl(210 20% 20%);
  --border: hsl(210 20% 22%);
  --border-muted: hsl(210 20% 18%);

  /* GeneratePress Theme Overrides */
  --base: var(--bg-dark);
  --base-2: var(--bg);
  --base-3: var(--bg-light);
  --contrast: var(--text);
  --contrast-2: var(--text-muted);
  --contrast-3: var(--border);
  --accent: var(--primary);

  /* Vivid Accents (Dark Mode) */
  --primary: hsl(215 90% 60%);
  --secondary: hsl(35 95% 60%);
  --danger: hsl(0 85% 65%);
  --warning: hsl(45 95% 55%);
  --success: hsl(145 80% 50%);
  --info: hsl(200 90% 60%);

  --scrollbar: rgba(255, 255, 255, 0.2);
  --scrollbar-hover: rgba(255, 255, 255, 0.4);

  /* oklch */
  --bg-dark: oklch(0.14 0.01 250);
  --bg: oklch(0.18 0.02 250);
  --bg-light: oklch(0.24 0.02 250);
  --text: oklch(0.9 0.01 250);
  --text-muted: oklch(0.65 0.02 250);
  --highlight: oklch(0.28 0.03 250);
  --border: oklch(0.32 0.03 250);
  --border-muted: oklch(0.24 0.03 250);

  --primary: oklch(0.65 0.2 250);
  --secondary: oklch(0.75 0.18 60);
  --danger: oklch(0.65 0.2 25);
  --warning: oklch(0.8 0.18 85);
  --success: oklch(0.65 0.18 145);
  --info: oklch(0.7 0.15 230);

  /* Shadows (Dark Mode - high contrast for visibility) */
  --shadow-sm: 0 2px 4px rgba(0 0 0 / 0.4);
  --shadow-md: 0 4px 10px rgba(0 0 0 / 0.5);
  --shadow-lg: 0 12px 24px rgba(0 0 0 / 0.6);

  /* =====================================================
     Block Type Colors - Dark Mode
     Brighter versions for better visibility on dark backgrounds
  ===================================================== */

  --block-ai-color: oklch(0.65 0.18 255);
  --block-freetext-color: oklch(0.65 0.18 45);
  --block-date-color: oklch(0.65 0.18 0);
  --block-lib-1-color: oklch(0.65 0.18 100);
  --block-lib-2-color: oklch(0.65 0.18 150);
  --block-lib-3-color: oklch(0.65 0.18 200);
  --block-lib-4-color: oklch(0.65 0.18 300);
  --block-lib-all-color: oklch(0.3 0.02 250);

  /* Placeholder - Dark Mode */
  --placeholder-color: oklch(0.55 0.02 250);
  /* ghost text */
  --placeholder-underline: oklch(0.4 0.03 250);
  /* dotted line - lighter */
  --placeholder-active: var(--primary);
  /* underline when focused */
  --placeholder-text: var(--primary);

}

/* =====================================================
   Theme Toggle Button
   ===================================================== */
.qlus-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-base);
  margin-left: auto;
  margin-right: 12px;
}

.qlus-theme-toggle:hover {
  background: var(--bg-light);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.qlus-theme-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
}

html.dark .qlus-theme-toggle .sun-icon {
  display: block;
}

html.dark .qlus-theme-toggle .moon-icon {
  display: none;
}

html:not(.dark) .qlus-theme-toggle .sun-icon {
  display: none;
}

html:not(.dark) .qlus-theme-toggle .moon-icon {
  display: block;
}




/* =====================================================
   Drag Handle Icon Coloring by Block Type
   (Assembly + Library)
   Uses the same variables as border-left
===================================================== */

/* AI */
.qlus-block[data-block-type="block-ai"] .qlus-block-icon svg,
.qlus-block[data-block-type="block-ai"] .qlus-handle svg {
  stroke: var(--block-ai-color) !important;
}

/* Free text */
.qlus-block[data-block-type="block-freetext"] .qlus-block-icon svg,
.qlus-block[data-block-type="block-freetext"] .qlus-handle svg {
  stroke: var(--block-freetext-color) !important;
}

/* Date */
.qlus-block[data-block-type="block-date"] .qlus-block-icon svg,
.qlus-block[data-block-type="block-date"] .qlus-handle svg {
  stroke: var(--block-date-color) !important;
}

/* Lib 1 */
.qlus-block[data-block-type="block-lib-1"] .qlus-block-icon svg,
.qlus-block[data-block-type="block-lib-1"] .qlus-handle svg {
  stroke: var(--block-lib-1-color) !important;
}

/* Lib 2 */
.qlus-block[data-block-type="block-lib-2"] .qlus-block-icon svg,
.qlus-block[data-block-type="block-lib-2"] .qlus-handle svg {
  stroke: var(--block-lib-2-color) !important;
}

/* Lib 3 */
.qlus-block[data-block-type="block-lib-3"] .qlus-block-icon svg,
.qlus-block[data-block-type="block-lib-3"] .qlus-handle svg {
  stroke: var(--block-lib-3-color) !important;
}

/* Lib 4 */
.qlus-block[data-block-type="block-lib-4"] .qlus-block-icon svg,
.qlus-block[data-block-type="block-lib-4"] .qlus-handle svg {
  stroke: var(--block-lib-4-color) !important;
}

/* ALL */
.qlus-block[data-block-type="block-lib-all"] .qlus-block-icon svg,
.qlus-block[data-block-type="block-lib-all"] .qlus-handle svg {
  stroke: var(--block-lib-all-color) !important;
}



/* =====================================================
   Spacing Utilities
===================================================== */
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 1rem;
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 1rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 1rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 1rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-3 {
  padding-left: 1rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 1rem;
}