/* ==========================================================================
   Likoma Airlines — Utilities
   --------------------------------------------------------------------------
   Tailwind's ergonomics, none of Tailwind's build step. Single-purpose,
   immutable classes that map 1:1 onto the design tokens. Every value here is
   a token reference — there are no literals, so re-theming is one file.

   Rules of engagement:
     • Utilities compose layout and one-off adjustments.
     • Anything used three times or carrying state becomes a component.
     • Responsive variants live in responsive.css, prefixed md: / lg: etc.
   ========================================================================== */

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

/* --- Flex & grid --------------------------------------------------------- */
.flex-row          { flex-direction: row; }
.flex-row-reverse  { flex-direction: row-reverse; }
.flex-col          { flex-direction: column; }
.flex-col-reverse  { flex-direction: column-reverse; }
.flex-wrap         { flex-wrap: wrap; }
.flex-nowrap       { flex-wrap: nowrap; }

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

.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; }
.justify-evenly  { justify-content: space-evenly; }

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

.content-center  { align-content: center; }
.content-between { align-content: space-between; }

.flex-1     { flex: 1 1 0%; }
.flex-auto  { flex: 1 1 auto; }
.flex-init  { flex: 0 1 auto; }
.flex-none  { flex: none; }
.grow       { flex-grow: 1; }
.grow-0     { flex-grow: 0; }
.shrink     { flex-shrink: 1; }
.shrink-0   { flex-shrink: 0; }

.place-items-center   { place-items: center; }
.place-content-center { place-content: center; }

.order-first { order: -1; }
.order-last  { order: 999; }
.order-none  { order: 0; }

