/* ============================================================
   MANOVEDH UTILITY CLASSES (Deep Green + Mint brand family)
   ============================================================ */

/* ---- Mint Surface ---- */
.bg-cream { background: var(--color-cream); }
.bg-surface { background: var(--color-surface); }
.bg-ink-3 { background: var(--color-ink-3); }
.bg-ink-4 { background: var(--color-ink-4); }

/* ---- Borders ---- */
.border-warm { border: 1px solid var(--color-border-warm); }
.border-ink { border: 1px solid var(--color-border-ink); }

/* ---- Focus Visible (soft glow) ---- */
*:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* ---- Cursor Pointer ---- */
.cursor-pointer { cursor: pointer; }

/* ---- Inset Button Shadow ---- */
.shadow-inset-btn { box-shadow: var(--shadow-inset-btn); }

/* ---- Dot Pattern Background ---- */
.bg-dot-pattern {
  background-image: radial-gradient(circle, var(--color-border-warm) 1px, transparent 1px);
  background-size: 24px 24px;
}

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

/* ---- Reduced Motion Override ---- */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up,
  .animate-scale-in {
    animation: none;
  }
}

/* ---- Touch & Mobile Actions ---- */
.touch-manipulation { touch-action: manipulation; }

/* ---- Safe Area Utilities ---- */
.pt-safe { padding-top: max(16px, var(--safe-top, 16px)); }
.pb-safe { padding-bottom: max(16px, var(--safe-bottom, 16px)); }
.pl-safe { padding-left: max(16px, var(--safe-left, 16px)); }
.pr-safe { padding-right: max(16px, var(--safe-right, 16px)); }

/* ---- Mobile Flex & Grid Wrappers ---- */
@media (max-width: 639px) {
  .flex-col-sm {
    flex-direction: column !important;
  }
  .w-full-sm {
    width: 100% !important;
  }
  .text-center-sm {
    text-align: center !important;
  }
}

/* ---- Role Button (for non-button interactive elements) ---- */
[role="button"] {
  cursor: pointer;
  user-select: none;
  min-height: var(--touch-target-min, 44px);
  touch-action: manipulation;
}
[role="button"]:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}