/*
 * Signal and Echo design system: the site base part (site profile, issue 164; .claude/reference/site-profile.md s4, s6).
 *
 * Always installed with the site profile, after the theme and before the kit parts. It holds:
 * the page reset, the bare `a`, the page-wide :focus-visible ring (links, summary, [tabindex]) and
 * the page tokens (--sds-page-gutter from page.gutter-sm|md|lg, --sds-page-max), all in
 * @layer sds.reset; and `.sds-link` (pack site) in @layer sds.components.
 *
 * THE LAYER RULE for a site's own CSS: element rules (a, h1, p, *) go in @layer sds.reset, after
 * this file; class rules stay unlayered or in a layer after sds. An unlayered `a { color }` beats
 * every layered kit color whatever its specificity (an <a class="sds-button"> turns accent on
 * accent), and an unlayered `* { padding: 0 }` strips kit padding. This part draws the bare `a`,
 * so a site deletes its own `a` rule.
 *
 * Links: color.accent-text, color.link-visited once visited, and an underline in link.decoration
 * (solid, dotted or dashed) at link.thickness, link.offset below the text. `none` is not a valid
 * line style, so `text-decoration: underline none` fails at computed time and the link shows no
 * line until hover. A prose link always keeps its line (decision 5, the prose part).
 * Page widths are site breakpoints, not the game size classes: 37.5em and 75em (600 and 1200 CSS pixels).
 * Every value is a token; the only literals are 0, percentages and unitless numbers.
 */

/* sds-claims: link */

@layer sds.reset, sds.components;

/* ------------------------------------------------------------------ reset */

@layer sds.reset {
  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

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

  :where(body) {
    margin: 0;
    background: var(--sds-color-bg);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-body-weight);
    letter-spacing: var(--sds-type-body-tracking);
    line-height: var(--sds-type-body-line-height);
  }

  :where(img, video) {
    max-width: 100%;
    height: auto;
  }

  /* --- page tokens: the gutter steps up past 37.5em and at 75em; content stops at the cap. */

  :root {
    --sds-page-gutter: var(--sds-page-gutter-sm);
  }

  @media (width > 37.5em) {
    :root {
      --sds-page-gutter: var(--sds-page-gutter-md);
    }
  }

  @media (width >= 75em) {
    :root {
      --sds-page-gutter: var(--sds-page-gutter-lg);
    }
  }

  /* --- the bare a: the inline link, so a site needs no a rule of its own. */

  :where(a) {
    color: var(--sds-color-accent-text);
    text-decoration: underline var(--sds-link-decoration);
    text-decoration-thickness: var(--sds-link-thickness);
    text-underline-offset: var(--sds-link-offset);
  }

  :where(a):visited {
    color: var(--sds-color-link-visited);
  }

  :where(a):hover {
    text-decoration-line: underline;
    text-decoration-thickness: calc(var(--sds-link-thickness) * 2);
  }

  /* --- the page focus ring: every link, summary and [tabindex] the kit does not draw. */

  :where(a, summary, [tabindex]):focus-visible {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }
}

/* ------------------------------------------------------------- components */

@layer sds.components {
  /* --- link: inline (the default) is underlined; quiet inherits its color, has no line, and
     turns accent on hover (nav, footer, meta). States sit in :where(), so source order decides. */

  .sds-link {
    color: var(--sds-color-accent-text);
    text-decoration: underline var(--sds-link-decoration);
    text-decoration-thickness: var(--sds-link-thickness);
    text-underline-offset: var(--sds-link-offset);
    border-radius: var(--sds-radius-sm);
  }

  .sds-link:where(:visited) {
    color: var(--sds-color-link-visited);
  }

  .sds-link:where(:not([data-variant]), [data-variant="inline"]):where(:hover) {
    text-decoration-line: underline;
    text-decoration-thickness: calc(var(--sds-link-thickness) * 2);
  }

  .sds-link:where(:focus-visible) {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  .sds-link:where([data-variant="quiet"]) {
    color: inherit;
    text-decoration-line: none;
  }

  .sds-link:where([data-variant="quiet"]):where(:hover) {
    color: var(--sds-color-accent-text);
  }
}