/**
 * axsysTek Sandbox — Utilities
 * Single-purpose helpers; use sparingly — prefer component classes
 * Depends on: tokens.css
 */

/* ── Text Color ─────────────────────────────────────────────────────────── */
.text-blue       { color: var(--color-blue)   !important; }
.text-orange     { color: var(--color-orange) !important; }
.text-navy       { color: var(--color-navy)   !important; }
.text-white      { color: var(--color-white)  !important; }
.text-mid        { color: var(--color-mid)    !important; }
.text-ink        { color: var(--color-ink)    !important; }
.text-amber      { color: var(--color-amber)  !important; }

/* ── Background Color ───────────────────────────────────────────────────── */
.bg-blue    { background-color: var(--color-blue)   !important; }
.bg-navy    { background-color: var(--color-navy)   !important; }
.bg-orange  { background-color: var(--color-orange) !important; }
.bg-linen   { background-color: var(--color-linen)  !important; }
.bg-sky     { background-color: var(--color-sky)    !important; }
.bg-white   { background-color: var(--color-white)  !important; }

/* ── Font Family ────────────────────────────────────────────────────────── */
.font-display { font-family: var(--font-display) !important; }
.font-body    { font-family: var(--font-body)    !important; }
.font-mono    { font-family: var(--font-mono)    !important; }

/* ── Font Weight ────────────────────────────────────────────────────────── */
.fw-regular   { font-weight: var(--fw-regular)   !important; }
.fw-medium    { font-weight: var(--fw-medium)    !important; }
.fw-semibold  { font-weight: var(--fw-semibold)  !important; }
.fw-bold      { font-weight: var(--fw-bold)      !important; }
.fw-extrabold { font-weight: var(--fw-extrabold) !important; }

/* ── Type Size ──────────────────────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs)   !important; }
.text-sm   { font-size: var(--text-sm)   !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg   { font-size: var(--text-lg)   !important; }
.text-xl   { font-size: var(--text-xl)   !important; }
.text-2xl  { font-size: var(--text-2xl)  !important; }
.text-3xl  { font-size: var(--text-3xl)  !important; }
.text-4xl  { font-size: var(--text-4xl)  !important; }
.text-5xl  { font-size: var(--text-5xl)  !important; }
.text-hero { font-size: var(--text-hero) !important; }

/* ── Overline Label ─────────────────────────────────────────────────────── */
.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

/* ── Text Alignment ─────────────────────────────────────────────────────── */
.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }

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

/* ── Flex Helpers ───────────────────────────────────────────────────────── */
.items-center   { align-items: center       !important; }
.items-start    { align-items: flex-start   !important; }
.items-end      { align-items: flex-end     !important; }
.justify-center { justify-content: center   !important; }
.justify-between { justify-content: space-between !important; }
.flex-wrap      { flex-wrap: wrap           !important; }
.gap-2          { gap: var(--space-2)       !important; }
.gap-4          { gap: var(--space-4)       !important; }
.gap-6          { gap: var(--space-6)       !important; }
.gap-8          { gap: var(--space-8)       !important; }

/* ── Spacing ────────────────────────────────────────────────────────────── */
.mt-0  { margin-top: 0             !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.mt-8  { margin-top: var(--space-8) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mb-0  { margin-bottom: 0              !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }

/* ── Max Width ──────────────────────────────────────────────────────────── */
.max-w-prose  { max-width: 68ch         !important; }
.max-w-narrow { max-width: var(--container-sm) !important; }
.max-w-md     { max-width: var(--container-md) !important; }
.max-w-full   { max-width: 100%         !important; }

/* ── Border Radius ──────────────────────────────────────────────────────── */
.rounded    { border-radius: var(--radius)    !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

/* ── Shadow ─────────────────────────────────────────────────────────────── */
.shadow     { box-shadow: var(--shadow)    !important; }
.shadow-md  { box-shadow: var(--shadow-md) !important; }
.shadow-lg  { box-shadow: var(--shadow-lg) !important; }

/* ── ScrollCue Animation Classes (data-cue targets) ────────────────────── */
/* ScrollCue adds/removes these — we define the start state */
[data-cue] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

[data-cue].cue-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger utility: set --cue-delay on each child via nth-child or inline style */
[data-cue][style*="--cue-delay"] {
  transition-delay: var(--cue-delay, 0ms);
}

/* ── Responsive Visibility ──────────────────────────────────────────────── */
@media (max-width: 575px)  { .d-sm-none { display: none !important; } }
@media (max-width: 767px)  { .d-md-none { display: none !important; } }
@media (max-width: 991px)  { .d-lg-none { display: none !important; } }
@media (min-width: 992px)  { .d-lg-block { display: block !important; } }
@media (min-width: 992px)  { .d-mobile-only { display: none !important; } }
@media (max-width: 991px)  { .d-desktop-only { display: none !important; } }