/* ============================================================================
 * Error Hunter — css/themes.css   (msnugget brand)
 * Theming layer: CSS custom properties shared by the landing page and the app.
 *   :root                  -> msnugget DARK palette  (the DEFAULT brand theme)
 *   [data-theme="dark"]    -> identical DARK palette  (explicit dark)
 *   [data-theme="light"]   -> clean LIGHT palette keeping the green accent
 * app.js resolves the "auto" setting to either "light" or "dark" via matchMedia.
 *
 * Brand look: pure-black background, signature green accent (#39A751),
 * ultra-bold white headings, light-grey body text, rounded green pill buttons.
 *
 * Category model (Intune error families) — each gets a hue used by the chips:
 *   Enrollment, App install, Autopilot, Company Portal, Compliance, Policy,
 *   Apple, Android, Connectivity, Licensing, Generic.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * DARK THEME — the DEFAULT msnugget brand theme.
 * ------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg:            #000000;             /* pure black app background            */
  --bg-elev:       #0c120b;             /* elevated panels (faint green tint)   */
  --bg-grid:       #050705;             /* sunken scroll/section background     */

  /* Text */
  --fg:            #d2d7dc;             /* primary light-grey body text         */
  --fg-dim:        #9aa1a8;             /* secondary text / metadata            */
  --fg-faint:      rgba(255,255,255,0.42); /* faint hints / placeholders        */
  --heading:       #ffffff;            /* ultra-bold white headings            */

  /* Borders */
  --border:        rgba(255,255,255,0.10); /* subtle separators                */
  --border-strong: rgba(255,255,255,0.18); /* stronger dividers / inputs       */

  /* Accent (signature green) */
  --accent:        #39a751;            /* msnugget green                        */
  --accent-fg:     #ffffff;            /* text/icon on accent fill              */
  --accent-soft:   rgba(57,167,81,0.16); /* soft accent wash                    */
  --accent-border: rgba(57,167,81,0.55); /* accent outline                      */
  --accent-btn:    #267038;            /* darker for 4.5:1 contrast w/ white     */

  /* Status hues */
  --err:           #ff6b6b;
  --warn:          #e3a84b;
  --ok:            #39a751;
  --info:          #7aa2c4;

  /* Category chip hues (foreground) */
  --cat-enrollment:    #6cc8ff;
  --cat-app:           #b39cf6;
  --cat-autopilot:     #ffb86b;
  --cat-portal:        #7ad6c0;
  --cat-compliance:    #ff8fa3;
  --cat-policy:        #e3a84b;
  --cat-apple:         #c9d1d9;
  --cat-android:       #8bd17c;
  --cat-connectivity:  #67c0e0;
  --cat-licensing:     #d6a3ff;
  --cat-generic:       #9aa1a8;

  /* Generic chrome hover/active */
  --hover-bg:      rgba(255,255,255,0.06);
  --active-bg:     rgba(255,255,255,0.10);

  /* Highlight (matched code token) */
  --hl:            rgba(57,167,81,0.32);

  /* Effects */
  --shadow:        rgba(0,0,0,0.6);
  --scroll-thumb:  rgba(255,255,255,0.16);

  /* Fonts */
  --font-ui:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code",
               "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono",
               "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------------------
 * LIGHT THEME — clean light variant that keeps the green accent.
 * ------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #ffffff;
  --bg-elev:       #f5f7f5;
  --bg-grid:       #f0f3f0;

  --fg:            #1d2421;
  --fg-dim:        #5b665f;
  --fg-faint:      #8a948c;
  --heading:       #0c130f;

  --border:        #e2e8e3;
  --border-strong: #cdd6cf;

  --accent:        #1f8f3d;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(31,143,61,0.12);
  --accent-border: rgba(31,143,61,0.45);
  --accent-btn:    #1c6e30;

  --err:           #d64545;
  --warn:          #b9791f;
  --ok:            #1f8f3d;
  --info:          #3b6ea5;

  --cat-enrollment:    #1f6fb2;
  --cat-app:           #6b4fc4;
  --cat-autopilot:     #b9791f;
  --cat-portal:        #1f8f7d;
  --cat-compliance:    #c23a55;
  --cat-policy:        #9a6a14;
  --cat-apple:         #4a525a;
  --cat-android:       #2f8f2a;
  --cat-connectivity:  #2076a0;
  --cat-licensing:     #7a3fc0;
  --cat-generic:       #5b665f;

  --hover-bg:      rgba(0,0,0,0.05);
  --active-bg:     rgba(0,0,0,0.08);

  --hl:            rgba(31,143,61,0.22);

  --shadow:        rgba(16,24,40,0.16);
  --scroll-thumb:  rgba(0,0,0,0.18);
}

/* ---------------------------------------------------------------------------
 * Smooth theme-switch transition on the chrome only (respects reduced motion).
 * ------------------------------------------------------------------------- */
body,
.app-bar,
.result-card,
.catalog,
.modal,
.toast {
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .app-bar,
  .result-card,
  .catalog,
  .modal,
  .toast {
    transition: none;
  }
}