/* =============================================================================
   @elements/style — utilities

   Small single-purpose helpers. Not a full utility framework — component
   classes are preferred — but these cover the rough edges.
============================================================================= */

/* ─── Font family ─────────────────────────────────────────────────── */

.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

/* ─── Weight ──────────────────────────────────────────────────────── */

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

/* ─── Size (mono scale) ──────────────────────────────────────────── */

.text-2xs { font-size: var(--text-2xs); }
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }

/* ─── Color ──────────────────────────────────────────────────────── */

.text-ink       { color: var(--ink); }
.text-ink-soft  { color: var(--ink-soft); }
.text-ink-dim   { color: var(--ink-dim); }
.text-ink-faint { color: var(--ink-faint); }
.text-accent        { color: var(--accent); }       /* sky — rare; usually you want .text-accent-deep */
.text-accent-deep   { color: var(--accent-deep); }  /* cornflower — the normal "accent text" */
.text-green         { color: var(--green); }
.text-amber         { color: var(--amber); }
.text-danger        { color: var(--danger); }

/* ─── Casing & tracking ──────────────────────────────────────────── */

.uppercase   { text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.lowercase   { text-transform: lowercase; }
.tracked     { letter-spacing: var(--tracking-widest); }
.tabular     { font-variant-numeric: tabular-nums; }

/* ─── Visibility ─────────────────────────────────────────────────── */

.hidden { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Scroll ─────────────────────────────────────────────────────── */

.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.scroll-none::-webkit-scrollbar { display: none; }
.scroll-none { scrollbar-width: none; }

/* ─── Spacer ─────────────────────────────────────────────────────── */

.spacer { flex: 1; }