/* SEO Fixlist — dark theme + theme-toggle control.
   Dark palette is a warm-neutral charcoal (never pure black). Every token from
   variables.css is re-declared here under :root[data-theme="dark"], so all
   components adapt automatically. A few components hardcode a light value and
   are overridden explicitly below. */

:root[data-theme="dark"] {
  /* Neutrals */
  --canvas: #0F141A;
  --surface: #181E27;
  --surface-alt: #1E2530;
  --panel-warm: #1E2530;
  --ink: #E7EAEE;
  --slate: #9BA4AF;
  --muted: #69727D;
  --border: #2A323D;
  --border-strong: #3A434F;
  --row-line: #232B35;

  /* Accent (teal): keep button fill; lighten the text/link variant for contrast */
  --accent: #12907A;
  --accent-dark: #16A88F;
  --accent-deep: #63D0B6;
  --accent-tint: #123029;
  --accent-border: #20493F;

  /* Severity — dark tints, light text, brighter indicator dots */
  --crit: #E4675A;  --crit-text: #F1A79E;  --crit-bg: #2B1512;  --crit-border: #5A241E;
  --high: #D9903F;  --high-text: #EFBE86;  --high-bg: #291A0C;  --high-border: #563618;
  --med:  #CDA23F;  --med-text:  #E7C97F;  --med-bg:  #231B0B;  --med-border: #4A3B15;
  --low:  #8CA0B6;  --low-text:  #B7C2D0;  --low-bg:  #1A212A;  --low-border: #323C48;
  --pass: #40AF79;  --pass-text: #8FDBB4;  --pass-bg: #12271C;  --pass-border: #20452F;

  /* Charts */
  --chart-1: #20C0A2;
  --chart-2: #8CA0B6;
  --chart-3: #D9903F;
  --chart-4: #CDA23F;
  --chart-grid: #2A323D;

  /* Elevation — deeper shadows read better on dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
}

/* ---- Component overrides for elements that hardcode a light value ---- */
:root[data-theme="dark"] .public-header,
:root[data-theme="dark"] .topbar {
  background: rgba(15, 20, 26, 0.85);
}
:root[data-theme="dark"] .toast { background: #232B35; color: var(--ink); }
:root[data-theme="dark"] .admin-flag { background: #2A323D; color: var(--ink); }
:root[data-theme="dark"] .btn:disabled,
:root[data-theme="dark"] .btn[aria-disabled="true"] { background: #232B35; color: var(--muted); }
:root[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #232B35 25%, #2C3644 50%, #232B35 75%);
  background-size: 200% 100%;
}
/* The cream CTA panel reads as a subtle raised surface in dark */
:root[data-theme="dark"] .cta-band { background: var(--surface); }

/* ---- Theme toggle button (moon in light mode, sun in dark) ---- */
.theme-toggle .icon { width: 17px; height: 17px; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: inline-block; }