/* ============================================================
   AÉRO-DG Solutions — CSS Utility Patch
   fixed/css/utilities.css
   
   PURPOSE: Bridges the gap between style.css (v4.1 design system)
   and HTML templates that use utility classes from the older
   index.css. Add this file to ALL pages AFTER style.css:
   
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/utilities.css">
   
   Once confirmed working, these rules can be merged into style.css
   and this file deleted.
   ============================================================ */

/* ── Display / heading font class ──────────────────────────── */
/* Used as <h1 class="display"> on sub-pages */
.display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-text);
}

/* ── Text color utilities ───────────────────────────────────── */
.text-amber    { color: var(--amber-500); }
.text-muted    { color: var(--color-muted); }
.text-white    { color: #ffffff; }
.text-success  { color: var(--color-success); }
.text-danger   { color: var(--color-danger); }

/* ── Font family ────────────────────────────────────────────── */
.font-display  { font-family: var(--font-display); }
.font-heading  { font-family: var(--font-heading); }
.font-body     { font-family: var(--font-body); }

/* ── Font weight ────────────────────────────────────────────── */
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.font-normal   { font-weight: 400; }

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

/* ── Spacing utilities ──────────────────────────────────────── */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

/* ── Flexbox ────────────────────────────────────────────────── */
.flex-1    { flex: 1; }
.flex-wrap { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ── Background ─────────────────────────────────────────────── */
.bg-surface  { background: var(--color-surface); }
.bg-surface2 { background: var(--color-surface2); }

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

/* ── Lead paragraph ─────────────────────────────────────────── */
.lead {
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.65;
}

/* ── Eyebrow label ──────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-500);
  display: inline-block;
  margin-bottom: var(--space-3);
}

/* ── Position helpers ───────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }

/* ── Border utilities ───────────────────────────────────────── */
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }

/* ── Grid helpers ───────────────────────────────────────────── */
/* These complement the grid-2/3/4 classes in style.css */
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ── Tracking / letter-spacing ──────────────────────────────── */
.tracking-wider { letter-spacing: 0.1em; }
.uppercase      { text-transform: uppercase; }

/* ── Full-width button ──────────────────────────────────────── */
.full-width { width: 100%; }

/* ── Btn outline override (missing in some templates) ──────── */
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.45);
}
.btn-outline-white:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}