/* ============================================================
   UI Kit — Utilities
   A deliberately small, predictable set: spacing, flex/grid,
   text, colour, border, sizing, position, effects, responsive.
   Logical properties throughout, so RTL works for free.
   ============================================================ */

/* ---------- Display ---------- */
.d-none { display:none !important; }
.d-block { display:block; }
.d-inline { display:inline; }
.d-inline-block { display:inline-block; }
.d-flex { display:flex; }
.d-inline-flex { display:inline-flex; }
.d-grid { display:grid; }
.d-contents { display:contents; }

/* ---------- Flex ---------- */
.flex-row { flex-direction:row; }
.flex-col { flex-direction:column; }
.flex-wrap { flex-wrap:wrap; }
.flex-nowrap { flex-wrap:nowrap; }
.flex-1 { flex:1 1 0%; min-width:0; }
.flex-auto { flex:1 1 auto; }
.flex-none { flex:none; }
.grow { flex-grow:1; }
.shrink-0 { flex-shrink:0; }

.items-start { align-items:flex-start; }
.items-center { align-items:center; }
.items-end { align-items:flex-end; }
.items-baseline { align-items:baseline; }
.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; }
.justify-around { justify-content:space-around; }

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

/* ---------- Grid ---------- */
.grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.col-span-2 { grid-column:span 2; }
.col-span-3 { grid-column:span 3; }
.col-span-full { grid-column:1 / -1; }

/* ---------- Gap ---------- */
.gap-0 { gap:0; } .gap-1 { gap:var(--space-1); } .gap-2 { gap:var(--space-2); }
.gap-3 { gap:var(--space-3); } .gap-4 { gap:var(--space-4); } .gap-5 { gap:var(--space-5); }
.gap-6 { gap:var(--space-6); } .gap-7 { gap:var(--space-7); }
.gap-x-2 { column-gap:var(--space-2); } .gap-x-4 { column-gap:var(--space-4); }
.gap-y-2 { row-gap:var(--space-2); } .gap-y-4 { row-gap:var(--space-4); }

/* ---------- Margin (logical) ---------- */
.m-0 { margin:0; } .m-auto { margin:auto; }
.mt-0 { margin-block-start:0; } .mt-1 { margin-block-start:var(--space-1); }
.mt-2 { margin-block-start:var(--space-2); } .mt-3 { margin-block-start:var(--space-3); }
.mt-4 { margin-block-start:var(--space-4); } .mt-5 { margin-block-start:var(--space-5); }
.mt-6 { margin-block-start:var(--space-6); } .mt-7 { margin-block-start:var(--space-7); }
.mb-0 { margin-block-end:0; } .mb-1 { margin-block-end:var(--space-1); }
.mb-2 { margin-block-end:var(--space-2); } .mb-3 { margin-block-end:var(--space-3); }
.mb-4 { margin-block-end:var(--space-4); } .mb-5 { margin-block-end:var(--space-5); }
.mb-6 { margin-block-end:var(--space-6); } .mb-7 { margin-block-end:var(--space-7); }
.ms-auto { margin-inline-start:auto; } .me-auto { margin-inline-end:auto; }
.ms-1 { margin-inline-start:var(--space-1); } .ms-2 { margin-inline-start:var(--space-2); }
.ms-3 { margin-inline-start:var(--space-3); } .ms-4 { margin-inline-start:var(--space-4); }
.me-1 { margin-inline-end:var(--space-1); } .me-2 { margin-inline-end:var(--space-2); }
.me-3 { margin-inline-end:var(--space-3); } .me-4 { margin-inline-end:var(--space-4); }
.mx-auto { margin-inline:auto; }

/* ---------- Padding ---------- */
.p-0 { padding:0; } .p-1 { padding:var(--space-1); } .p-2 { padding:var(--space-2); }
.p-3 { padding:var(--space-3); } .p-4 { padding:var(--space-4); } .p-5 { padding:var(--space-5); }
.p-6 { padding:var(--space-6); } .p-7 { padding:var(--space-7); }
.px-2 { padding-inline:var(--space-2); } .px-3 { padding-inline:var(--space-3); }
.px-4 { padding-inline:var(--space-4); } .px-5 { padding-inline:var(--space-5); }
.px-6 { padding-inline:var(--space-6); }
.py-1 { padding-block:var(--space-1); } .py-2 { padding-block:var(--space-2); }
.py-3 { padding-block:var(--space-3); } .py-4 { padding-block:var(--space-4); }
.py-5 { padding-block:var(--space-5); } .py-6 { padding-block:var(--space-6); }
.pt-0 { padding-block-start:0; } .pb-0 { padding-block-end:0; }

/* ---------- Text ---------- */
.text-start { text-align:start; } .text-center { text-align:center; } .text-end { text-align:end; }
.text-2xs { font-size:var(--text-2xs); } .text-xs { font-size:var(--text-xs); }
.text-sm { font-size:var(--text-sm); } .text-base { font-size:var(--text-base); }
.text-md { font-size:var(--text-md); } .text-lg { font-size:var(--text-lg); }
.text-xl { font-size:var(--text-xl); } .text-2xl { font-size:var(--text-2xl); }
.text-3xl { font-size:var(--text-3xl); } .text-4xl { font-size:var(--text-4xl); }

