/* Utilities: one job each, and only token values. Reach for one when a block
   doesn't already cover it; a value that isn't a token doesn't belong here. */

/* Type size, from the scale */
.step--2 { font-size: var(--step--2); }
.step--1 { font-size: var(--step--1); }
.step-0 { font-size: var(--step-0); }
.step-1 { font-size: var(--step-1); }
.step-2 { font-size: var(--step-2); }
.step-3 { font-size: var(--step-3); }
.step-4 { font-size: var(--step-4); }
.step-5 { font-size: var(--step-5); }
.step-6 { font-size: var(--step-6); }

/* The organizer's heading face, for text that isn't a heading element */
.font-display {
  font-family: var(--font-display);
  font-size-adjust: var(--font-display-adjust);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--font-display-tracking);
}

.weight-regular { font-weight: var(--weight-regular); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold { font-weight: var(--weight-bold); }

.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }

.color-text { color: var(--color-text); }
.color-muted { color: var(--color-muted); }
.color-accent { color: var(--color-accent-text); }
.color-danger { color: var(--color-red); }
.color-success { color: var(--color-green); }
.color-warning { color: var(--color-amber); }

.numeric { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.grow { flex-grow: 1; min-inline-size: 0; }
.text-center { text-align: center; }
.text-end { text-align: end; }

/* Spacing for .flow children and compositions, from the scale */
.flow-space-3xs { --flow-space: var(--space-3xs); }
.flow-space-2xs { --flow-space: var(--space-2xs); }
.flow-space-xs { --flow-space: var(--space-xs); }
.flow-space-s { --flow-space: var(--space-s); }
.flow-space-m { --flow-space: var(--space-m); }
.flow-space-l { --flow-space: var(--space-l); }
.flow-space-s-m { --flow-space: var(--space-s-m); }

.gap-2xs { --cluster-space: var(--space-2xs); --repel-space: var(--space-2xs); }
.gap-s { --cluster-space: var(--space-s); --repel-space: var(--space-s); }
.gap-m { --cluster-space: var(--space-m); --repel-space: var(--space-m); }

/* Width of a narrow or content column, centred */
.column-narrow { --wrapper-width: var(--column-narrow); }
.column-content { --wrapper-width: var(--column-content); }

/* A wrapper inside one that already has gutters */
.gutter-none { --wrapper-gutter: 0; }

/* Hidden from sight, kept for screen readers */
.visually-hidden:not(:focus, :active) {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* The accent as a soft gradient, where a picture is missing */
.accent-gradient {
  background:
    radial-gradient(ellipse at 20% 20%, oklch(from var(--color-accent) calc(l + 0.15) calc(c * 0.7) h) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, oklch(from var(--color-accent) calc(l - 0.25) c calc(h + 20)) 0%, transparent 60%),
    var(--color-accent);
}