/* ── utilities.css — Utility/helper classes shared across all pages ── */

/* Typography scale */
.t-mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.t-xs {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.t-sm {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.t-md {
  font-size: 1.2rem;
}
.t-lg {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.t-xl {
  font-size: clamp(5rem, 12vw, 14rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.8;
}

/* Color utilities */
.c-neon {
  color: var(--neon);
}
.c-black {
  color: var(--black);
}
.c-white {
  color: var(--white);
}
.c-gray-border {
  color: #888;
}

/* Background utilities */
.bg-neon {
  background-color: var(--neon);
}
.bg-black {
  background-color: var(--black);
}

/* Grid layout */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-bottom: var(--border-thin);
}

/* Border utilities */
.border-r {
  border-right: var(--border-thin);
}
.border-b {
  border-bottom: var(--border-thin);
}
.border-t {
  border-top: var(--border-thin);
}
.border-l {
  border-left: var(--border-thin);
}

/* Padding utilities */
.pad-sm {
  padding: var(--space-sm);
}
.pad-md {
  padding: var(--space-md);
}
.pad-lg {
  padding: var(--space-lg);
}

/* Flex utilities */
.w-full {
  width: 100%;
}
.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.items-center {
  align-items: center;
}

/* Stat counter number */
.stat-num {
  display: inline-block;
}

/* ── RESPONSIVE UTILITIES ── */
@media (max-width: 600px) {
  .pad-lg {
    padding: var(--space-md);
  }
  .pad-md {
    padding: var(--space-sm);
  }
}