/* ===== Dark theme (item 500b4b13) =====
 * Overrides the CSS custom properties app.css declares on :root. Every rule
 * in app.css that reads a var(--...) picks these up automatically; raw hex
 * values hardcoded in a handful of older rules (and a few inline styles in
 * app.js) are NOT covered here — known gap, tracked as a follow-up rather
 * than blocking this toggle.
 *
 * Applied via html[data-theme="dark"] (see frontend/js/theme.js), so the
 * default (no attribute, or data-theme="light") renders byte-identically to
 * before this change.
 */
html[data-theme="dark"] {
  --primary: #7c8ce0;
  --primary-light: #8b9aeb;
  --primary-dark: #4a5798;
  --accent: #5398f6;
  --accent-light: #7bb6ff;
  --accent-soft: rgba(83,152,246,0.16);

  --bg: #12161f;
  --bg-card: #181d29;
  --bg-secondary: #1c212f;
  --bg-page: #12161f;
  --bg-input: #1c212f;
  --bg-hover: rgba(83,152,246,0.08);
  --bg-sidebar: #0e121a;
  --bg-sidebar-hover: rgba(255,255,255,0.06);
  --bg-sidebar-active: rgba(83,152,246,0.18);

  --text: #e6e9f2;
  --text-secondary: #a8adbd;
  --text-sec: #a8adbd;
  /* #7a8194 measured 4.33:1 on --bg-card and 4.12:1 on --bg-input — under the
     4.5:1 §8 requires, and --text-muted is documented in §2.1 as "the minimum
     for text that carries meaning", so it has to clear AA rather than sit at a
     decorative floor. design-review.css had ALREADY lifted it to #8b93a7 for
     dark; that fix never took effect because this file declares the same token
     at the same specificity and loads last, so this line silently won. Four
     stylesheets carry "NOT --text-muted: muted is 4.33:1 on the dark card"
     comments and route around it per-site — those workarounds exist because of
     this line. #8b93a7 is 5.48:1 on the card and still a visible step below
     --text-secondary (#a8adbd), so the muted tier stays a tier. */
  --text-muted: #8b93a7;
  --text-dim: rgba(230,233,242,0.5);
  --text-sidebar: #e6e9f2;
  --text-sidebar-active: #ffffff;

  --border: #2a3148;
  --border-light: #232a3a;

  --pass: #4ade80;
  --pass-bg: rgba(60,198,154,0.18);
  --pass-ink: #4ade80;
  --fail: #f87171;
  --fail-bg: rgba(193,21,58,0.22);
  --red: #f87171;

  /* --danger is introduced by design-review.css on :root ONLY (#c1153a) — the
     §10.2 trap: a token defined in one theme silently paints its light value in
     the other. As INK on the dark page that crimson measures 2.96:1 on
     --bg-page and 2.76:1 on --bg-card, against the 4.5:1 §8 requires.
     `.sf-fielderr` (design-review.css) is every field error message that reads
     through it.

     Take the red this palette ALREADY uses for the same signal — --fail/--red
     above, which is also the value the .u-btn--danger dark override in
     design-review.css picked by hand — rather than mint a fifth red: 6.54:1 on
     the page, 6.09:1 on a card. That override and this token now agree instead
     of contradicting each other.

     Light is untouched and stays #c1153a, which is AA-clean there. */
  --danger: #f87171;
  --pending: #a8adbd;
  --pending-bg: rgba(103,104,101,0.25);
  --partial: #fbbf5c;
  --partial-bg: rgba(250,169,56,0.18);
  --warning: #ff8a5c;
  --not-testable: #a8adbd;
  --not-testable-bg: rgba(103,104,101,0.18);
  --blue: #7b93f7;
  --blue-soft: rgba(71,78,203,0.18);
  --accent-bg: rgba(83,152,246,0.16);
  --purple: #c084fc;
  --purple-bg: rgba(168,85,247,0.18);
  --orange: #ff8a5c;
  --yellow: #fbbf5c;
  --green: #4ade80;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
}

/* ===== Literal-colour surfaces (item 46ba666e) =====
 * The variables above only reach rules that actually READ a var(). A few
 * surfaces are painted with literal light-mode colours instead — theme-luxe.css
 * on the chrome, app.css on the header title — and a literal ignores the
 * palette, so load order cannot rescue them: those rules win on their selectors
 * however late this file loads. The only fix is to re-state the same surfaces
 * here at a specificity that outranks them.
 *
 * Scoped deliberately to what the report named — the sidebar section labels,
 * the header title/subtitle band and the header action buttons — plus the one
 * surface those buttons open (the Feedback menu), which had the same defect.
 * The skin's remaining literals are a wider cleanup, not this fix.
 */

/* Sidebar section labels — BUILD / VALIDATE / ADOPT / MANAGE / AGENTS.
   theme-luxe.css:104 paints them rgba(37,51,120,0.42), a navy that lands at
   1.17:1 on the dark sidebar, i.e. invisible. */
html[data-theme="dark"] .nav-section-label {
  color: rgba(230, 233, 242, 0.62);
}

html[data-theme="dark"] .nav-section-label:hover {
  color: rgba(230, 233, 242, 0.92);
}