/* --- Gap ----------------------------------------------------------------- */
.gap-0    { gap: var(--space-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-8    { gap: var(--space-8); }
.gap-10   { gap: var(--space-10); }
.gap-12   { gap: var(--space-12); }
.gap-16   { gap: var(--space-16); }

.gap-x-1  { column-gap: var(--space-1); }
.gap-x-2  { column-gap: var(--space-2); }
.gap-x-3  { column-gap: var(--space-3); }
.gap-x-4  { column-gap: var(--space-4); }
.gap-x-6  { column-gap: var(--space-6); }
.gap-x-8  { column-gap: var(--space-8); }
.gap-y-1  { row-gap: var(--space-1); }
.gap-y-2  { row-gap: var(--space-2); }
.gap-y-3  { row-gap: var(--space-3); }
.gap-y-4  { row-gap: var(--space-4); }
.gap-y-6  { row-gap: var(--space-6); }
.gap-y-8  { row-gap: var(--space-8); }
.gap-y-10 { row-gap: var(--space-10); }

/* --- Margin -------------------------------------------------------------- */
.m-0  { margin: var(--space-0); }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }
.m-auto { margin: auto; }

.mx-auto { margin-inline: auto; }
.mx-0    { margin-inline: var(--space-0); }
.mx-2    { margin-inline: var(--space-2); }
.mx-3    { margin-inline: var(--space-3); }
.mx-4    { margin-inline: var(--space-4); }

.my-0  { margin-block: var(--space-0); }
.my-2  { margin-block: var(--space-2); }
.my-4  { margin-block: var(--space-4); }
.my-6  { margin-block: var(--space-6); }
.my-8  { margin-block: var(--space-8); }
.my-12 { margin-block: var(--space-12); }

.mt-0  { margin-block-start: var(--space-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-8  { margin-block-start: var(--space-8); }
.mt-10 { margin-block-start: var(--space-10); }
.mt-12 { margin-block-start: var(--space-12); }
.mt-16 { margin-block-start: var(--space-16); }
.mt-auto { margin-block-start: auto; }

.mb-0  { margin-block-end: var(--space-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-8  { margin-block-end: var(--space-8); }
.mb-10 { margin-block-end: var(--space-10); }
.mb-12 { margin-block-end: var(--space-12); }
.mb-16 { margin-block-end: var(--space-16); }

.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); }
.me-1 { margin-inline-end: var(--space-1); }
.me-2 { margin-inline-end: var(--space-2); }
.me-3 { margin-inline-end: var(--space-3); }

/* --- Padding ------------------------------------------------------------- */
.p-0  { padding: var(--space-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-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

.px-0  { padding-inline: var(--space-0); }
.px-1  { padding-inline: var(--space-1); }
.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); }
.px-8  { padding-inline: var(--space-8); }
.px-10 { padding-inline: var(--space-10); }

.py-0  { padding-block: var(--space-0); }
.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); }
.py-8  { padding-block: var(--space-8); }
.py-10 { padding-block: var(--space-10); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }
.py-20 { padding-block: var(--space-20); }

.pt-0 { padding-block-start: var(--space-0); }
.pt-2 { padding-block-start: var(--space-2); }
.pt-4 { padding-block-start: var(--space-4); }
.pt-6 { padding-block-start: var(--space-6); }
.pt-8 { padding-block-start: var(--space-8); }
.pt-12 { padding-block-start: var(--space-12); }
.pb-0 { padding-block-end: var(--space-0); }
.pb-2 { padding-block-end: var(--space-2); }
.pb-4 { padding-block-end: var(--space-4); }
.pb-6 { padding-block-end: var(--space-6); }
.pb-8 { padding-block-end: var(--space-8); }
.pb-12 { padding-block-end: var(--space-12); }

/* --- Sizing -------------------------------------------------------------- */
.w-full   { inline-size: 100%; }
.w-auto   { inline-size: auto; }
.w-fit    { inline-size: fit-content; }
.w-min    { inline-size: min-content; }
.w-max    { inline-size: max-content; }
.w-screen { inline-size: 100vw; }
.w-4      { inline-size: var(--space-4); }
.w-5      { inline-size: var(--space-5); }
.w-6      { inline-size: var(--space-6); }
.w-8      { inline-size: var(--space-8); }
.w-10     { inline-size: var(--space-10); }
.w-12     { inline-size: var(--space-12); }
.w-16     { inline-size: var(--space-16); }

.h-full   { block-size: 100%; }
.h-auto   { block-size: auto; }
.h-screen { block-size: 100dvh; }
.h-4      { block-size: var(--space-4); }
.h-5      { block-size: var(--space-5); }
.h-6      { block-size: var(--space-6); }
.h-8      { block-size: var(--space-8); }
.h-10     { block-size: var(--space-10); }
.h-12     { block-size: var(--space-12); }
.h-16     { block-size: var(--space-16); }

.size-4  { inline-size: var(--space-4); block-size: var(--space-4); }
.size-5  { inline-size: var(--space-5); block-size: var(--space-5); }
.size-6  { inline-size: var(--space-6); block-size: var(--space-6); }
.size-8  { inline-size: var(--space-8); block-size: var(--space-8); }
.size-10 { inline-size: var(--space-10); block-size: var(--space-10); }
.size-12 { inline-size: var(--space-12); block-size: var(--space-12); }

.min-w-0    { min-inline-size: 0; }
.min-h-0    { min-block-size: 0; }
.max-w-none { max-inline-size: none; }
.max-w-xs   { max-inline-size: var(--container-xs); }
.max-w-sm   { max-inline-size: var(--container-sm); }
.max-w-md   { max-inline-size: var(--container-md); }
.max-w-lg   { max-inline-size: var(--container-lg); }
.max-w-full { max-inline-size: 100%; }
.measure    { max-inline-size: var(--measure-base); }
.measure-narrow { max-inline-size: var(--measure-narrow); }
.measure-wide   { max-inline-size: var(--measure-wide); }

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

.inset-0 { inset: 0; }
.top-0    { inset-block-start: 0; }
.bottom-0 { inset-block-end: 0; }
.start-0  { inset-inline-start: 0; }
.end-0    { inset-inline-end: 0; }

.z-below    { z-index: var(--z-below); }
.z-base     { z-index: var(--z-base); }
.z-raised   { z-index: var(--z-raised); }
.z-sticky   { z-index: var(--z-sticky); }
.z-header   { z-index: var(--z-header); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-overlay  { z-index: var(--z-overlay); }
.z-modal    { z-index: var(--z-modal); }
.z-toast    { z-index: var(--z-toast); }

/* --- Typography ---------------------------------------------------------- */
.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); }
.text-5xl  { font-size: var(--text-5xl); }

.font-light    { font-weight: var(--weight-light); }
.font-regular  { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }

.leading-none    { line-height: var(--leading-none); }
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

.text-start   { text-align: start; }
.text-center  { text-align: center; }
.text-end     { text-align: end; }
.uppercase    { text-transform: uppercase; }
.capitalize   { text-transform: capitalize; }
.normal-case  { text-transform: none; }
.italic       { font-style: italic; }
.underline    { text-decoration-line: underline; }
.no-underline { text-decoration-line: none; }
.line-through { text-decoration-line: line-through; }
.tabular      { font-variant-numeric: tabular-nums; }
.balance      { text-wrap: balance; }
.pretty       { text-wrap: pretty; }
.whitespace-nowrap { white-space: nowrap; }
.break-words  { overflow-wrap: anywhere; }

