/* ============================================================
   SpamDuster console themes — Midnight (dark) + Slate (light)
   ------------------------------------------------------------
   Tokens are RGB *channels* (space-separated) so Tailwind's
   alpha modifiers keep working:  bg-panel/60 -> rgb(var(--c-panel)/.6)
   The slate scale is treated as a SEMANTIC RAMP: low numbers =
   strongest text, high = subtlest, so text-slate-100..600 flip
   correctly between themes without touching markup.
   Midnight values equal the pre-theme hardcoded design (no regression).
   ============================================================ */

/* default (Slate / light) — used whenever data-theme isn't midnight */
:root,
:root[data-theme="slate"]{
  --c-ink:    238 241 246;   /* app background        */
  --c-panel:  255 255 255;   /* cards / surfaces       */
  --c-edge:   210 218 230;   /* borders                */
  --c-signal:  37  99 168;   /* accent (steel blue)    */
  --c-signal2: 26  84 156;   /* accent text on light   */
  --s-100: 15 23 42;   --s-200: 30 41 59;   --s-300: 51 65 85;
  --s-400: 71 85 105;  --s-500: 100 116 139; --s-600: 148 163 184;
  --s-700: 203 213 225; --s-900: 248 250 252; /* 900 = input/well surface */
  --app-bg:
     radial-gradient(900px 500px at 88% -8%, rgba(37,99,168,.06), transparent 60%),
     radial-gradient(700px 400px at 0% 0%,  rgba(37,99,168,.045), transparent 55%), #eef1f6;
  --sb-thumb: #c4ccdb;
  color-scheme: light;
}

/* Midnight / dark — the original design, unchanged */
:root[data-theme="midnight"]{
  --c-ink:    11 16 32;
  --c-panel:  17 23 42;
  --c-edge:   30 39 66;
  --c-signal: 99 102 241;
  --c-signal2: 129 140 248;
  --s-100: 241 245 249; --s-200: 226 232 240; --s-300: 203 213 225;
  --s-400: 148 163 184; --s-500: 100 116 139; --s-600: 71 85 105;
  --s-700: 51 65 85;   --s-900: 15 23 42;
  --app-bg:
     radial-gradient(900px 500px at 88% -8%, rgba(99,102,241,.10), transparent 60%),
     radial-gradient(700px 400px at 0% 0%,  rgba(129,140,248,.06), transparent 55%), #0b1020;
  --sb-thumb: #23304f;
  color-scheme: dark;
}

body{ background: var(--app-bg) !important; background-attachment: fixed; }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background: var(--sb-thumb); border-radius:8px }
[x-cloak]{ display:none !important }

/* ---- Slate-only reinterpretation of dark-authored utilities ----
   These patterns are always subtle overlays on a panel (never on an
   accent fill), so flipping them to faint dark tints is safe.        */
:root[data-theme="slate"] .bg-white\/5     { background-color: rgb(15 27 45 / .045) !important }
:root[data-theme="slate"] .bg-white\/10    { background-color: rgb(15 27 45 / .06)  !important }
:root[data-theme="slate"] .bg-white\/20    { background-color: rgb(15 27 45 / .10)  !important }
:root[data-theme="slate"] .bg-white\/\[0\.02\]{ background-color: rgb(15 27 45 / .02) !important }
:root[data-theme="slate"] .hover\:bg-white\/5:hover  { background-color: rgb(15 27 45 / .05) !important }
:root[data-theme="slate"] .hover\:bg-white\/20:hover { background-color: rgb(15 27 45 / .10) !important }
:root[data-theme="slate"] .hover\:text-white:hover   { color: rgb(15 23 42) !important }

/* Status pastels are tuned for a dark ground; darken them for light. */
:root[data-theme="slate"] .text-rose-100,
:root[data-theme="slate"] .text-rose-200,
:root[data-theme="slate"] .text-rose-300,
:root[data-theme="slate"] .text-rose-400   { color:#be123c !important }
:root[data-theme="slate"] .text-emerald-100,
:root[data-theme="slate"] .text-emerald-200,
:root[data-theme="slate"] .text-emerald-300,
:root[data-theme="slate"] .text-emerald-400{ color:#047857 !important }
:root[data-theme="slate"] .text-amber-200,
:root[data-theme="slate"] .text-amber-300  { color:#b45309 !important }
:root[data-theme="slate"] .text-orange-300,
:root[data-theme="slate"] .text-orange-400 { color:#c2410c !important }
:root[data-theme="slate"] .text-fuchsia-300{ color:#a21caf !important }

/* Slate identity: serif headings (matches the approved Slate direction) */
:root[data-theme="slate"] .font-display{
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: 0 !important;
}