/* Base — resets, page defaults, and the brand surface textures.
   Kept deliberately thin: this is a design system, not a CSS framework. */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-tr);
}

/* Links. Accent means "detected / go here"; underlines stay hairline. */
a { color: var(--sx-accent); text-decoration-color: var(--sx-accent-line); text-underline-offset: 4px; }
a:hover { color: var(--sx-accent-hover); text-decoration-color: currentColor; }
a:active { color: var(--sx-accent-press); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

::selection { background: var(--sx-accent); color: var(--sx-accent-ink); }

/* The caret is a browser surface too: a system-white bar on a dark field is
   the one part of a text input nobody themes. */
input, textarea, [contenteditable] { caret-color: var(--sx-accent); }

* { scrollbar-width: thin; scrollbar-color: var(--sx-line-strong) transparent; }

/* --- Surface textures -----------------------------------------------------
   All three are CSS-only: no image requests, no measurable load cost. */

/* Film grain. Sits over the canvas so large dark fields do not band. */
.sx-grain { position: relative; }
.sx-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--sx-grain-opacity);
  background-image: var(--sx-grain);
}

/* Hairline grid — structure without colour. */
.sx-bg-grid {
  background-image:
    linear-gradient(to right, var(--sx-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sx-line) 1px, transparent 1px);
  background-size: 4rem 4rem;
}
.sx-bg-grid-sm { background-size: 1.5rem 1.5rem; }

/* Registration marks — the backdrop of a labelling tool. */
.sx-bg-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cpath d='M56 50v12M50 56h12' stroke='%232e3650' stroke-width='1'/%3E%3C/svg%3E");
}

/* Gradient hairline for section dividers that need presence without a band. */
.sx-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent, var(--sx-line-strong) 20%, var(--sx-accent-line) 50%, var(--sx-line-strong) 80%, transparent);
}

summary::-webkit-details-marker { display: none; }
.sx-plus { display: inline-block; transition: transform var(--d-base) var(--e-quart); }
details[open] .sx-plus { transform: rotate(45deg); }

.sx-container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}