/* --- Colour: text -------------------------------------------------------- */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-inverse   { color: var(--color-text-inverse); }
.text-on-dark   { color: var(--color-text-on-dark); }
.text-brand     { color: var(--color-primary); }
.text-navy      { color: var(--color-secondary); }
.text-accent    { color: var(--color-accent); }
.text-success   { color: var(--color-success-fg); }
.text-warning   { color: var(--color-warning-fg); }
.text-danger    { color: var(--color-danger-fg); }
.text-current   { color: currentColor; }

/* --- Colour: background -------------------------------------------------- */
.bg-transparent { background-color: transparent; }
.bg-surface     { background-color: var(--color-surface); }
.bg-sunken      { background-color: var(--color-surface-sunken); }
.bg-page        { background-color: var(--color-background); }
.bg-alt         { background-color: var(--color-background-alt); }
.bg-deep        { background-color: var(--color-background-deep); }
.bg-brand       { background-color: var(--color-primary); }
.bg-brand-soft  { background-color: var(--color-primary-soft); }
.bg-navy        { background-color: var(--color-secondary); }
.bg-navy-soft   { background-color: var(--color-secondary-soft); }
.bg-accent      { background-color: var(--color-accent); }
.bg-accent-soft { background-color: var(--color-accent-soft); }
.bg-success-soft { background-color: var(--color-success-bg); }
.bg-warning-soft { background-color: var(--color-warning-bg); }
.bg-danger-soft  { background-color: var(--color-danger-bg); }

.bg-gradient-sky   { background: var(--gradient-sky); }
.bg-gradient-dawn  { background: var(--gradient-dawn); }
.bg-gradient-brand { background: var(--gradient-brand); }
.bg-gradient-mist  { background: var(--gradient-mist); }

.bg-glass {
  background-color: var(--glass-bg);
}

.bg-cover  { background-size: cover; }
.bg-center { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }

/* --- Border & radius ----------------------------------------------------- */
.border      { border: 1px solid var(--color-border); }
.border-0    { border: 0; }
.border-subtle { border: 1px solid var(--color-border-subtle); }
.border-strong { border: 1px solid var(--color-border-strong); }
.border-brand  { border: 1px solid var(--color-primary); }
.border-t    { border-block-start: 1px solid var(--color-border); }
.border-b    { border-block-end: 1px solid var(--color-border); }
.border-s    { border-inline-start: 1px solid var(--color-border); }
.border-e    { border-inline-end: 1px solid var(--color-border); }

.rounded-none { border-radius: var(--radius-none); }
.rounded-xs   { border-radius: var(--radius-xs); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-3xl  { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-card { border-radius: var(--radius-card); }

/* --- Shadow -------------------------------------------------------------- */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-2xl  { box-shadow: var(--shadow-2xl); }
.shadow-ring { box-shadow: var(--shadow-ring); }
.shadow-primary { box-shadow: var(--shadow-primary); }

/* --- Effects ------------------------------------------------------------- */
.opacity-0   { opacity: var(--opacity-0); }
.opacity-40  { opacity: var(--opacity-40); }
.opacity-60  { opacity: var(--opacity-60); }
.opacity-80  { opacity: var(--opacity-80); }
.opacity-100 { opacity: var(--opacity-100); }

.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-visible { overflow: visible; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }

.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }
.object-center   { object-position: center; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none  { user-select: none; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

.isolate { isolation: isolate; }
.will-change-transform { will-change: transform; }
.transform-gpu { transform: translateZ(0); }
.backface-hidden { backface-visibility: hidden; }

.transition       { transition: var(--transition-all); }
.transition-colors { transition: var(--transition-colors); }
.transition-transform { transition: var(--transition-transform); }
.transition-shadow { transition: var(--transition-shadow); }
.transition-none  { transition: none; }

/* --- Interaction helpers -------------------------------------------------
   Kept as utilities because they are pure presentation and appear on many
   unrelated components.
   ------------------------------------------------------------------------ */

/* Stretches a link over its whole card without nesting interactive elements */
.lk-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  border-radius: inherit;
}

/* Anything that must sit above a stretched link */
.lk-above-stretch {
  position: relative;
  z-index: calc(var(--z-raised) + 1);
}

.hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.hover-lift:hover {
  transform: var(--lift-md);
  box-shadow: var(--shadow-lg);
}

.hover-zoom img {
  transition: transform var(--duration-slower) var(--ease-out);
}

.hover-zoom:hover img {
  transform: scale(1.06);
}

/* Guarantees a comfortable touch area on visually small controls */
.tap-target {
  position: relative;
}

.tap-target::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: max(100%, var(--tap-target));
  block-size: max(100%, var(--tap-target));
  transform: translate(-50%, -50%);
}