/* ═══════════════════════════════════════════════════════════════════════════
   RISKORA Mirror — coherence layer for the v4 system.

   ADDITIVE AND CSS ONLY. mirror.html's markup is untouched, because the
   module script at the end of that page reaches 43 element ids and the
   engine behind it is the commercial product. Nothing here renames, moves or
   removes a single node. If this file is deleted the page renders exactly as
   it did before.

   What it changes, and why each one:

     tokens      Mirror's light palette was #f9fafb / #e5e7eb / #4b5563, a
                 cool grey set. The homepage is a warm paper set. Two pages
                 of one product should not disagree about what white is.
     display     Mirror set headings at 700. The homepage sets 500, chosen by
                 setting five weights side by side at 62px. Same brand, same
                 weight.
     buttons     Mirror used a 135deg gradient. The homepage uses flat
                 #D50000. A gradient is a different brand.
     radius      Mirror used 14px cards. The homepage uses 3px throughout, a
                 deliberate Brutalist choice.

   Loaded after mirror.html's own <style>, so equal-specificity rules win on
   order. Where Mirror's rule is more specific, the selector here matches it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · palette ───────────────────────────────────────────────────────── */
html.light {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --border: #e4e0d8;
  --text: #121110;
  --dim: #55504a;          /* was #4b5563; 7.65:1 on the new paper */

  /* The accent set was leaking its DARK-ground values into the light theme.
     axe found it only after the sample report rendered, because these colours
     are used by report output rather than by the static page:
         --accent-2 #ff5252 measured 3.06:1 on paper  (.neg, .ins-tag)
         --warning  #ff9933 measured 2.04:1           (#mOvertrade, .sample-tag)
         --success  #00c853 measured 2.14:1
     Replaced with the on-light variants this brand already uses elsewhere
     rather than with newly invented colours. Dark theme keeps its own. */
  --accent-2: #b3001b;     /* 6.86 paper / 7.16 white */
  --warning:  #92400e;     /* 6.80 / 7.09, the value mirror's own .summary-warn already used */
  --success:  #0d7835;     /* 5.36 / 5.59 */
}
html.light body { background: #fbfaf8; }

/* the sheet tone the homepage alternates with, for Mirror's banded sections */
html.light .seo-block:nth-of-type(even) { background: #f3f0eb; }

/* ── 2 · display type ──────────────────────────────────────────────────── */
.hero h1,
.report h2,
.seo-block h2,
.seo-block h3 {
  font-weight: 500;
  letter-spacing: -0.028em;
}
.hero h1 {
  font-size: clamp(2.05rem, 4.4vw, 3.4rem);
  line-height: 1.0;
  letter-spacing: -0.034em;
}
/* Bold now means "this is a measurement", so the numbers keep it. */
.score-ring, .locked-num, .metric .val, .m-val,
[id^="m"][id$="core"], #lockedNum {
  font-weight: 700;
}

/* ── 3 · buttons ───────────────────────────────────────────────────────── */
/* `color` matters here: these are sometimes <a> elements, which take the
   link colour, and that colour is --accent-2. Darkening --accent-2 for the
   light theme turned a red button's label dark red on red, 1.3:1. Setting it
   explicitly is correct whether the element is a button or a link. */
.btn-primary,
.btn.btn-primary,
a.btn-primary,
a.btn.btn-primary {
  color: #fff;
  background: #D50000;
  background-image: none;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: 0.015em;
  transition: background 180ms cubic-bezier(.65,.05,.36,1);
}
.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover { background: #b30000; color: #fff; }
.btn { border-radius: 3px; font-weight: 500; letter-spacing: 0.015em; }

/* ── 4 · surfaces ──────────────────────────────────────────────────────── */
.card, .drop, .panel, .warn-banner, .privacy,
details.how, .pilot-card, .runs-card {
  border-radius: 3px;
}
.drop { border-style: dashed; }

/* ── 5 · the one thing that is not cosmetic ────────────────────────────────
   Mirror's own light tokens set --dim to #4b5563, which is the colour that
   failed contrast on the homepage panel. On this page it sits on #fbfaf8
   rather than on a dark surface, where it measures 7.00:1, so it passes
   either way. It is restated above only so both pages use one value. */

/* ── 6 · reduced motion, which mirror.html did not declare ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}