/* ROA Credit — base layer. Self-hosted fonts, reset, primitives.
   BANNED in this stylesheet and every other: linear-gradient, radial-gradient,
   conic-gradient, metallic texture, text-shadow, decorative drop-shadow,
   seals/shields/badges, emoji in headings/buttons/trust copy.
   These are grep-able CI rules. See AESTHETIC-THESIS.md §2. */

@font-face {
  font-family: "Bitter";
  src: url("../fonts/sub-Bitter-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/sub-AtkinsonHyperlegibleNext-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/sub-AtkinsonHyperlegibleNext-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;   /* COP figures align; 0 extra bytes */
  -webkit-font-smoothing: antialiased;
}

/* NO ITALICS ANYWHERE — worst case for atypical readers
   (Rello & Baeza-Yates 2013, DOI 10.1145/2513383.2513447) */
i, em, cite, address { font-style: normal; font-weight: 700; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: -.015em; }
h2 { font-size: var(--t-h2); letter-spacing: -.01em; }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p.lead { font-size: var(--t-decision); }

a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }

img, svg { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

section { padding-block: var(--s-8); }

/* ── Buttons — minimum 48px tap target, always ───────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--t-decision);
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--primary:active { background: var(--primary-active); }
.btn--secondary {
  background: transparent; color: var(--primary); border-color: var(--border-strong);
}
.btn--full { width: 100%; }

/* ── The logo mark is the ONLY place gold may appear ─────────────── */
.logo img { height: 40px; width: auto; }

/* ── Notes: colour is a REDUNDANT channel. Every one of these
      carries an icon AND a word. Never colour alone. ─────────────── */
.note {
  display: flex; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius);
  border-left: 4px solid var(--border-strong);
  background: var(--surface-raised);
  font-size: var(--t-body);
}
.note p:last-child { margin-bottom: 0; }
.note--info    { background: var(--info-tint);    border-left-color: var(--info); }
.note--green   { background: var(--green-tint);   border-left-color: var(--green); }
.note--warning { background: var(--warning-tint); border-left-color: var(--warning); }
.note--danger  { background: var(--danger-tint);  border-left-color: var(--danger); }
.note__label { font-weight: 700; }

/* ── Accessibility helpers ───────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--primary); color: var(--on-primary);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius); z-index: 100;
}
.skip-link:focus { top: var(--s-4); }

/* Android forced-dark must not invert our measured palette */
@media (forced-colors: active) {
  .btn--primary { border-color: ButtonText; }
}