.fw-400 { font-weight:400; } .fw-500 { font-weight:500; } .fw-600 { font-weight:600; }
.fw-700 { font-weight:700; } .fw-800 { font-weight:800; }
.italic { font-style:italic; }
.uppercase { text-transform:uppercase; letter-spacing:var(--tracking-wide); }
.capitalize { text-transform:capitalize; }
.leading-tight { line-height:var(--leading-tight); }
.leading-loose { line-height:var(--leading-loose); }
.nowrap { white-space:nowrap; }
.break-word { overflow-wrap:anywhere; word-break:break-word; }
.no-underline { text-decoration:none; }
.underline { text-decoration:underline; text-underline-offset:2px; }

/* ---------- Colour ---------- */
.text-default { color:var(--text); }
.text-muted { color:var(--text-muted); }
.text-subtle { color:var(--text-subtle); }
.text-brand { color:var(--text-brand); }
.text-ok { color:var(--ok-tx); }
.text-warn { color:var(--warn-tx); }
.text-crit { color:var(--crit-tx); }
.text-info { color:var(--info-tx); }
.text-inverse { color:var(--text-inverse); }

.bg-page { background:var(--page); }
.bg-surface { background:var(--surface); }
.bg-sunken { background:var(--surface-sunken); }
.bg-brand { background:var(--brand-600); color:var(--text-on-brand); }
.bg-brand-soft { background:var(--brand-50); }
.bg-accent { background:var(--accent-500); color:var(--text-on-accent); }
.bg-ok { background:var(--ok-bg); } .bg-warn { background:var(--warn-bg); }
.bg-crit { background:var(--crit-bg); } .bg-info { background:var(--info-bg); }
.bg-inverse { background:var(--surface-inverse); color:var(--text-inverse); }
.bg-transparent { background:transparent; }

/* ---------- Border ---------- */
.border { border:1px solid var(--line); }
.border-0 { border:0; }
.border-top { border-block-start:1px solid var(--line); }
.border-bottom { border-block-end:1px solid var(--line); }
.border-start { border-inline-start:1px solid var(--line); }
.border-end { border-inline-end:1px solid var(--line); }
.border-soft { border-color:var(--line-soft); }
.border-strong { border-color:var(--line-strong); }
.border-brand { border-color:var(--brand-400); }
.border-dashed { border-style:dashed; }

.rounded-0 { border-radius:0; }
.rounded-xs { border-radius:var(--radius-xs); }
.rounded-sm { border-radius:var(--radius-sm); }
.rounded { border-radius:var(--radius-md); }
.rounded-lg { border-radius:var(--radius-lg); }
.rounded-xl { border-radius:var(--radius-xl); }
.rounded-pill { border-radius:var(--radius-pill); }
.rounded-circle { border-radius:var(--radius-circle); }

/* ---------- Sizing ---------- */
.w-full { width:100%; } .w-auto { width:auto; } .w-fit { width:fit-content; }
.w-25 { width:25%; } .w-50 { width:50%; } .w-75 { width:75%; }
.h-full { height:100%; } .h-auto { height:auto; }
.min-w-0 { min-width:0; }
.max-w-xs { max-width:320px; } .max-w-sm { max-width:480px; }
.max-w-md { max-width:640px; } .max-w-lg { max-width:860px; } .max-w-xl { max-width:1100px; }
.size-full { width:100%; height:100%; }

/* ---------- Position ---------- */
.relative { position:relative; } .absolute { position:absolute; }
.fixed { position:fixed; } .sticky-top { position:sticky; top:0; z-index:var(--z-sticky); }
.inset-0 { inset:0; }
.z-0 { z-index:0; } .z-1 { z-index:1; } .z-10 { z-index:10; }

/* ---------- Overflow ---------- */
.overflow-hidden { overflow:hidden; }
.overflow-auto { overflow:auto; }
.overflow-x-auto { overflow-x:auto; }
.overflow-y-auto { overflow-y:auto; }
.scroll-area { overflow-y:auto; overscroll-behavior:contain; }

/* ---------- Effects ---------- */
.shadow-none { box-shadow:none; }
.shadow-xs { box-shadow:var(--shadow-xs); }
.shadow-sm { box-shadow:var(--shadow-sm); }
.shadow { box-shadow:var(--shadow-md); }
.shadow-lg { box-shadow:var(--shadow-lg); }
.opacity-0 { opacity:0; } .opacity-50 { opacity:.5; } .opacity-75 { opacity:.75; }
.pointer { cursor:pointer; } .cursor-default { cursor:default; }
.not-allowed { cursor:not-allowed; }
.select-none { user-select:none; }
.transition { transition:all var(--duration-base) var(--ease-out); }

/* Lift a card on hover — the standard interactive affordance */
.hover-lift { transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.hover-lift:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.hover-surface:hover { background:var(--surface-hover); }

/* ---------- Aspect ---------- */
.aspect-square { aspect-ratio:1/1; }
.aspect-video { aspect-ratio:16/9; }
.aspect-photo { aspect-ratio:4/3; }
.object-cover { object-fit:cover; }
.object-contain { object-fit:contain; }

/* ---------- Responsive escape hatches ---------- */
@media (max-width:1180px) { .hide-lg { display:none !important; } }
@media (max-width:900px)  { .hide-md { display:none !important; } .stack-md { flex-direction:column; align-items:stretch; } }
@media (max-width:640px)  { .hide-sm { display:none !important; } .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns:minmax(0,1fr); } }
@media (min-width:901px)  { .show-md-only { display:none !important; } }