@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-mono covers 31 selectors across landing + tasks.
   font-display covers 10 (headlines, pricing, sig, brand).
   font-body is the global default — rarely needed as override.
*/
  .font-display {
    font-family: var(--font-display);
  }
  .font-body {
    font-family: var(--font-body);
  }
  .font-mono {
    font-family: var(--font-mono);
  }

  /* ── Font Size ────────────────────────────────────────────────
   Every font-size in both files maps to a Utopia step.
*/
  .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 ───────────────────────────────────────────────
   --text (15×), --text-2 (9×), --text-3 (10×), --text-4 (14×)
   Plus brand-light (6×), brand (7×), brand-muted (3×).
   On-dark variants for featured/footer contexts.
*/
  .color-text {
    color: var(--text);
  }
  .color-text-2 {
    color: var(--text-2);
  }
  .color-text-3 {
    color: var(--text-3);
  }
  .color-text-4 {
    color: var(--text-4);
  }
  .color-brand {
    color: var(--brand);
  }
  .color-brand-muted {
    color: var(--brand-muted);
  }
  .color-accent {
    color: var(--brand-light);
  }
  .color-bright {
    color: var(--brand-bright);
  }
  .color-warn {
    color: var(--warn);
  }
  .color-gold {
    color: var(--gold);
  }
  .color-paper {
    color: var(--paper);
  }
  .color-paper-dim {
    color: var(--paper-dim);
  }
  .color-paper-80 {
    color: var(--paper-80);
  }
  .color-paper-50 {
    color: var(--paper-50);
  }

  /* ── Background ───────────────────────────────────────────────
   Surfaces, tints, and brand fills.
*/
  .bg-paper {
    background: var(--paper);
  }
  .bg-paper-2 {
    background: var(--paper-2);
  }
  .bg-paper-3 {
    background: var(--paper-3);
  }
  .bg-brand {
    background: var(--brand);
  }
  .bg-accent {
    background: var(--brand-light);
  }
  .bg-brand-tint {
    background: var(--brand-tint);
  }
  .bg-brand-pale {
    background: var(--brand-pale-light);
  }
  .bg-warn-tint {
    background: var(--warn-tint);
  }
  .bg-gold-tint {
    background: var(--gold-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);
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   USAGE CHEAT-SHEET
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Classes are grouped in HTML using CUBE's bracket syntax:
     class="[ block ] [ composition ] [ utilities ]"

   ═══════════════════════════════════════════════════════════════
   COMMON PATTERNS — Reusable utility combos
   ═══════════════════════════════════════════════════════════════

   "Mono label" — the most repeated pattern (9× in landing):
   Used by: .hero-eyebrow, .section-label, .pricing-col-label,
            .beta-notice-label, .feature-status, .hero-screenshot-caption,
            .founder-sig-role, .screenshot-tag, .task-tag

     class="[ font-mono ] [ uppercase tracking-wider text-xs color-accent ]"
     class="[ font-mono ] [ uppercase tracking-wider text-2xs color-text-4 ]"

   "Mono UI" — buttons, nav links, CTAs (22× across both files):
   Used by: .nav-links a, .btn-primary, .btn-ghost, .pricing-cta,
            .nav-cta, .search-field, .nav-center, .footer-links a

     class="[ font-mono ] [ tracking text-sm ]"
     class="[ font-mono ] [ tracking text-xs ]"

   "Display heading" — headlines and pricing:
   Used by: .hero-headline, .section-title, .pricing-amount

     class="[ font-display ] [ weight-black leading-tight tracking-tight ]"
     class="[ font-display ] [ weight-bold leading-tight tracking-tight ]"

   "Quiet metadata" — authors, periods, roles, captions:
   Used by: .testimonial-author, .pricing-period, .footer-made,
            .feature-number, .screenshot-hashtags

     class="[ font-mono ] [ tracking-wide text-xs color-text-4 ]"


   ═══════════════════════════════════════════════════════════════
   LANDING PAGE — Element by element
   ═══════════════════════════════════════════════════════════════

   NAV
   ──────────────────────────────────────────────────────────────
   .nav-brand
     class="[ nav-brand ] [ font-display weight-bold text-md color-text ]"

   .nav-links a
     class="[ font-mono ] [ tracking text-xs color-text-3 radius-m ]"

   .nav-cta
     class="[ nav-cta ] [ font-mono ] [ tracking text-xs bg-brand color-paper radius-m ]"


   MASTHEAD
   ──────────────────────────────────────────────────────────────
   .masthead-inner span
     class="[ font-mono ] [ tracking-wide text-xs color-text-3 ]"


   HERO
   ──────────────────────────────────────────────────────────────
   .hero-eyebrow
     class="[ hero-eyebrow ] [ font-mono ] [ uppercase tracking-wider text-xs color-accent ]"

   .hero-headline
     class="[ hero-headline ] [ font-display ] [ weight-black leading-tight tracking-tight text-5xl ]"

   .hero-text p
     class="[ text-base color-text-2 measure ]"

   .btn-primary
     class="[ btn-primary ] [ font-mono ] [ tracking text-sm bg-brand color-paper radius-m ]"

   .btn-ghost
     class="[ btn-ghost ] [ font-mono ] [ tracking text-sm color-brand ]"


   HERO SCREENSHOT
   ──────────────────────────────────────────────────────────────
   .hero-screenshot
     class="[ hero-screenshot ] [ bg-paper radius-l ]"

   .hero-screenshot-body
     class="[ font-mono ] [ text-xs color-text-3 ]"

   .screenshot-task
     class="[ font-body ] [ text-xs color-text-2 ]"

   .screenshot-hashtags
     class="[ font-mono ] [ text-2xs color-text-4 ]"

   .screenshot-tag
     class="[ font-mono ] [ uppercase tracking-wide text-2xs radius-s leading-none ]"

   .screenshot-check.done
     class="[ bg-brand radius-s ]"

   .hero-screenshot-caption
     class="[ font-mono ] [ uppercase tracking-wide text-2xs color-text-4 ]"


   BETA NOTICE
   ──────────────────────────────────────────────────────────────
   .beta-notice-label
     class="[ font-mono ] [ uppercase tracking-wider text-xs color-accent ]"

   .beta-notice p
     class="[ text-sm color-text-2 ]"


   TESTIMONIAL STRIP (hero aside)
   ──────────────────────────────────────────────────────────────
   .testimonial-strip blockquote
     class="[ font-body ] [ text-sm color-text-2 ]"

   .testimonial-strip cite
     class="[ font-mono ] [ tracking-wide text-xs color-text-4 ]"


   MANIFESTO
   ──────────────────────────────────────────────────────────────
   .section-label
     class="[ font-mono ] [ uppercase tracking-wider text-xs color-accent ]"

   .section-title
     class="[ font-display ] [ weight-bold leading-tight tracking-tight text-2xl ]"

   .manifesto-body p
     class="[ text-base color-text-2 measure-wide ]"

   .pull-quote p
     class="[ font-display ] [ text-lg leading-snug color-text ]"


   FEATURES
   ──────────────────────────────────────────────────────────────
   .feature-number
     class="[ font-mono ] [ tracking-wider text-xs color-text-4 ]"

   .feature-icon
     class="[ text-lg leading-none ]"

   .feature-name
     class="[ font-display ] [ weight-bold text-base color-text ]"

   .feature-desc
     class="[ text-sm color-text-3 leading-snug ]"

   .feature-status
     class="[ font-mono ] [ uppercase tracking-wide text-2xs radius-s leading-none ]"

   .feature-screenshot
     class="[ bg-paper radius-l ]"


   TESTIMONIALS
   ──────────────────────────────────────────────────────────────
   .testimonial-card
     class="[ testimonial-card ] [ bg-paper radius-l ]"

   .testimonial-card blockquote
     class="[ text-sm color-text-2 ]"

   .testimonial-author
     class="[ font-mono ] [ tracking-wide text-xs color-text-4 ]"


   PRICING
   ──────────────────────────────────────────────────────────────
   .pricing-subhead
     class="[ text-base color-text-3 measure-narrow ]"

   .pricing-beta-notice
     class="[ font-mono ] [ tracking text-xs color-brand radius-m ]"

   .pricing-col-label
     class="[ font-mono ] [ uppercase tracking-wider text-xs color-text-4 ]"

   .pricing-amount
     class="[ font-display ] [ weight-black leading-none tracking-tight text-3xl ]"

   .pricing-period
     class="[ font-mono ] [ tracking text-xs color-text-3 ]"

   .pricing-save
     class="[ font-mono ] [ tracking-wide text-xs radius-s ]"

   .pricing-features-list li
     class="[ text-sm color-text-2 leading-snug ]"

   .pricing-cta
     class="[ font-mono ] [ tracking text-xs radius-m ]"


   FOUNDER
   ──────────────────────────────────────────────────────────────
   .founder-text p
     class="[ color-text-2 measure ]"

   .founder-sig-name
     class="[ font-display ] [ text-md color-text ]"

   .founder-sig-role
     class="[ font-mono ] [ uppercase tracking-wide text-xs color-text-4 ]"


   FOOTER
   ──────────────────────────────────────────────────────────────
   .footer-brand
     class="[ font-display ] [ weight-bold text-base color-paper ]"

   .footer-links a
     class="[ font-mono ] [ tracking-wide text-xs ]"

   .footer-made
     class="[ font-mono ] [ tracking text-xs ]"


   ═══════════════════════════════════════════════════════════════
   TASKS PAGE — Element by element
   ═══════════════════════════════════════════════════════════════

   .nav-brand
     class="[ nav-brand ] [ font-display weight-bold text-md color-text ]"

   .nav-center
     class="[ font-mono ] [ tracking text-xs color-text-3 ]"

   .search-field
     class="[ font-mono ] [ text-xs color-text radius-l ]"

   .task-title
     class="[ font-body ] [ text-sm color-text-2 ]"

   .task-tags
     class="[ font-mono ] [ text-2xs color-text-4 ]"

   .task-tag
     class="[ font-mono ] [ uppercase tracking-wide text-xs radius-s leading-none ]"

   .task-check (completed)
     class="[ bg-brand radius-s ]"

   .empty-hint
     class="[ font-mono ] [ tracking text-xs color-text-4 ]"


   ═══════════════════════════════════════════════════════════════
   NOTES
   ═══════════════════════════════════════════════════════════════

   ① Not every property needs a utility. These stay in block CSS:
     - Borders (1px solid var(--rule)) — too contextual
     - Transitions — tied to specific interactions
     - Box-shadows — only 2 occurrences, both unique
     - Position/z-index — layout-specific
     - Opacity values — tied to state/context

   ② Spacing stays in compositions + blocks. Every Layout handles
     flow, clusters, switchers, etc. Block CSS handles the rest.
     If padding: var(--space-m) starts appearing in 5+ blocks,
     consider adding .pad-m { padding: var(--space-m); }.

   ③ The 4 tracking values consolidate ~12 different letter-spacing
     values (ranging from 0.02em to 0.12em) into 4 bands. This
     is a deliberate simplification — the visual difference between
     0.05em and 0.06em is imperceptible.

   ④ Tag colors use tint tokens + utilities for backgrounds and
     data-state for the color exception:
       <span class="[ task-tag ] [ font-mono uppercase tracking-wide
         text-xs radius-s leading-none bg-brand-tint color-brand ]"
         data-state="today">
       data-state="overdue" → bg-warn-tint color-warn
       data-state="soon"    → bg-gold-tint color-gold

   ⑤ Paper-on-dark tokens (--paper-glass, --paper-80, --paper-50,
     --paper-12) and brand-on-dark tokens (--brand-bright,
     --brand-bright-pale) are used inside .pricing-col.featured,
     .site-nav, and .site-footer. These are tokens but not
     utilities — they're applied in block CSS since they only
     appear in dark-background contexts.

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
}