/* ═══════════════════════════════════════════════════════════
   ArchFlow CRM — Dark Mode Theme
   CSS Custom Properties (RGB space-separated for Tailwind opacity support)
   ═══════════════════════════════════════════════════════════ */

/* ── Light Mode (default) ─────────────────────────────────── */
:root {
  --c-cream: 242 240 233;
  --c-ink: 26 26 26;
  --c-forest: 46 64 54;
  --c-terra: 204 88 51;
  --c-surface: 255 255 255;
  --c-success: 46 107 69;
  --c-warning: 212 168 67;
  --c-error: 194 59 34;
  --c-info: 58 107 140;
  --c-neutral-50: 250 250 247;
  --c-neutral-100: 245 245 240;
  --c-neutral-200: 232 230 223;
  --c-neutral-300: 212 210 203;
  --c-neutral-400: 168 166 159;
  --c-neutral-500: 124 122 115;
  --c-neutral-600: 86 84 79;
  --c-neutral-700: 61 59 55;
  --c-neutral-800: 42 40 38;
  --c-neutral-900: 26 26 26;
}

/* ── Dark Mode ────────────────────────────────────────────── */
html.dark {
  --c-cream: 13 15 21;
  --c-ink: 226 224 217;
  --c-forest: 22 34 27;
  --c-terra: 220 110 70;
  --c-surface: 20 22 28;
  --c-success: 62 145 95;
  --c-warning: 225 185 95;
  --c-error: 215 85 62;
  --c-info: 78 145 182;
  --c-neutral-50: 15 17 24;
  --c-neutral-100: 20 22 28;
  --c-neutral-200: 28 31 38;
  --c-neutral-300: 38 41 50;
  --c-neutral-400: 85 88 98;
  --c-neutral-500: 132 135 145;
  --c-neutral-600: 162 165 172;
  --c-neutral-700: 192 195 202;
  --c-neutral-800: 212 215 222;
  --c-neutral-900: 235 238 242;
}

/* ── Smooth Transition ────────────────────────────────────── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              fill 0.35s ease,
              stroke 0.35s ease !important;
}

/* ── Dark Mode Scrollbar ──────────────────────────────────── */
html.dark::-webkit-scrollbar-track { background: rgb(13 15 21); }
html.dark::-webkit-scrollbar-thumb { background: rgb(46 64 54); }
html.dark ::selection { background: rgb(220 110 70); color: rgb(13 15 21); }

/* ── Toggle Button Icons ──────────────────────────────────── */
html:not(.dark) .dm-icon-sun  { display: none !important; }
html:not(.dark) .dm-icon-moon { display: inline-block !important; }
html.dark .dm-icon-moon { display: none !important; }
html.dark .dm-icon-sun  { display: inline-block !important; }

/* ── Toggle Button Animation ──────────────────────────────── */
#darkModeToggle iconify-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
#darkModeToggle:hover iconify-icon {
  transform: rotate(15deg) scale(1.1);
}
#darkModeToggle:active iconify-icon {
  transform: scale(0.9);
}