/* ============================================
   Dark Mode (auto — follows OS preference)
   ============================================
   This file is loaded ONLY when the "Enable Dark Mode CSS" theme
   setting is on. Each layout links it behind a theme.dark_mode.enabled
   check, so switching the setting off truly disables auto dark mode.

   It collects every `@media (prefers-color-scheme: dark)` block that
   used to live (unconditionally) in modern.css, forms.css, accordion.css
   and components/system-pages.css. Manual [data-theme-override="dark"]
   rules stay in their source files — they only ever match when the
   header's dark-mode JS (itself gated by this same setting) sets the
   attribute, so they are inert when the setting is off.
   ============================================ */

/* --------------------------------------------
   Tokens + global elements (was modern.css)
   -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-gray-900);
    --color-bg-secondary: var(--color-gray-800);
    --color-bg-tertiary: var(--color-gray-700);
    --color-text: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);
    --color-text-muted: var(--color-gray-500);
    --color-border: var(--color-gray-700);
    --color-border-light: var(--color-gray-800);

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 3px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 15px 25px rgba(0, 0, 0, 0.4), 0 5px 10px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
  }
}

/* --------------------------------------------
   Forms (was components/forms.css)
   -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --input-border-color: #4a5568;
    --input-bg: #2d3748;
    --input-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  input,
  textarea,
  select {
    color: #e2e8f0;
  }

  input::placeholder,
  textarea::placeholder {
    color: #718096;
  }

  label {
    color: #cbd5e0;
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    background-color: #1a202c;
  }
}

/* --------------------------------------------
   Accordion (was components/accordion.css)
   -------------------------------------------- */
/* Surface colours (bg/border/text) now fall back to adaptive theme tokens in
   accordion.css, so native <details> and the Accordion module follow dark mode
   automatically — no variable override needed here. Only the elevated "card"
   variant needs a deeper shadow on dark surfaces. */
@media (prefers-color-scheme: dark) {
  details.accordion--card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  details.accordion--card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

/* Grey divider sections (src/sections/grey*.html, blog-index hero) no longer
   need a dark-mode override: they use translucent grey backgrounds that
   composite correctly over both the light and dark page surface. See audit N1.
   (css_class is not a supported dnd_section param, so the old class-based
   override never matched anyway.) */

/* --------------------------------------------
   System pages (was components/system-pages.css)
   -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .system-container {
    border-color: var(--color-border, #374151);
  }

  .system-status.success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
  }

  .system-status.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
  }

  .system-status.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
  }

  .system-status.info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
  }
}
