/* Jockibox Design Language v2.2.1: the core icon, text-utility (§7 Core — reset & base)
   and logo (§7 Core — logo) rules, copied verbatim from
   docs/design/jockibox-design-language.md. Do not edit here: change the design language
   upstream, then re-copy. The rest of Core (reset, page base, focus ring) is adopted with
   the sections and the accessibility phase (docs/design/ui-audit.md). */

@layer base {
  /* Icons are decorative (dsIcon sets aria-hidden), so a click never lands on one */
  .ds-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--icon-size); height: var(--icon-size); flex-shrink: 0;
    pointer-events: none;
    transition: transform var(--duration-base) var(--ease-standard);
  }
  .ds-icon svg { width: 100%; height: 100%; display: block; stroke-width: var(--icon-stroke-width); }
  .ds-icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }

  .ds-text-muted  { color: var(--text-muted); }
  .ds-text-strong { color: var(--text-strong); font-weight: var(--font-weight-bold); }
  .ds-text-danger { color: var(--danger-fg); }
  /* Tabular figures: every digit one width, so numbers line up in columns (§5) */
  .ds-num { font-variant-numeric: tabular-nums; }
  .ds-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

@layer components {
  .ds-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  /* fit-content: the width follows the viewBox ratio, and never stretches in a flex column */
  .ds-logo { display: block; flex-shrink: 0; height: var(--logo-height); width: fit-content; color: var(--logo-ink); }
  .ds-logo-dot { fill: var(--logo-accent); }
  .ds-logo-mono { --logo-accent: currentColor; }
}