/* ============================================================================
   AQOON utilities — spacing and layout ONLY. No colour.
   ----------------------------------------------------------------------------
   Colour utilities are deliberately absent: a `.text-red` class is how a
   design system leaks back into templates one shortcut at a time. Colour is
   expressed through a component or a semantic token, never a utility.

   Bootstrap's own spacing utilities (.mb-3, .g-3 …) still work and are still
   used across the app; these add the token-based stops Bootstrap's scale does
   not cover and give the migration a target that is tied to --space-*.
   ========================================================================== */

/* ------------------------------------------------------------- spacing -- */
.aq-mt-0{ margin-top: 0 !important; }
.aq-mt-1{ margin-top: var(--space-1) !important; }
.aq-mt-2{ margin-top: var(--space-2) !important; }
.aq-mt-3{ margin-top: var(--space-3) !important; }
.aq-mt-4{ margin-top: var(--space-4) !important; }
.aq-mt-5{ margin-top: var(--space-5) !important; }
.aq-mt-6{ margin-top: var(--space-6) !important; }

.aq-mb-0{ margin-bottom: 0 !important; }
.aq-mb-1{ margin-bottom: var(--space-1) !important; }
.aq-mb-2{ margin-bottom: var(--space-2) !important; }
.aq-mb-3{ margin-bottom: var(--space-3) !important; }
.aq-mb-4{ margin-bottom: var(--space-4) !important; }
.aq-mb-5{ margin-bottom: var(--space-5) !important; }
.aq-mb-6{ margin-bottom: var(--space-6) !important; }

.aq-p-0{ padding: 0 !important; }
.aq-p-2{ padding: var(--space-2) !important; }
.aq-p-3{ padding: var(--space-3) !important; }
.aq-p-4{ padding: var(--space-4) !important; }
.aq-p-5{ padding: var(--space-5) !important; }

/* ----------------------------------------------------------------- gap -- */
.aq-gap-1{ gap: var(--space-1) !important; }
.aq-gap-2{ gap: var(--space-2) !important; }
.aq-gap-3{ gap: var(--space-3) !important; }
.aq-gap-4{ gap: var(--space-4) !important; }
.aq-gap-5{ gap: var(--space-5) !important; }

/* -------------------------------------------------------------- layout -- */
.aq-row{ display: flex; align-items: center; }
.aq-row-top{ display: flex; align-items: flex-start; }
.aq-col{ display: flex; flex-direction: column; }
.aq-wrap{ flex-wrap: wrap; }
.aq-between{ justify-content: space-between; }
.aq-end{ justify-content: flex-end; }
.aq-grow{ flex: 1 1 auto; min-width: 0; }
.aq-shrink-0{ flex: 0 0 auto; }

/* Truncation that actually works inside a flex row (min-width:0 included). */
.aq-truncate{
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------- typography -- */
/* Size/weight only — never colour. */
.aq-fs-display{ font-size: var(--fs-display); line-height: var(--lh-display); }
.aq-fs-h2{ font-size: var(--fs-h2); line-height: var(--lh-h2); }
.aq-fs-h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); }
.aq-fs-h4{ font-size: var(--fs-h4); line-height: var(--lh-h4); }
.aq-fs-body{ font-size: var(--fs-body); line-height: var(--lh-body); }
.aq-fs-sm{ font-size: var(--fs-sm); line-height: var(--lh-sm); }
.aq-fs-xs{ font-size: var(--fs-xs); line-height: var(--lh-xs); }

.aq-fw-regular{ font-weight: var(--fw-regular); }
.aq-fw-medium{ font-weight: var(--fw-medium); }
.aq-fw-semibold{ font-weight: var(--fw-semibold); }
.aq-fw-bold{ font-weight: var(--fw-bold); }

.aq-caps{
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------- shape -- */
.aq-radius-sm{ border-radius: var(--radius-sm); }
.aq-radius-md{ border-radius: var(--radius-md); }
.aq-radius-lg{ border-radius: var(--radius-lg); }
.aq-radius-pill{ border-radius: var(--radius-pill); }

/* ----------------------------------------------------------- elevation -- */
.aq-shadow-sm{ box-shadow: var(--shadow-sm); }
.aq-shadow-md{ box-shadow: var(--shadow-md); }
.aq-shadow-lg{ box-shadow: var(--shadow-lg); }

/* ---------------------------------------------------------------- misc -- */
/* Minimum comfortable touch target (WCAG 2.2 SC 2.5.8 asks 24px; 44px is the
   platform convention this project's mobile rules already use). */
.aq-target{ min-height: 44px; min-width: 44px; }

/* ------------------------------------------------------------ asset preview --
   The thumbnail shown beside an uploaded logo / stamp / favicon / letterhead in
   System Settings. object-fit:contain matters here for the same reason it does
   everywhere else the school's artwork appears: a wordmark logo or a wide
   letterhead must not be squashed into the preview box, or the administrator
   is shown a distorted version of their own identity while deciding whether to
   keep it. */
.aq-asset-preview{ height: 48px; max-width: 100%; object-fit: contain; }
.aq-asset-preview--icon{ height: 32px; width: 32px; object-fit: contain; }

/* ------------------------------------------------------------------ widths --
   Named caps for the few places a control or table should not run the full
   width of its container. Named rather than inline so the value is shared and
   greppable instead of being retyped per template. */
.aq-w-cap-sm{ max-width: 6rem; }
.aq-w-cap-md{ max-width: 20rem; }
.aq-w-cap-lg{ max-width: 40rem; }
.aq-col-narrow{ width: 4rem; }