/* ==========================================================================
   WooGrub — dark-mode.css
   Midnight Kitchen — dark theme variable overrides.
   Applied via [data-theme="dark"] on <html>, set by dark-mode.js.
   All other styles inherit automatically via CSS custom properties.
   ========================================================================== */

[data-theme="dark"] {
  /* Brand — slightly desaturated for comfort on dark backgrounds */
  --wg-primary:        #F97316;   /* Brighter orange pops on dark */
  --wg-accent:         #FB923C;   /* Lighter hover state */

  /* Success — brighter green for contrast on dark; muted tinted circle */
  --wg-success:        #34C77B;
  --wg-success-bg:     #14331F;
  --wg-success-solid:  #1FA463;   /* disc stays deep for white-glyph contrast */

  /* Error — brighter red on dark; deep muted tint */
  --wg-error:          #FF6B6B;
  --wg-error-bg:       #331515;
  --wg-error-solid:    #C0392B;   /* deeper red disc, not the pink text color */

  /* Info — brighter blue on dark; deep muted tint */
  --wg-info:           #5AB0F2;
  --wg-info-bg:        #122433;
  --wg-info-solid:     #1565A0;

  /* Surfaces */
  --wg-bg:             #111111;   /* Near-black page background */
  --wg-surface:        #1E1E1E;   /* Cards, modals, panels */
  --wg-surface-raised: #2A2A2A;   /* Elevated surfaces */

  /* Text */
  --wg-text:           #F5F5F5;   /* Off-white — easier on eyes than pure white */
  --wg-text-muted:     #9A9A9A;
  --wg-text-on-primary:#FFFFFF;

  /* Borders */
  --wg-border:         #2E2E2E;
  --wg-border-strong:  #3E3E3E;

  /* Shadows — deeper on dark to maintain perceived depth */
  --wg-shadow-sm:  0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --wg-shadow:     0 4px 12px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.20);
  --wg-shadow-lg:  0 12px 32px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.20);
  --wg-shadow-overlay: 0 20px 60px rgba(0,0,0,.60);
}

/* ── Dark mode scroll behaviour ──────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
}

/* ── Dark mode image treatment ───────────────────────────────────────────── */
/* Slightly dim images so they don't blast brightness on dark backgrounds */
[data-theme="dark"] img:not([src*=".svg"]) {
  filter: brightness(0.92);
}

/* ── Dark mode input/form overrides ─────────────────────────────────────── */
/* WooCommerce injects its own form styles; these ensure inputs inherit correctly */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--wg-surface-raised);
  border-color: var(--wg-border);
  color: var(--wg-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--wg-text-muted);
}