/* ==========================================================================
   Utility Classes — replaces Tailwind CDN
   Only the ~37 utilities actually used across the site
   ========================================================================== */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.grid          { display: grid; }
.block         { display: block; }
.hidden        { display: none; }
.inline        { display: inline; }
.relative      { position: relative; }
.absolute      { position: absolute; }
.fixed         { position: fixed; }

/* ── Flexbox Alignment ───────────────────────────────────────────────────── */
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.text-center    { text-align: center; }

/* ── Sizing ──────────────────────────────────────────────────────────────── */
.w-full     { width: 100%; }
.w-10       { width: 2.5rem; }
.h-10       { height: 2.5rem; }
.max-w-full { max-width: 100%; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-h-full { max-height: 100%; }
.mx-auto    { margin-left: auto; margin-right: auto; }

/* ── Spacing ─────────────────────────────────────────────────────────────── */
.p-6   { padding: 1.5rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.gap-4 { gap: 1rem; }

/* ── Typography ──────────────────────────────────────────────────────────── */
.font-body    { font-family: var(--font-body); }
.font-medium  { font-weight: 500; }
.text-sm      { font-size: 0.875rem; line-height: 1.25rem; }

/* ── Colors ──────────────────────────────────────────────────────────────── */
.text-white    { color: #fff; }
.text-white\/60 { color: rgba(255, 255, 255, 0.60); }
.text-noir     { color: #1A1118; }
.bg-white      { background-color: #fff; }
.bg-white\/10  { background-color: rgba(255, 255, 255, 0.10); }
.bg-noir       { background-color: #1A1118; }
.bg-noir\/90   { background-color: rgba(26, 17, 24, 0.90); }

/* ── Borders & Radius ────────────────────────────────────────────────────── */
.rounded-full { border-radius: 9999px; }
.rounded-lg   { border-radius: 0.5rem; }

/* ── Effects ─────────────────────────────────────────────────────────────── */
.shadow-lg       { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.object-contain  { object-fit: contain; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }

/* ── Text ────────────────────────────────────────────────────────────────── */
.uppercase     { text-transform: uppercase; }
.antialiased   { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Arbitrary values used in HTML ───────────────────────────────────────── */
.max-h-\[80vh\] { max-height: 80vh; }