/* Copyright 2025-2026 Renofy Ltd. All rights reserved. */
/* === Utility Classes === */

/* === Font Family === */
.font-sans { font-family: var(--font-sans); }

/* === Font Sizes === */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* === Font Weights === */
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* === Line Heights === */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-loose { line-height: var(--line-height-loose); }

/* === Text Alignment Utilities === */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-justify { text-align: justify; }

/* === Text Colors === */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-white { color: var(--color-white); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-blue { color: var(--color-blue); }
.text-mint { color: var(--color-mint); }
.text-pink { color: var(--color-pink); }

/* === Background Colors === */
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-bg-light); }
.bg-pink { background-color: var(--color-pink); }
.bg-danger { background-color: var(--color-danger); }
.bg-warning { background-color: var(--color-warning); }
.bg-blue { background-color: var(--color-blue); }
.bg-mint { background-color: var(--color-mint); }

/* === Border Colors === */
.border-color { border-color: var(--color-border); }
.border-pink { border-color: var(--color-pink); }
.border-danger { border-color: var(--color-danger); }
.border-warning { border-color: var(--color-warning); }
.border-blue { border-color: var(--color-blue); }
.border-mint { border-color: var(--color-mint); }

/* === Margin Utilities === */

/* All sides */
.m-0     { margin: 0; }
.m-1     { margin: 0.25rem; }  /* 4px */
.m-2     { margin: 0.5rem; }   /* 8px */
.m-3     { margin: 0.75rem; }  /* 12px */
.m-4     { margin: 1rem; }     /* 16px */
.m-5     { margin: 1.25rem; }  /* 20px */
.m-6     { margin: 1.5rem; }   /* 24px */
.m-8     { margin: 2rem; }     /* 32px */

/* Top */
.mt-0    { margin-top: 0; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }

/* Bottom */
.mb-0    { margin-bottom: 0; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }

/* Left */
.ml-0    { margin-left: 0; }
.ml-1    { margin-left: 0.25rem; }
.ml-2    { margin-left: 0.5rem; }
.ml-3    { margin-left: 0.75rem; }
.ml-4    { margin-left: 1rem; }
.ml-5    { margin-left: 1.25rem; }
.ml-6    { margin-left: 1.5rem; }
.ml-8    { margin-left: 2rem; }

/* Right */
.mr-0    { margin-right: 0; }
.mr-1    { margin-right: 0.25rem; }
.mr-2    { margin-right: 0.5rem; }
.mr-3    { margin-right: 0.75rem; }
.mr-4    { margin-right: 1rem; }
.mr-5    { margin-right: 1.25rem; }
.mr-6    { margin-right: 1.5rem; }
.mr-8    { margin-right: 2rem; }

/* Horizontal */
.mx-0    { margin-left: 0; margin-right: 0; }
.mx-1    { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2    { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3    { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4    { margin-left: 1rem; margin-right: 1rem; }
.mx-5    { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx-6    { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8    { margin-left: 2rem; margin-right: 2rem; }

/* Vertical */
.my-0    { margin-top: 0; margin-bottom: 0; }
.my-1    { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2    { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3    { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4    { margin-top: 1rem; margin-bottom: 1rem; }
.my-5    { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6    { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8    { margin-top: 2rem; margin-bottom: 2rem; }

.center-x {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.left-x {
  display: block;
  margin-left: 0;
  margin-right: auto;
}

.right-x {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

/* === Responsive Display Utilities === */

/* Mobile-only visibility (hide on desktop) */
@media (min-width: 821px) {
  .mobile-only {
    display: none !important;
  }
}

/* Desktop-only visibility (hide on mobile) */
@media (max-width: 820px) {
  .desktop-only {
    display: none !important;
  }
}

/* === Accessibility Utilities === */

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}