/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES.CSS — Single-purpose helper classes
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Text Sizes ─────────────────────────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.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); }

/* ── Font Weights ───────────────────────────────────────────────────────────── */
.fw-light    { font-weight: var(--fw-light); }
.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }
.fw-black    { font-weight: var(--fw-black); }

/* ── Text Colors ────────────────────────────────────────────────────────────── */
.text-primary   { color: var(--color-primary); }
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-white     { color: var(--clr-white); }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }

/* ── Background Colors ──────────────────────────────────────────────────────── */
.bg-white     { background: var(--clr-white); }
.bg-alt       { background: var(--clr-slate-100); }
.bg-navy      { background: var(--clr-navy-900); }
.bg-navy-dark { background: var(--clr-navy-950); }
.bg-gold      { background: var(--clr-sky-100); }

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

/* ── Spacing: Padding ───────────────────────────────────────────────────────── */
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.py-8 { padding-block: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }

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

/* ── Visually Hidden (accessible) ──────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Width helpers ──────────────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 860px; }

/* ── Border Radius ──────────────────────────────────────────────────────────── */
.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); }

/* ── Divider ────────────────────────────────────────────────────────────────── */
.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-8);
}

/* ── Gradient text ──────────────────────────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(120deg, var(--clr-sky-600), var(--clr-sky-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Highlight / Mark ───────────────────────────────────────────────────────── */
.highlight {
    background: linear-gradient(180deg, transparent 58%, var(--sky-soft) 58%);
    padding-inline: var(--space-1);
}

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in  { animation: fadeIn  0.5s var(--ease) both; }
.animate-slide-up { animation: slideUp 0.6s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in, .animate-slide-up { animation: none; }
}

/* ── Responsive: Hide / Show ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */
@media print {
    .site-header, .site-footer { display: none; }
    body { font-size: 12pt; color: #000; }
}