/* ============================================================
   UTILITIES.CSS — Spacing, Visibility, Text Helpers
   ============================================================ */

/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.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-h4); }
.text-xl    { font-size: var(--text-h3); }

.text-cream      { color: var(--cream); }
.text-spore-dust { color: var(--spore-dust); }
.text-cap-red    { color: var(--cap-red); }
.text-spore-coral{ color: var(--spore-coral); }
.text-white      { color: var(--clean-white); }
.text-green      { color: var(--flush-green); }
.text-gold       { color: var(--caution-gold); }
.text-danger     { color: var(--alert-vermillion); }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-data    { font-family: var(--font-data); }

.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semi    { font-weight: 600; }
.font-bold    { font-weight: 700; }

.uppercase    { text-transform: uppercase; letter-spacing: 0.05em; }
.italic       { font-style: italic; }
.no-wrap      { white-space: nowrap; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   SPACING UTILITIES
   ============================================================ */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.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); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.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); }

.mx-auto { margin-left: auto; margin-right: auto; }

.pt-0  { padding-top: 0; }
.pt-4  { padding-top: var(--space-4); }
.pt-8  { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }

.pb-0  { padding-bottom: 0; }
.pb-4  { padding-bottom: var(--space-4); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }

/* ============================================================
   DISPLAY / VISIBILITY
   ============================================================ */
.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.hidden        { display: none; }

.flex-row      { flex-direction: row; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1; }

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

.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }

.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ============================================================
   BACKGROUND UTILITIES
   ============================================================ */
.bg-midnight-loam { background: var(--midnight-loam); }
.bg-dark-grain    { background: var(--dark-grain); }
.bg-cap-red       { background: var(--cap-red); }
.bg-substrate     { background: var(--substrate-dark); }

/* ============================================================
   BORDER UTILITIES
   ============================================================ */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.border       { border: 1px solid rgba(0,0,0,0.1); }
.border-top   { border-top: 1px solid rgba(0,0,0,0.07); }
.border-bottom{ border-bottom: 1px solid rgba(0,0,0,0.07); }

html.dark-mode .border        { border-color: rgba(255,255,255,0.1); }
html.dark-mode .border-top    { border-top-color: rgba(255,255,255,0.06); }
html.dark-mode .border-bottom { border-bottom-color: rgba(255,255,255,0.06); }

/* ============================================================
   WIDTH UTILITIES
   ============================================================ */
.w-full  { width: 100%; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 680px; }
.max-w-lg  { max-width: 800px; }
.max-w-xl  { max-width: var(--max-width); }

/* ============================================================
   OVERFLOW
   ============================================================ */
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }

/* ============================================================
   POSITION
   ============================================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .ad-placeholder,
  .crisis-banner,
  .newsletter-cta-block {
    display: none !important;
  }

  body { background: white; color: black; }
  a { color: black; }
  h1, h2, h3, h4 { color: black; }
}