/* ─── Utilities — spacing, text, display helpers ─────────────────────────── */

/* ── Display ─────────────────────────────────────────────────────────────── */
.hidden   { display: none; }
.block    { display: block; }
.inline   { display: inline; }
.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;
}

/* ── Overflow ────────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Position ────────────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* ── Width / height ──────────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.min-w-0 { min-width: 0; }

/* ── Margin helpers ──────────────────────────────────────────────────────── */
.m-auto     { margin: auto; }
.mx-auto    { margin-inline: auto; }
.mt-1       { margin-top: var(--sp-1); }
.mt-2       { margin-top: var(--sp-2); }
.mt-3       { margin-top: var(--sp-3); }
.mt-4       { margin-top: var(--sp-4); }
.mt-5       { margin-top: var(--sp-5); }
.mt-6       { margin-top: var(--sp-6); }
.mt-8       { margin-top: var(--sp-8); }
.mt-10      { margin-top: var(--sp-10); }
.mt-12      { margin-top: var(--sp-12); }
.mb-1       { margin-bottom: var(--sp-1); }
.mb-2       { margin-bottom: var(--sp-2); }
.mb-3       { margin-bottom: var(--sp-3); }
.mb-4       { margin-bottom: var(--sp-4); }
.mb-5       { margin-bottom: var(--sp-5); }
.mb-6       { margin-bottom: var(--sp-6); }
.mb-8       { margin-bottom: var(--sp-8); }
.mb-10      { margin-bottom: var(--sp-10); }
.mb-12      { margin-bottom: var(--sp-12); }

/* ── Padding helpers ─────────────────────────────────────────────────────── */
.p-1   { padding: var(--sp-1); }
.p-2   { padding: var(--sp-2); }
.p-3   { padding: var(--sp-3); }
.p-4   { padding: var(--sp-4); }
.p-5   { padding: var(--sp-5); }
.p-6   { padding: var(--sp-6); }
.p-8   { padding: var(--sp-8); }
.px-2  { padding-inline: var(--sp-2); }
.px-3  { padding-inline: var(--sp-3); }
.px-4  { padding-inline: var(--sp-4); }
.px-5  { padding-inline: var(--sp-5); }
.px-6  { padding-inline: var(--sp-6); }
.py-1  { padding-block: var(--sp-1); }
.py-2  { padding-block: var(--sp-2); }
.py-3  { padding-block: var(--sp-3); }
.py-4  { padding-block: var(--sp-4); }
.py-5  { padding-block: var(--sp-5); }
.py-6  { padding-block: var(--sp-6); }

/* ── Text align ──────────────────────────────────────────────────────────── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Font size ───────────────────────────────────────────────────────────── */
.text-xs   { font-size: 11px; }
.text-sm   { font-size: 13px; }
.text-base { font-size: 15px; }
.text-md   { font-size: 17px; }
.text-lg   { font-size: 20px; }
.text-xl   { font-size: 24px; }
.text-2xl  { font-size: 30px; }
.text-3xl  { font-size: 36px; }
.text-4xl  { font-size: 48px; }
.text-5xl  { font-size: 60px; }
.text-6xl  { font-size: 72px; }

/* ── Font weight ─────────────────────────────────────────────────────────── */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ── Font family ─────────────────────────────────────────────────────────── */
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* ── Line height ─────────────────────────────────────────────────────────── */
.leading-tight  { line-height: 1.15; }
.leading-snug   { line-height: 1.3; }
.leading-normal { line-height: 1.5; }
.leading-loose  { line-height: 1.7; }

/* ── Letter spacing ──────────────────────────────────────────────────────── */
.tracking-tight  { letter-spacing: -0.02em; }
.tracking-wide   { letter-spacing: 0.06em; }
.tracking-wider  { letter-spacing: 0.1em; }

/* ── Text color helpers ──────────────────────────────────────────────────── */
.text-ink       { color: var(--t-ink); }
.text-dim       { color: var(--t-ink-dim); }
.text-muted     { color: var(--t-ink-muted); }
.text-accent    { color: var(--t-accent); }
.text-signal    { color: var(--t-signal); }
.text-warn      { color: var(--t-warn); }
.text-crit      { color: var(--t-crit); }

/* ── Background color helpers ────────────────────────────────────────────── */
.bg-base     { background: var(--t-bg); }
.bg-alt      { background: var(--t-bg-alt); }
.bg-card     { background: var(--t-card); }
.bg-chip     { background: var(--t-chip); }

/* ── Border helpers ──────────────────────────────────────────────────────── */
.border        { border: 1px solid var(--t-line); }
.border-strong { border: 1px solid var(--t-line-strong); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-md    { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-xl    { border-radius: var(--radius-xl); }
.rounded-2xl   { border-radius: var(--radius-2xl); }
.rounded-3xl   { border-radius: var(--radius-3xl); }
.rounded-full  { border-radius: var(--radius-full); }

/* ── Opacity ─────────────────────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }

/* ── Cursor ──────────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ── Pointer events ──────────────────────────────────────────────────────── */
.pointer-none { pointer-events: none; }

/* ── User select ─────────────────────────────────────────────────────────── */
.select-none { user-select: none; }

/* ── Transition helpers ──────────────────────────────────────────────────── */
.transition       { transition: all var(--tr-normal); }
.transition-fast  { transition: all var(--tr-fast); }
.transition-slow  { transition: all var(--tr-slow); }

/* ── Z-index ─────────────────────────────────────────────────────────────── */
.z-nav   { z-index: var(--z-nav); }
.z-modal { z-index: var(--z-modal); }

/* ── Object fit ──────────────────────────────────────────────────────────── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Aspect ratio ────────────────────────────────────────────────────────── */
.aspect-square { aspect-ratio: 1; }
.aspect-video  { aspect-ratio: 16 / 9; }

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.flex-spacer { flex: 1; }
.plain-link  { text-decoration: none; color: inherit; }

/* ── Featured chart SVG ──────────────────────────────────────────────────── */
.featured-chart-svg {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  width: calc(100% - 64px);
  height: 220px;
}