/* ScopeFold base, direction "Aushang".
   Load order: web/site/fonts/fonts.css, web/tokens/tokens.css, web/tokens/glyphs.css,
   web/tokens/base.css, web/tokens/components.css (and web/tokens/scale.css where bars or
   range strips are drawn). Uses tokens only: no literal colours. Strict-CSP safe.
   Specification: design/system/DESIGN_SYSTEM.md. */

@layer sf-reset, sf-base, sf-components, sf-utilities;

/* ------------------------------------------------------------------ reset */
@layer sf-reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[class], ul[class] { padding: 0; list-style: none; }
  img, svg, video, canvas { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
  table { border-collapse: collapse; }
  fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  legend { padding: 0; }
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ base */
@layer sf-base {
  /* Surface roles: components read these instead of picking greys or yellows themselves.
     Paper and ground use cool greys; every yellow surface switches to the warm sheet ink. */
  :root {
    --sf-text-2: var(--sf-ink-2);
    --sf-text-3: var(--sf-ink-3);
    --sf-rule-soft: var(--sf-rule);
    --sf-nstat-mark: var(--sf-nstat);
    --sf-hit: var(--sf-target);
  }
  @media (pointer: coarse) {
    :root { --sf-hit: var(--sf-target-phone); }
  }
  .sf-on-sheet {
    --sf-text-2: var(--sf-sheet-ink-2);
    --sf-text-3: var(--sf-sheet-ink-2);
    --sf-rule-soft: var(--sf-sheet-rule);
    --sf-nstat-mark: var(--sf-sheet-ink-2);
  }

  html {
    font-size: var(--sf-root-size);
    background: var(--sf-ground);
    scrollbar-color: var(--sf-control) var(--sf-ground);
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body {
    min-block-size: 100dvh;
    background: var(--sf-ground);
    color: var(--sf-ink);
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    font-weight: var(--sf-body-weight);
    font-stretch: var(--sf-width-normal);
    line-height: var(--sf-leading-body);
    font-kerning: normal;
    font-optical-sizing: auto;
    font-synthesis: none;
  }

  h1, h2, h3, h4 {
    color: var(--sf-ink);
    font-weight: var(--sf-weight-bold);
    line-height: var(--sf-leading-snug);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--sf-text-3xl);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    line-height: var(--sf-leading-tight);
    letter-spacing: -0.005em;
  }
  h2 { font-size: var(--sf-text-2xl); font-stretch: var(--sf-width-condensed); line-height: var(--sf-leading-tight); }
  h3 { font-size: var(--sf-text-lg); font-stretch: var(--sf-width-semi); }
  h4 { font-size: var(--sf-text-base); font-stretch: var(--sf-width-semi); }
  @media (min-width: 64em) {
    h1 { font-size: var(--sf-text-4xl); }
  }
  p, li, dd { text-wrap: pretty; }

  a {
    color: var(--sf-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  a:hover { text-decoration-thickness: 2px; }

  :focus-visible {
    outline: var(--sf-focus-width) solid var(--sf-focus);
    outline-offset: var(--sf-focus-offset);
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--sf-highlight); color: var(--sf-on-highlight); }
  input, textarea, [contenteditable] { caret-color: var(--sf-focus); }

  table { font-variant-numeric: tabular-nums; }
  th { font-weight: var(--sf-weight-semibold); text-align: start; }

  kbd {
    display: inline-block;
    min-inline-size: 1.7em;
    padding: 0 0.35em;
    border: var(--sf-border-hair) solid currentColor;
    border-radius: var(--sf-radius-plate);
    font: inherit;
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    line-height: 1.45;
    text-align: center;
    white-space: nowrap;
  }
  code, samp {
    font-family: var(--sf-font-mono);
    font-size: 0.875em;
  }
  mark {
    background: var(--sf-highlight);
    color: var(--sf-on-highlight);
    padding-inline: 0.12em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  abbr[title] { text-decoration: none; }
  hr {
    border: 0;
    border-block-start: var(--sf-border-hair) solid var(--sf-rule-soft);
    margin-block: var(--sf-space-4);
  }
  small { font-size: var(--sf-text-sm); }
  strong, b { font-weight: var(--sf-weight-bold); }
  q { quotes: "„" "“" "‚" "‘"; }

  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; }
    mark { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }

  @media print {
    html, body { background: var(--sf-surface); }
    body { font-size: 10pt; }
    a { color: var(--sf-ink); text-decoration: none; }
  }
}

/* ------------------------------------------------------------------ utilities */
@layer sf-utilities {
  .sf-visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .sf-skip {
    position: absolute;
    inset-block-start: var(--sf-space-2);
    inset-inline-start: var(--sf-space-2);
    z-index: var(--sf-z-toast);
    padding: var(--sf-space-2) var(--sf-space-4);
    background: var(--sf-action);
    color: var(--sf-on-action);
    font-weight: var(--sf-weight-semibold);
    text-decoration: none;
    transform: translateY(-200%);
  }
  .sf-skip:focus { transform: none; }
  .sf-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sf-mono { font-family: var(--sf-font-mono); font-size: 0.875em; }
  .sf-nowrap { white-space: nowrap; }
  .sf-text-2 { color: var(--sf-text-2); }
  .sf-measure { max-inline-size: var(--sf-measure); }
  .sf-stack > * + * { margin-block-start: var(--sf-stack, var(--sf-space-4)); }
  .sf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2); }
  .sf-spacer { flex: 1 1 auto; }
  @media print {
    .sf-noprint { display: none !important; }
  }
  @media not print {
    .sf-printonly { display: none !important; }
  }
}