/* ==========================================================================
   BASE — element defaults expressed entirely in tokens
   No literal colour, size or font value appears in this file.
   ========================================================================== */

body {
  font-family: var(--ssp-font-body);
  font-size: var(--ss-step-0);
  line-height: var(--ss-leading-body);
  letter-spacing: var(--ss-tracking-body);
  color: var(--ssp-ink);
  background: var(--ssp-surface);
}

/* ---- Headings ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ssp-font-display);
  line-height: var(--ss-leading-tight);
  letter-spacing: var(--ss-tracking-display);
  text-wrap: balance;
}

h1 { font-size: var(--ss-step-5); }
h2 { font-size: var(--ss-step-4); }
h3 { font-size: var(--ss-step-3); }
h4 { font-size: var(--ss-step-2); }
h5 { font-size: var(--ss-step-1); }
h6 { font-size: var(--ss-step-0); }

/* ---- Prose ------------------------------------------------------------- */

p { text-wrap: pretty; }

:where(.ssc-prose) {
  max-width: var(--ss-measure);
}

:where(.ssc-prose) > * + * {
  margin-block-start: var(--ss-space-s);
}

:where(.ssc-prose) > * + :is(h2, h3, h4) {
  margin-block-start: var(--ss-space-l);
}

:where(.ssc-prose) :is(ul, ol) {
  padding-inline-start: var(--ss-space-m);
}

:where(.ssc-prose) li + li {
  margin-block-start: var(--ss-space-2xs);
}

/* ---- Links ------------------------------------------------------------- */

a {
  color: var(--ssp-accent);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

a:hover { color: var(--ss-accent-hover); }

/*
 * Links inside a prose block keep their underline; links in furniture do
 * not. Scoped rather than global, because a bare `a { text-decoration:
 * none }` is the rule that made button text disappear during the specimen
 * work — inheritance from a generic anchor rule beat the button's own
 * colour. Keep anchor rules narrow.
 */
:where(.ssc-prose) a { text-decoration: underline; }
:where(nav, .ssc-card, .ssc-chip) a { text-decoration: none; }

/* ---- Small print and labels -------------------------------------------- */

.ssc-eyebrow {
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ssp-ink-muted);
}

small, .ssc-small {
  font-size: var(--ss-step--1);
  color: var(--ssp-ink-muted);
}

/* ---- Rules and tables -------------------------------------------------- */

hr {
  border: 0;
  border-block-start: 1px solid var(--ssp-line);
  margin-block: var(--ss-space-l);
}

th, td {
  padding: var(--ss-space-2xs) var(--ss-space-xs);
  border-block-end: 1px solid var(--ssp-line);
  text-align: start;
}

th {
  font-family: var(--ssp-font-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--ss-step--3);
}

/* ---- Accessibility utilities ------------------------------------------- */

.ssc-skip {
  position: absolute;
  inset-inline-start: var(--ss-space-s);
  inset-block-start: var(--ss-space-s);
  z-index: var(--ss-z-modal);
  padding: var(--ss-space-2xs) var(--ss-space-s);
  background: var(--ssp-accent);
  color: var(--ssp-accent-contrast);
  transform: translateY(-200%);
}

.ssc-skip:focus { transform: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ACCESSIBILITY — WCAG 2.2 AA
   Verified with computed contrast ratios rather than by eye; the failing
   pairs are recorded in tools/test-contrast.php so a palette change on a
   portal is checked rather than assumed.
   ========================================================================== */

/* ---- 2.5.8 Target Size (Minimum) — 24×24 CSS px -------------------------
   Most controls are already 2.75rem. These are the small ones: chips,
   tags, pills and swatches, which sit at the boundary and would fail on a
   narrower font. */

.ssp-chip,
.ssc-tag,
.ssp-pill,
.ssc-viewtoggle__btn,
.ssc-sizeguide__link {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* ---- Accent on dark grounds ---------------------------------------------
   Suresafe Red is 3.57:1 on Suresafe Black — below AA for body text. Any
   context that puts accent text on ink uses the lifted variant. */

.ssc-hero,
.ssc-specialist,
.ssc-archive-cta,
.ssc-footer,
.ssc-page-head--dark,
.ssc-branding__mark { --ssp-accent: var(--ssp-accent-on-dark); }

/* ---- 1.4.11 Non-text Contrast — control boundaries ---------------------- */

input, select, textarea,
.ssc-actions__link,
.ssc-viewtoggle,
.ssc-gallery__thumb,
.ssp-swatch,
.ssc-header__burger { border-color: var(--ssp-line-strong); }

/* ---- Forced colours ------------------------------------------------------
   Windows High Contrast strips backgrounds, which would erase any control
   whose only boundary is a fill. */

@media (forced-colors: active) {
  .ssc-btn,
  .ssc-actions__link,
  .ssp-chip,
  .ssc-tag,
  .ssp-pill { border: 1px solid; }

  .ssc-motif-grid::before,
  .ssc-duotone::after { display: none; }
}

/* ---- Skip link ----------------------------------------------------------- */

.ssc-skip:focus-visible { box-shadow: none; outline-offset: 0; }

/* ==========================================================================
   PROSE WEIGHT
   The prototypes set running text in DIN Pro Light with the slate mid-tone,
   and reserve 400 for UI and 700 for labels, titles and prices. The theme
   had no Light anywhere: body copy sat at 400 and everything that mattered
   at 700, which is why it read as heavy next to the HTML.

   Body stays 400 — the prototypes do the same. What changes is running text
   and anything secondary, which drops to 300 and takes the slate.
   ========================================================================== */

.ssc-prose p,
.ssc-prose li,
.ssc-summary__intro,
.ssc-archive__intro,
.ssc-small,
.ssc-crumbs,
.ssc-crumbs__list {
  font-weight: 300;
}

/* No .ssc-lede rule here on purpose. The prototypes have a .lede and it is
   worth having, but no template emits one yet. Styling a class nothing
   renders is how .ssp-swatch--text came to exist. It goes in when a
   template needs it, not before. */

/* Secondary running text takes the slate as well as the weight. */
.ssc-prose p,
.ssc-prose li,
.ssc-archive__intro,
.ssc-small {
  color: var(--ssp-ink-muted);
}

.ssc-prose p {
  line-height: var(--ss-leading-loose);   /* 1.75 — the prototypes run 1.7 */
  max-width: 62ch;
}

/* Eyebrows and chip labels: the new smallest step, wider tracking. */
.ssc-eyebrow,
.ssc-card__eyebrow,
.ssc-crumbs {
  font-size: var(--ss-step--3);
  letter-spacing: var(--ss-tracking-label);
}