/* ============================================================================
   ProductLog marketing — dark mode
   ----------------------------------------------------------------------------
   Loaded sitewide from base.html.twig right after homepage.css. The marketing
   pages do NOT set a `data-theme` attribute and ship no theme-toggle script, so
   the ONLY thing that can switch the palette is the OS preference. Everything
   here therefore lives inside a single `@media (prefers-color-scheme: dark)`
   block — it fires automatically when the visitor's system is in dark mode and
   is a no-op otherwise.

   Re-expression strategy: homepage.css (and the per-page sheets features-page.css
   / compare-page.css) define the marketing token set on a plain `:root`
   (--bg / --panel / --text / --brand / …). We simply re-declare those same custom
   properties with dark equivalents — every component that reads the tokens then
   recolours for free, so all 20 marketing pages change in dark mode from one file.

   CASCADE NOTE — why `html:root` and `html …` instead of plain `:root` / `.x`:
   the per-page sheets (features-page.css, compare-page.css) and a few inline
   `<style>` blocks (e.g. branding's `.br-page`) load via `{% block extra_css %}`,
   which sits LATER in <head> than this file. features-page.css even re-declares
   the whole light `:root`. A plain `:root` here (specificity 0,1,0) would lose to
   that later light `:root` on source order. Prefixing with `html` bumps these
   rules to 0,1,1 so they win regardless of load order. The handful of hardcoded
   light fills the audit flagged (branding `.br-page`/`.after .chip`,
   features-page `.slash-pop … .ico`) get the same `html …` treatment so they can
   override the later sheet/inline rule by specificity.

   Accent HUES are preserved; only the surfaces darken and the *-bg tints become
   dark, low-opacity washes so accent chips/badges still read against the dark UI.
   ============================================================================ */

@media (prefers-color-scheme: dark) {

  /* ---- Token re-expression (beats a later plain `:root` by specificity) ---- */
  html:root {
    /* Surfaces — light #fcfcfc/#fff family -> near-black neutrals */
    --bg:        #0f1115;   /* page background  (was #fcfcfc) */
    --panel:     #161922;   /* cards / topbar   (was #ffffff) */
    --panel-2:   #1d212b;   /* subtle fills     (was #f7f7f8) */
    --panel-3:   #262b36;   /* deeper fills     (was #f0f0f1) */
    --border:      #2a2f3a; /* hairlines        (was #ebebeb) */
    --border-soft: #232833; /* softer hairlines (was #f2f2f3) */

    /* Text — invert the near-black ramp to a light ramp */
    --text:    #e8eaed;     /* primary  (was #09090b) */
    --text-2:  #b4b8c0;     /* secondary(was #3f3f46) */
    --muted:   #8a909c;     /* muted    (was #67676e) — ~5.4:1 on --bg */
    --muted-2: #757b87;     /* muted-2  (was #6e6e76) */

    /* Brand — keep the indigo hue, lift it slightly for contrast on dark */
    --brand:    #8b92e0;    /* was #5e6ad2 — brighter so it reads on dark text/links */
    --brand-2:  #a6abe9;    /* was #8b92e0 */
    --brand-bg: rgba(139,146,224,.14);  /* was #f4f5fc — dark indigo wash */

    /* Status accents — keep hues, brighten for legibility, dark translucent tints */
    --green:    #2dd4a0;    /* was #00b37a */
    --green-bg: rgba(45,212,160,.13);   /* was #edfbf5 */
    --amber:    #f7b955;    /* was #f5a623 */
    --amber-bg: rgba(247,185,85,.14);   /* was #fef7e8 */
    --red:      #f87171;    /* was #f04438 */
    --red-bg:   rgba(248,113,113,.14);  /* was #fef2f2 (features-page only) */
    --violet:   #b69bf2;    /* was #7c3aed / #9f7aea */
    --violet-bg: rgba(182,155,242,.14); /* was #f5f0ff (features-page only) */
    --blue:     #6aa8ff;    /* was #3b82f6 */
    --blue-bg:  rgba(106,168,255,.14);  /* was #eff6ff (features-page only) */
    --cyan:     #3fc6dd;    /* was #06b6d4 */
    --pink:     #f472b6;    /* was #ec4899 */

    /* Status TEXT tokens (introduced in homepage.css for AA on light) — on dark
       the bright hues already pass, so point them back at the bright accents. */
    --green-text: #2dd4a0;
    --amber-text: #f7b955;

    /* Shadows — deepen so cards still lift off the dark page */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
    --shadow:    0 1px 2px rgba(0,0,0,.40), 0 4px 16px -6px rgba(0,0,0,.55);
    --shadow-lg: 0 1px 2px rgba(0,0,0,.45), 0 18px 48px -18px rgba(0,0,0,.70);
  }

  /* The translucent topbar uses a hardcoded light rgba() in homepage.css /
     features-page.css; restate it dark so the sticky header doesn't flash white. */
  html .topbar { background: rgba(15,17,21,.82); }

  /* ----------------------------------------------------------------------------
     Hardcoded light fills flagged by the audit (§8.1). These live in sheets /
     inline <style> that load AFTER this file, so each override is `html …`-
     prefixed to win on specificity rather than source order.
     ---------------------------------------------------------------------------- */

  /* branding.html.twig inline: fake public-page mock + "after" URL chip border */
  html .br-page { background: var(--panel); }
  html .br-url-bar.after .chip { border-color: rgba(45,212,160,.32); }

  /* features-page.css: slash-command popup active-row icon chip was a hard #fff */
  html .slash-pop .sp-row.active .ico { background: var(--panel-3); }

  /* homepage.css: white card-header gradient on the changelog sample entry uses a
     literal #fbfbfb top stop — restate dark so the entry header isn't a bright bar. */
  html .cl-entry .h {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
  }

  /* homepage.css: status pills hardcode light tints/borders alongside the tokens.
     Restate the few literal light values so the pills read on dark surfaces. */
  html .fb-status.planned  { background: var(--blue-bg);   border-color: rgba(106,168,255,.32); }
  html .fb-status.progress { background: var(--violet-bg); border-color: rgba(182,155,242,.32); }
  html .fb-status.done     { border-color: rgba(45,212,160,.32); }

  /* homepage.css feature-icon tiles use literal pastel fills for violet/cyan/pink */
  html .feature.v .icon { background: var(--violet-bg); }
  html .feature.c .icon { background: rgba(63,198,221,.14); }
  html .feature.p .icon { background: rgba(244,114,182,.14); }

  /* homepage.css "before" story label uses a literal #fee4e2 light-red pill */
  html .story.before .lbl { background: var(--red-bg); }

  /* homepage.css "after" stack-compare items use a literal #dbe0fa light border */
  html .stack-card.after .sc-items li { border-color: rgba(139,146,224,.28); }

  /* The intentionally-dark surfaces (preview sidebar, metrics band, promo bar,
     code cards, dashboard mock) already ship near-black backgrounds in
     homepage.css and look correct in dark mode, so they are deliberately left
     untouched here. */
}
