/*
  theme-screenity-dark.css — optional dark mode for the Screenity UI.

  Scoped under `body[data-theme="screenity"].theme-dark` (a compound
  selector, which always beats css/theme-screenity.css's single-attribute
  rules on specificity regardless of <link> order). Toggled at runtime
  by js/color_scheme.js. Keeps the Screenity brand block exactly as-is
  (blue accent, --gradient-brand, Bricolage/Satoshi fonts) and swaps
  only the surface/text variables plus theme-screenity.css's own
  light-tuned literal overrides back to a dark-appropriate equivalent —
  largely reusing css/style.css's own original (classic dark) literals,
  since those were already tuned for a near-black background.

  --accent is pinned explicitly (not inherited from the native file)
  because the two modes now need genuinely different brightnesses: the
  native file's accent was deepened for contrast against its light
  background, and that darker blue fails WCAG AA here against a near-
  black one — this reuses the original brighter #3582f6, which already
  contrasts fine (5.25:1) on this bg.
*/

body[data-theme="screenity"].theme-dark {
  --accent:      #3582f6;
  --accent-dark: #2a6fe0;
  --accent-soft: #7b9aea;

  /* ---- Surfaces — cool near-black, to sit under the blue brand ---- */
  --bg:        #0b0d12;
  --bg-alt:    #0e1016;
  --bg-card:   #12141b;
  --bg-card2:  #171a22;
  --surface:   rgba(255,255,255,.045);
  --surface-hover: rgba(255,255,255,.075);
  --border:    rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);

  /* ---- Text ---- */
  --text:      #f2f4f8;
  --text-muted: rgba(242,244,248,.58);
  --text-dim:  rgba(242,244,248,.38);

  --shadow: 0 10px 40px rgba(0,0,0,.5);
}

/* ---- Header / hero-stats glass — theme-screenity.css sets a light
   glass tint for its light bg; dark bg needs a dark glass instead ---- */
body[data-theme="screenity"].theme-dark header {
  background: rgba(11,13,18,.72);
}
body[data-theme="screenity"].theme-dark .hero-stats-panel {
  background: rgba(11,13,18,.5);
}

/* ---- Hero: brighter blue glow (reads better against near-black) and
   white-tint grain lines (theme-screenity.css's dark-tint lines were
   for its light bg). ---- */
body[data-theme="screenity"].theme-dark .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(53,130,246,.2), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(123,154,234,.12), transparent 55%),
    var(--bg);
}
body[data-theme="screenity"].theme-dark .hero-grain {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}

/* ---- Badges/chips/progress bars/toast — theme-screenity.css's
   dark-tint fills (tuned for its light bg) need the white-tint
   equivalents css/style.css originally used for its dark bg. ---- */
body[data-theme="screenity"].theme-dark .topic-progress-bar,
body[data-theme="screenity"].theme-dark .quiz-progress-bar,
body[data-theme="screenity"].theme-dark .mini-bar-track {
  background: rgba(255,255,255,.07);
}
body[data-theme="screenity"].theme-dark .score-circle-bg {
  stroke: rgba(255,255,255,.07);
}
body[data-theme="screenity"].theme-dark .topic-progress-table th {
  background: rgba(255,255,255,.02);
}
body[data-theme="screenity"].theme-dark .topic-progress-table tr:hover td {
  background: rgba(255,255,255,.025);
}
body[data-theme="screenity"].theme-dark .answer-chip {
  background: rgba(255,255,255,.06);
}
body[data-theme="screenity"].theme-dark .answer-chip-remove {
  background: rgba(255,255,255,.1);
}
body[data-theme="screenity"].theme-dark .format-help-panel code {
  background: rgba(255,255,255,.07);
}
body[data-theme="screenity"].theme-dark .topic-chip {
  background: rgba(255,255,255,.06);
}
body[data-theme="screenity"].theme-dark .ai-points {
  border-top-color: rgba(255,255,255,.08);
}
body[data-theme="screenity"].theme-dark .toast {
  background: rgba(18,20,27,.92);
  color: var(--text);
  border-color: var(--border-strong);
}

/* ---- Difficulty badges — theme-screenity.css's dark-text-on-light
   pair (e.g. #15803d dark green) is too low-contrast on a near-black
   background; reuse css/style.css's original bright-on-dark pair. ---- */
body[data-theme="screenity"].theme-dark .diff-easy   { background: rgba(34,197,94,.18);  color: #4ade80; }
body[data-theme="screenity"].theme-dark .diff-medium { background: rgba(242,194,24,.18); color: #fadb5f; }
body[data-theme="screenity"].theme-dark .diff-hard   { background: rgba(244,65,95,.18);  color: #fb7185; }

/* Everything else theme-screenity.css already sets (marks-badge,
   setup-option hover/selected, symbol-btn hover, explanation-box,
   quiz-timer border, answer-input focus ring, quiz-progress-fill glow,
   hero-heading em, custom-cursor ring, level-tab-indicator glow,
   .btn-primary gradient) are all low-opacity BLUE tints or
   brand-gradient fills — these read fine on both a light and a
   near-black surface, so they're deliberately left inherited rather
   than duplicated here. Add a targeted override only if QA finds one
   that doesn't. */