/* ============================================================
   utils.css — tiny static replacement for the Tailwind Play CDN.
   Defines ONLY the utility classes actually used in index.html,
   so the production build ships no compiler / runtime.
   Loaded BEFORE globals.css so component styles win on conflict.
   Breakpoints mirror Tailwind defaults: sm 640 · md 768 · lg 1024.
   ============================================================ */

/* fonts */
[class~="font-display"]  { font-family: var(--f-display); }
[class~="font-body"]     { font-family: var(--f-body); }
[class~="font-semibold"] { font-weight: 600; }

/* colors */
[class~="bg-surface"] { background: var(--bg); }
[class~="text-tx"]    { color: var(--text); }
[class~="text-dim"]   { color: var(--text-dim); }
[class~="text-faint"] { color: var(--text-faint); }

/* display / position */
[class~="flex"]      { display: flex; }
[class~="grid"]      { display: grid; }
[class~="relative"]  { position: relative; }
[class~="w-full"]    { width: 100%; }
[class~="flex-wrap"] { flex-wrap: wrap; }
[class~="z-[3]"]     { z-index: 3; }

/* alignment */
[class~="items-center"]    { align-items: center; }
[class~="items-start"]     { align-items: flex-start; }
[class~="items-stretch"]   { align-items: stretch; }
[class~="items-end"]       { align-items: flex-end; }
[class~="justify-between"] { justify-content: space-between; }

/* gaps */
[class~="gap-3"]      { gap: .75rem; }
[class~="gap-6"]      { gap: 1.5rem; }
[class~="gap-10"]     { gap: 2.5rem; }
[class~="gap-[14px]"] { gap: 14px; }
[class~="gap-[18px]"] { gap: 18px; }
[class~="gap-[30px]"] { gap: 30px; }
[class~="gap-[60px]"] { gap: 60px; }

/* sizing */
[class~="h-[74px]"]     { height: 74px; }
[class~="max-w-[48ch]"] { max-width: 48ch; }
[class~="max-w-[52ch]"] { max-width: 52ch; }

/* margins */
[class~="mt-9"]      { margin-top: 2.25rem; }
[class~="mt-[18px]"] { margin-top: 18px; }
[class~="mt-[30px]"] { margin-top: 30px; }
[class~="mt-[42px]"] { margin-top: 42px; }
[class~="mb-[30px]"] { margin-bottom: 30px; }
[class~="mb-[clamp(40px,6vw,72px)]"] { margin-bottom: clamp(40px, 6vw, 72px); }

/* grid columns (base) */
[class~="grid-cols-1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* font sizes */
[class~="text-[18px]"]                    { font-size: 18px; }
[class~="text-[clamp(16px,1.6vw,20px)]"]  { font-size: clamp(16px, 1.6vw, 20px); }
[class~="text-[clamp(30px,4.4vw,54px)]"]  { font-size: clamp(30px, 4.4vw, 54px); }

/* responsive — ascending so later breakpoints override */
@media (min-width: 640px) {
  [class~="sm:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  [class~="md:grid-cols-[1.5fr_1fr]"] { grid-template-columns: 1.5fr 1fr; }
  [class~="md:gap-9"]                 { gap: 2.25rem; }
  [class~="md:items-end"]             { align-items: flex-end; }
}
@media (min-width: 1024px) {
  [class~="lg:grid-cols-[1.05fr_0.95fr]"] { grid-template-columns: 1.05fr 0.95fr; }
  [class~="lg:grid-cols-2"]               { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [class~="lg:grid-cols-3"]               { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [class~="lg:gap-10"]                    { gap: 2.5rem; }
  [class~="lg:items-end"]                 { align-items: flex-end; }
}