@layer utilities {
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ELEPHOUSE — CUBE CSS Utilities (Layer 2)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   One job per class. Generated from design tokens.
   Naming convention: {property}-{token}

   These utilities sit between Composition (Every Layout)
   and Blocks (component CSS). They extend design tokens
   into the HTML, reducing repetition in block-level CSS.

   Requires: elephouse_utopia_tokens.css loaded first.

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* ── Font Family ──────────────────────────────────────────────
   font-label carries the small tracked/uppercase type (nav, badges, captions).
   font-display covers headlines, prices, names, brand.
   font-hand is the handwritten voice: margin notes, annotations, signatures.
   font-body is the global default — rarely needed as override.
   font-mono is for code only; it is not a styling choice.
*/
  .font-display {
    font-family: var(--font-display);
  }
  .font-body {
    font-family: var(--font-body);
  }
  .font-label {
    font-family: var(--font-label);
  }
  .font-hand {
    font-family: var(--font-hand);
  }
  .font-mono {
    font-family: var(--font-mono);
  }

  /* ── Font Size ────────────────────────────────────────────────
   UI steps -2 to +4, plus display aliases for the leftover 3xl/4xl/5xl names.
*/
  .text-2xs {
    font-size: var(--font-2xs);
  }
  .text-xs {
    font-size: var(--font-xs);
  }
  .text-sm {
    font-size: var(--font-sm);
  }
  .text-base {
    font-size: var(--font-base);
  }
  .text-md {
    font-size: var(--font-md);
  }
  .text-lg {
    font-size: var(--font-lg);
  }
  .text-xl {
    font-size: var(--font-xl);
  }
  .text-2xl {
    font-size: var(--font-2xl);
  }
  .text-3xl {
    font-size: var(--font-3xl);
  }
  .text-4xl {
    font-size: var(--font-4xl);
  }
  .text-5xl {
    font-size: var(--font-5xl);
  }

  /* ── Text Color ───────────────────────────────────────────────
   5 text levels + brand accents + functional colors.
   On-dark variants for featured/footer contexts.
*/
  .color-text {
    color: var(--color-text);
  }
  .color-text-2 {
    color: var(--color-text-prose);
  }
  .color-text-3 {
    color: var(--color-text-muted);
  }
  .color-text-4 {
    color: var(--color-text-faint);
  }
  .color-text-5 {
    color: var(--color-text-ghost);
  }
  .color-brand {
    color: var(--color-accent-strong);
  }
  .color-brand-muted {
    color: var(--color-accent-muted);
  }
  .color-accent {
    color: var(--color-accent);
  }
  .color-bright {
    color: var(--color-accent-bright);
  }
  .color-warn {
    color: var(--color-danger);
  }
  .color-gold {
    color: var(--color-attention);
  }
  .color-paper {
    /* Light ink on a brand-red fill, so it maps to --color-on-primary and
       stays legible in dark mode too. */
    color: var(--color-on-primary);
  }

  /* ── Background ───────────────────────────────────────────────
   Surfaces, tints, and brand fills.
*/
  .bg-paper {
    background: var(--color-bg);
  }
  .bg-paper-2 {
    background: var(--color-bg-raised);
  }
  .bg-paper-3 {
    background: var(--color-bg-muted);
  }
  .bg-brand {
    background: var(--color-primary);
  }
  .bg-accent {
    background: var(--color-accent);
  }
  .bg-brand-tint {
    background: var(--color-accent-tint);
  }
  .bg-brand-pale {
    background: var(--color-accent-hover);
  }
  .bg-warn-tint {
    background: var(--color-danger-tint);
  }
  .bg-gold-tint {
    background: var(--color-attention-tint);
  }

  /* ── Letter Spacing ───────────────────────────────────────────
   4 bands cover 30+ selectors:
   tight  → headlines, display type (-0.01em to -0.03em)
   normal → buttons, nav links, CTAs (0.03–0.04em)
   wide   → metadata, citations, footer (0.05–0.06em)
   wider  → labels, eyebrows, col-labels (0.08–0.12em)
*/
  .tracking-tight {
    letter-spacing: var(--tracking-tight);
  }
  .tracking {
    letter-spacing: var(--tracking);
  }
  .tracking-wide {
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    letter-spacing: var(--tracking-wider);
  }

  /* ── Text Transform ───────────────────────────────────────────
   uppercase appears 9 times, always with font-mono.
   normal resets inherited uppercase inside blocks.
*/
  .uppercase {
    text-transform: uppercase;
  }
  .normal-case {
    text-transform: none;
  }

  /* ── Text Align ──────────────────────────────────────────────
   Center for captions, empty states, pricing CTAs.
*/
  .text-center {
    text-align: center;
  }

  /* ── Text Decoration ─────────────────────────────────────────
   Reset for links inside nav, buttons, cards where
   underline is inherited from global a styles.
   line-through for completed/struck items.
*/
  .no-decoration {
    text-decoration: none;
  }
  .line-through {
    text-decoration: line-through;
  }

  /* ── Opacity ─────────────────────────────────────────────────
   Dimmed state for completed/disabled elements.
*/
  .dimmed {
    opacity: 0.5;
  }

  /* ── Font Style ──────────────────────────────────────────────
   Reset for blockquotes or elements that inherit italic.
*/
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }

  /* ── Weight ───────────────────────────────────────────────────
   400: body default, reset for headings used as subtitles
   500 (1×): form labels
   600 (1×): strong tags
   700 (6×): nav-brand, section-title, feature-name, footer-brand
   900 (2×): hero-headline, pricing-amount
*/
  .weight-normal {
    font-weight: var(--weight-normal);
  }
  .weight-medium {
    font-weight: var(--weight-medium);
  }
  .weight-semi {
    font-weight: var(--weight-semi);
  }
  .weight-bold {
    font-weight: var(--weight-bold);
  }
  .weight-black {
    font-weight: var(--weight-black);
  }

  /* ── Line Height ──────────────────────────────────────────────
   1    (5×): single-line elements (tags, icons, pricing-amount)
   1.15 (2×): headlines (hero, section-title)
   1.4  (3×): tight prose (pricing features, pull-quote, task)
   1.5  (1×): textarea, relaxed prose
   1.65 is the body default — utility available for resets.
*/
  .leading {
    line-height: var(--leading);
  }
  .leading-none {
    line-height: var(--leading-none);
  }
  .leading-tight {
    line-height: var(--leading-tight);
  }
  .leading-snug {
    line-height: var(--leading-snug);
  }
  .leading-normal {
    line-height: var(--leading-normal);
  }

  /* ── Border Radius ────────────────────────────────────────────
   3px (5×): checkboxes, tags, status badges, save badge
   4px (9×): buttons, nav links, inputs, rows
   6px (6×): cards, grids, screenshots, search field
   9999px:   pill shape (range input, pill buttons)
*/
  .radius-s {
    border-radius: var(--radius-s);
  }
  .radius-m {
    border-radius: var(--radius-m);
  }
  .radius-l {
    border-radius: var(--radius-l);
  }
  .radius-full {
    border-radius: var(--radius-full);
  }

  /* ── Measure (readable line length) ───────────────────────────
   ch-based max-width for prose blocks.
*/
  .measure-narrow {
    max-width: var(--measure-narrow);
  }
  .measure {
    max-width: var(--measure);
  }
  .measure-wide {
    max-width: var(--measure-wide);
  }
}