/* ============================================================
   RealResults embed — brand theme override
   ============================================================
   CSS custom properties are the one thing that inherits THROUGH a shadow
   boundary, which is deliberate: it means the host page can retheme the
   tool without being able to break its layout. Change tokens freely;
   don't try to target the tool's internal classes, because you can't
   reach them and shouldn't need to.

   site/build_site.py inlines this into the homepage block; see site/README.md.

   The site has TWO palettes and follows the visitor's system setting
   (site/homepage.src.html, :root tokens). This file mirrors that exactly:
   light by default, dark under the same selectors the site uses. A
   dark-only override put a dark block inside a white page for every
   light-mode visitor — missed on 2026-09-17 because the site was only
   ever read in dark mode.

     light   background #FFFFFF  text #13181C  accent #E8622E
     dark    background #15191A  text #ECEEE9  accent #F07845
     headings Sora, body Public Sans (both modes)
   ============================================================ */

@media screen {

/* --- light (default) ------------------------------------------ */
#realresults {
  --bg:       #FFFFFF;
  --bg-soft:  #F3F4EF;   /* site --bg-alt                            */
  --panel:    #F7F8F4;
  --panel-2:  #EDEFE8;
  --border:   #E4E6DF;   /* site --border                            */

  --text:     #13181C;   /* site --ink                               */
  --muted:    #5B6169;   /* site --muted                             */
  --faint:    #676D75;

  --brand:    #E8622E;   /* site --accent                            */
  --brand-2:  #C24C1C;   /* site --accent-ink                        */

  /* Semantic colours darkened for a white page; the dark-mode values
     below would be too pale to read here. */
  --accent:   #1D7F5B;
  --good:     #1D7F5B;
  --warn:     #9A6400;
  --danger:   #C23B27;

  --font: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Sora", system-ui, sans-serif;
  --radius: 12px;
}

/* --- dark: same two triggers the site uses ---------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #realresults {
    --bg:       #15191A;
    --bg-soft:  #1B2021;
    --panel:    #1E2425;
    --panel-2:  #272E2F;
    --border:   #333C3D;
    --text:     #ECEEE9;
    --muted:    #A3ABA6;
    --faint:    #8D9793;
    --brand:    #F07845;
    --brand-2:  #D9622F;
    --accent:   #3FBF8F;
    --good:     #3FBF8F;
    --warn:     #E8B33C;
    --danger:   #E5604A;
  }
}

:root[data-theme="dark"] #realresults {
  /* --- surfaces ------------------------------------------------- */
  --bg:       #15191A;   /* matches the site background exactly      */
  --bg-soft:  #1B2021;   /* one step up, for inset areas             */
  --panel:    #1E2425;   /* cards and panels                         */
  --panel-2:  #272E2F;   /* raised elements, table hover             */
  --border:   #333C3D;   /* hairlines                                */

  /* --- type ----------------------------------------------------- */
  --text:     #ECEEE9;   /* site body colour                         */
  --muted:    #A3ABA6;   /* secondary copy                           */
  --faint:    #8D9793;   /* captions, disclosures — 5.2:1 on --panel  */

  /* --- accent --------------------------------------------------- */
  /* The site runs a single terracotta accent rather than a gradient
     pair, so both brand tokens point at it. Keeping them distinct but
     close preserves the gradient buttons without introducing a second
     hue the site never uses. */
  --brand:    #F07845;
  --brand-2:  #D9622F;

  /* --- semantic ------------------------------------------------- */
  /* These carry meaning in the report and should stay legible against
     the surfaces above rather than being bent to the brand palette.
     Severity colours that all look like the brand colour stop
     communicating severity. */
  --accent:   #3FBF8F;   /* good / positive movement                 */
  --good:     #3FBF8F;
  --warn:     #E8B33C;   /* "check first" escalations                */
  --danger:   #E5604A;   /* blocking escalations, waste figures      */

  /* --- typography ----------------------------------------------- */
  --font: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 12px;
}

} /* end @media screen */

/* ------------------------------------------------------------------
   Print is deliberately NOT themed here.

   Custom properties set on #realresults from this stylesheet live in the
   light DOM, and a light-DOM rule on the host element beats the shadow
   root's own :host rule — verified, not assumed. So if these tokens
   applied when printing, they would override the tool's print palette and
   "Save as PDF" would produce a dark, ink-heavy page.

   Scoping the above to @media screen lets the tool's own print styles
   take over on paper. If you want branded print output, add a
   @media print block here rather than removing the screen scope.
   ------------------------------------------------------------------ */