/* ==========================================================================
   UTILITIES.CSS — Atomic helper classes
   ========================================================================== */

.text-primary { color: var(--color-primary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-white { color: #fff !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-center { text-align: center !important; }

.bg-primary { background: var(--color-primary) !important; }
.bg-surface { background: var(--color-surface) !important; }
.bg-ink { background: var(--color-ink-fixed) !important; }

.mt-1{margin-top:var(--space-1)!important} .mt-2{margin-top:var(--space-2)!important} .mt-3{margin-top:var(--space-3)!important} .mt-4{margin-top:var(--space-4)!important} .mt-6{margin-top:var(--space-6)!important}
.mb-1{margin-bottom:var(--space-1)!important} .mb-2{margin-bottom:var(--space-2)!important} .mb-3{margin-bottom:var(--space-3)!important} .mb-4{margin-bottom:var(--space-4)!important} .mb-6{margin-bottom:var(--space-6)!important}

.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }

.max-w-content { max-width: 68ch; }

.visually-hidden-mobile { }
@media (max-width: 640px) { .hide-mobile { display: none !important; } }
@media (min-width: 641px) { .hide-desktop { display: none !important; } }

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
}

.divider { height: 1px; background: var(--color-border); border: none; }

/* Fluid vertical rhythm helper for icon lists */
.check-list { display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-base); color: var(--color-text); }
.check-list li svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-success); margin-top: 1px; }