/* ═══════════════════════════════════════════════════════════════════════════
   RISKORA v4 — shared coherence layer for the light public pages.

   ADDITIVE AND CSS ONLY. No markup on any page is changed by this file.
   Delete the <link> and every page renders exactly as it did before.

   It exists because the site disagreed with itself. Measured 2026-10-15:

     main site.html     #fbfaf8   display 500     (rebuilt)
     mirror.html        #fbfaf8   display 500     (aligned)
     score.html         #f9fafb   display 700
     for-brokers.html   #f9fafb   display 700
     creators.html      #f9fafb   display 700
     pilot.html         #f9fafb   display 700

   Two different whites and two different display weights across one product.
   This file brings the four light pages onto the same paper and the same
   weight as the two rebuilt ones.

   NOT TOUCHED, deliberately: terms.html, privacy.html, data-sources.html and
   status.html all render on #030406, a dark ground. Flipping legal pages
   from dark to light is a visible change to the pages a buyer reads most
   carefully, and it interacts with the unresolved legal-entity work in
   collab/DRAFT-legal-entity.md. Raised in docs/OPEN_ISSUES.md instead of
   decided here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── paper ─────────────────────────────────────────────────────────────── */
html.light {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --border: #e4e0d8;
  --text: #121110;
  --dim: #55504a;          /* 7.65:1 on the paper */

  /* The accent set carried its dark-ground values into the light theme,
     which is how #ff5252 ended up at 3.06:1 and #ff9933 at 2.04:1 on
     Mirror's report. These are the on-light variants already used elsewhere
     in this brand, all between 5.36 and 7.16 on paper and on white. */
  --accent-2: #b3001b;
  --warning:  #92400e;
  --success:  #0d7835;
}
html.light body { background: #fbfaf8; }

/* ── display type ──────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.024em; }
h1 { letter-spacing: -0.032em; line-height: 1.04; }
/* Weight now means "this is a measurement" rather than "this is important". */
b, strong, .num, .val, [class*="-val"], [class*="score"] { font-weight: 700; }

/* ── controls and surfaces ─────────────────────────────────────────────── */
.btn, .btn-primary, .btn-outline, .btn-submit, button, input, select, textarea {
  border-radius: 3px;
}
.btn, .btn-primary { font-weight: 500; letter-spacing: 0.015em; }
/* a gradient is a different brand; and these are often <a>, which take the
   link colour, so the foreground is pinned too */
.btn-primary, a.btn-primary {
  color: #fff;
  background: #D50000;
  background-image: none;
  transition: background 180ms cubic-bezier(.65,.05,.36,1);
}
.btn-primary:hover, a.btn-primary:hover { background: #b30000; color: #fff; }
.card, .panel, .box, .tile { border-radius: 3px; }

/* ── motion ────────────────────────────────────────────────────────────── */
@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;
  }
}

/* ── links in running copy ──────────────────────────────────────────────
   axe flagged a link on creators.html at 1.11:1 against the text around it:
   distinguishable by colour alone, and barely even that. Underlining by
   STRUCTURE (a link inside a paragraph or list item) rather than by guessing
   at wrapper classes, which is how this was solved elsewhere in the repo.
   Buttons and nav links are excluded because they are not running copy. */
p a:not(.btn):not([class*="btn"]),
li a:not(.btn):not([class*="btn"]),
dd a:not(.btn):not([class*="btn"]) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
nav a, header a, footer nav a, .nav a, .nav__l a { text-decoration: none; }