/* The header bar. theme-luxe.css:117 frosts it with a literal
   rgba(255,255,255,0.62), so in dark mode the band stayed near-white while its
   contents switched to light-on-dark inks — which is why the action buttons
   read as empty circles and the subtitle disappeared. Keep the frosted look,
   tint it from the dark surface instead. */
html[data-theme="dark"] .header {
  background: rgba(24, 29, 41, 0.72);
  border-bottom: 1px solid var(--border);
}

/* app.css hardcodes #253378 here — navy on the now-dark band. */
html[data-theme="dark"] .header-title {
  color: var(--text);
}

/* Header action buttons (AI Assistant / Feedback / Help / …). At rest they
   already follow --text-secondary; only the hover state is literal navy
   (defined in the inline <style> app.js renders with the toolbar), which
   disappeared against the dark band. */
html[data-theme="dark"] .hdr-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* The Feedback button's dropdown is a literal #fff panel; its item titles read
   an undefined --text-primary and therefore inherit the light body ink, so in
   dark mode the menu opened as a blank white card. */
html[data-theme="dark"] .fb-menu {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .fb-menu-item:hover {
  background: var(--bg-hover);
}

/* ===== Notifications dropdown (item b0a42159) =====
 * The bell next to those header buttons opens a panel with the same defect,
 * on a surface the 46ba666e fix did not reach. Its CSS is not in any
 * stylesheet: notifications.js builds it as a string and injects it as a
 * <style> at mount, i.e. AFTER this file in the document. So source order is
 * against us here and only specificity can win — every rule below is scoped
 * `html[data-theme="dark"]`, which outranks the bare classes it overrides.
 *
 * `.notif-menu` is painted a literal `#fff`, so in dark mode the panel stayed
 * white while its inks went light-on-dark: `.notif-head`/`.notif-title` take
 * `--text-primary` (#e6e9f2) and measured 1.10-1.21:1 on that white card, and
 * the `--text-secondary` body/timestamp lines 2.03-2.24:1. That is the report:
 * near-white text on a near-white panel.
 *
 * Fixing the paper is most of it, but not all of it: `.notif-allread` is a
 * literal navy #253378 that reads 11.52:1 on the white panel TODAY and would
 * drop to ~1.4:1 the moment the panel goes dark. Darkening the surface without
 * it would just move the unreadable element. Same for the two row tints and
 * the bell's own navy states.
 *
 * Light mode is untouched by construction — every selector here is gated on
 * the theme attribute, so with no attribute (or "light") nothing below matches.
 */

/* The panel. Literal #fff -> the themed card surface. The literal drop shadow
   (rgba(15,23,42,.14)) all but vanishes on a dark page, so take the palette's
   dark-tuned one and keep the panel reading as a lifted surface. The border is
   already var(--border) and themes on its own. */
html[data-theme="dark"] .notif-menu {
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

/* "Mark all read" — navy on what is now a dark card. Same treatment the header
   buttons got: the palette's accent, which is the dark-mode counterpart of the
   navy this literal was reaching for. */
html[data-theme="dark"] .notif-allread {
  color: var(--accent-light);
}

/* Row states. Light mode runs a three-step ladder of blue-tinted literals
   (#f0f4ff hover < #eef4ff unread < #e4edff unread+hover); mirror the ladder
   with the palette's translucent accent tints so unread stays distinguishable
   from read, and hover from rest, on the dark card. The unread+hover step has
   no token of its own — it is --accent-soft carried one stop further, the same
   way the light ladder's top step is its unread tint one stop further. */
/* The row's own ink. `.notif-item` is a <button>, and a button does not
   inherit page colour — the UA stylesheet gives it `buttontext`, i.e. BLACK,
   which computes to rgb(0,0,0) here in dark. The three text spans inside all
   set their own colour so they were never affected, but `.notif-ico` does not,
   and anything added to a row later would not either. On the old white panel
   black was harmless; on the dark card it is 1.25:1. Set the inherited ink so
   the row is safe by default rather than only where a span happens to override
   it — the same rule tests/test_frontend_theme_token_defined.js pins for
   controls painted with --bg-card. */
html[data-theme="dark"] .notif-item {
  color: var(--text);
}

html[data-theme="dark"] .notif-item:hover {
  background: var(--bg-hover);
}

html[data-theme="dark"] .notif-item.notif-unread {
  background: var(--accent-soft);
}

html[data-theme="dark"] .notif-item.notif-unread:hover {
  background: rgba(83, 152, 246, 0.26);
}

/* The bell itself — the "notifications icon in the top right" the report opens
   with. Both its non-default states are literal navy against the (now dark)
   header band. Hover mirrors .hdr-icon:hover above so the bell and the buttons
   beside it behave identically; has-unread stays the brighter accent so an
   unread bell still stands out from a rest-state one.

   Order matters and is preserved from notifications.js: :hover and .has-unread
   tie on specificity, so the later rule wins and an unread bell keeps its
   unread ink while hovered. */
html[data-theme="dark"] .notif-bell:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

html[data-theme="dark"] .notif-bell.has-unread {
  color: var(--accent-light);
}