/* ==========================================================================
   Utility classes — Tailwind-inspired, vanilla CSS
   Spacing scale: 1=0.25rem 2=0.5rem 3=0.75rem 4=1rem 5=1.25rem 6=1.5rem 8=2rem 10=2.5rem 12=3rem
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Display
   --------------------------------------------------------------------------- */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* ---------------------------------------------------------------------------
   Flexbox
   --------------------------------------------------------------------------- */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-auto    { flex: auto; }
.flex-none    { flex: none; }
.shrink-0     { flex-shrink: 0; }
.grow         { flex-grow: 1; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }

.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }

/* ---------------------------------------------------------------------------
   Grid
   --------------------------------------------------------------------------- */
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.col-span-2   { grid-column: span 2 / span 2; }
.col-span-3   { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   Gap
   --------------------------------------------------------------------------- */
.gap-0    { gap: 0; }
.gap-0\.5 { gap: 0.125rem; }
.gap-1    { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }

.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }

.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }

/* ---------------------------------------------------------------------------
   Padding
   --------------------------------------------------------------------------- */
.p-0  { padding: 0; }
.p-1  { padding: 0.25rem; }
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }

.px-0 { padding-left: 0;        padding-right: 0; }
.px-1 { padding-left: 0.25rem;  padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem;   padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem;  padding-right: 0.75rem; }
.px-4 { padding-left: 1rem;     padding-right: 1rem; }
.px-5 { padding-left: 1.25rem;  padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem;   padding-right: 1.5rem; }

.py-0 { padding-top: 0;        padding-bottom: 0; }
.py-1 { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem;     padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem;   padding-bottom: 1.5rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }

/* ---------------------------------------------------------------------------
   Margin
   --------------------------------------------------------------------------- */
.m-0  { margin: 0; }
.m-1  { margin: 0.25rem; }
.m-2  { margin: 0.5rem; }
.m-3  { margin: 0.75rem; }
.m-4  { margin: 1rem; }
.m-auto { margin: auto; }

.mx-0    { margin-left: 0;     margin-right: 0; }
.mx-auto { margin-left: auto;  margin-right: auto; }
.mx-1    { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2    { margin-left: 0.5rem;  margin-right: 0.5rem; }
.mx-3    { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4    { margin-left: 1rem;    margin-right: 1rem; }

.my-0 { margin-top: 0;        margin-bottom: 0; }
.my-1 { margin-top: 0.25rem;  margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem;   margin-bottom: 0.5rem; }
.my-3 { margin-top: 0.75rem;  margin-bottom: 0.75rem; }
.my-4 { margin-top: 1rem;     margin-bottom: 1rem; }
.my-5 { margin-top: 1.25rem;  margin-bottom: 1.25rem; }
.my-6 { margin-top: 1.5rem;   margin-bottom: 1.5rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.ml-0    { margin-left: 0; }
.ml-1    { margin-left: 0.25rem; }
.ml-2    { margin-left: 0.5rem; }
.ml-3    { margin-left: 0.75rem; }
.ml-4    { margin-left: 1rem; }
.ml-auto { margin-left: auto; }

.mr-0    { margin-right: 0; }
.mr-1    { margin-right: 0.25rem; }
.mr-2    { margin-right: 0.5rem; }
.mr-3    { margin-right: 0.75rem; }
.mr-4    { margin-right: 1rem; }
.mr-auto { margin-right: auto; }

/* ---------------------------------------------------------------------------
   Sizing
   --------------------------------------------------------------------------- */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.w-1\/2  { width: 50%; }
.h-full  { height: 100%; }
.h-auto  { height: auto; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.italic      { font-style: italic; }
.not-italic  { font-style: normal; }
.underline   { text-decoration: underline; }
.no-underline { text-decoration: none; }
.uppercase   { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.06em; }
.whitespace-nowrap { white-space: nowrap; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Semantic text colors */
.text-default { color: var(--text); }
.text-muted   { color: var(--text-muted); }
.text-brand   { color: var(--brand); }
.text-danger  { color: var(--danger); }
.text-white   { color: #fff; }

/* ---------------------------------------------------------------------------
   Background
   --------------------------------------------------------------------------- */
.bg-soft    { background: var(--bg-soft); }
.bg-brand   { background: var(--brand); }
.bg-transparent { background: transparent; }

/* ---------------------------------------------------------------------------
   Border & Radius
   --------------------------------------------------------------------------- */
.rounded     { border-radius: 0.375rem; }
.rounded-lg  { border-radius: var(--radius); }
.rounded-full { border-radius: 9999px; }
.rounded-none { border-radius: 0; }

.border        { border: 1px solid var(--line); }
.border-0      { border: none; }
.border-bottom { border-bottom: 1px solid var(--line); }
.border-brand  { border-color: var(--brand); }
.border-dashed { border-style: dashed; }

/* ---------------------------------------------------------------------------
   Opacity
   --------------------------------------------------------------------------- */
.opacity-75  { opacity: 0.75; }
.opacity-50  { opacity: 0.5; }

/* ---------------------------------------------------------------------------
   Overflow
   --------------------------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   Position
   --------------------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* ---------------------------------------------------------------------------
   Cursor
   --------------------------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ---------------------------------------------------------------------------
   Pointer events
   --------------------------------------------------------------------------- */
.pointer-events-none { pointer-events: none; }

/* ---------------------------------------------------------------------------
   Transition
   --------------------------------------------------------------------------- */
.transition     { transition: all 120ms ease; }
.transition-colors { transition: background 120ms, border-color 120ms, color 120ms; }

/* ---------------------------------------------------------------------------
   Vertical align
   --------------------------------------------------------------------------- */
.align-middle { vertical-align: middle; }
.align-top    { vertical-align: top; }