/* Corporate font: shared local embedding for all digital SUPERSONIC components.
   System fonts in --font-family are technical fallbacks only. */
@font-face {
  font-family: Inter;
  src: url('../fonts/InterVariable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* Preferred source M; historical C, D, G; decisions/additions A1–A7 documented in DESIGN_SYSTEM.md. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: normal;
  line-height: normal;
  min-height: 100vh;
  color: var(--text);
  background-color: var(--bg);
  transition: background-color .25s ease, color .25s ease;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  color: var(--text);
  font-family: inherit;
  font-weight: var(--font-weight-heading);
  margin-top: 0;
  padding-bottom: var(--inherited-heading-padding);
  overflow-wrap: anywhere;
}
h1 { margin-bottom: 0; padding-bottom: 0; font-weight: var(--promo-title-weight); font-size: var(--font-size-h1); line-height: var(--line-height-h1); letter-spacing: var(--tracking-h1); }
h2 { margin-bottom: 10px; font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--tracking-h2); }
h3 { margin-bottom: 10px; font-size: var(--font-size-h3); line-height: var(--inherited-heading-line-height); letter-spacing: var(--tracking-h3-h4); }
h4 { margin-bottom: 10px; font-size: var(--font-size-h4); line-height: var(--inherited-heading-line-height); letter-spacing: var(--tracking-h3-h4); }
/* M defines subtitle spacing, no global paragraph rule: browser p margins remain.
   C paragraph metrics are available through the explicit compatibility profile. */
html[data-design="child"] body {
  font-weight: var(--inherited-body-weight); line-height: var(--inherited-body-line-height);
  background-image: var(--body-background);
}
html[data-design="child"] h1 { font-weight: var(--font-weight-heading); padding-bottom: var(--inherited-heading-padding); }
html[data-design="child"] p { margin: 0 0 var(--paragraph-margin); padding-bottom: var(--inherited-paragraph-padding); }
/* A2: existing darker red on light; readable theme text on dark. */
a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--text); }
html[data-theme="dark"] a { color: var(--text); }
h1 a, h2 a, h3 a, h4 a { color: inherit; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
/* A3: double ring uses existing light/dark colors on either surface. */
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; box-shadow: 0 0 0 3px var(--bg); }
/* G + D: optional historical layout; E has its own 1180px wrapper. */
.ss-container { width: var(--inherited-container-width); max-width: var(--layout-max-cache); margin-inline: auto; }
/* A4: opt-in reduced motion, no change to ordinary rendering. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}