/* ═══════════════════════════════════════════════════════
   utilities.css - OwnPay Shared Utility Classes
   ═══════════════════════════════════════════════════════ */

/* -----------------------------------------------
   DISPLAY
   ----------------------------------------------- */
.hidden {
   display: none;
}

.block {
   display: block;
}

.inline-block {
   display: inline-block;
}

.flex {
   display: flex;
}

.inline-flex {
   display: inline-flex;
}

.grid {
   display: grid;
}

/* -----------------------------------------------
   FLEX UTILITIES
   ----------------------------------------------- */
.flex-col {
   flex-direction: column;
}

.flex-row {
   flex-direction: row;
}

.flex-wrap {
   flex-wrap: wrap;
}

.flex-1 {
   flex: 1;
}

.flex-none {
   flex: none;
}

.items-center {
   align-items: center;
}

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

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

.items-stretch {
   align-items: stretch;
}

.justify-center {
   justify-content: center;
}

.justify-between {
   justify-content: space-between;
}

.justify-end {
   justify-content: flex-end;
}

.gap-1 {
   gap: var(--sp-1);
}

.gap-2 {
   gap: var(--sp-2);
}

.gap-3 {
   gap: var(--sp-3);
}

.gap-4 {
   gap: var(--sp-4);
}

.gap-6 {
   gap: var(--sp-6);
}

.gap-8 {
   gap: var(--sp-8);
}

.gap-10 {
   gap: var(--sp-10);
}

.gap-12 {
   gap: var(--sp-12);
}

/* -----------------------------------------------
   SPACING
   ----------------------------------------------- */
.p-0 {
   padding: 0;
}

.p-2 {
   padding: var(--sp-2);
}

.p-4 {
   padding: var(--sp-4);
}

.p-6 {
   padding: var(--sp-6);
}

.p-8 {
   padding: var(--sp-8);
}

.p-10 {
   padding: var(--sp-10);
}

.p-12 {
   padding: var(--sp-12);
}

.p-14 {
   padding: var(--sp-14);
}

.p-16 {
   padding: var(--sp-16);
}

.p-20 {
   padding: var(--sp-20);
}

.px-4 {
   padding-left: var(--sp-4);
   padding-right: var(--sp-4);
}

.px-6 {
   padding-left: var(--sp-6);
   padding-right: var(--sp-6);
}

.px-8 {
   padding-left: var(--sp-8);
   padding-right: var(--sp-8);
}

.px-10 {
   padding-left: var(--sp-10);
   padding-right: var(--sp-10);
}

.px-12 {
   padding-left: var(--sp-12);
   padding-right: var(--sp-12);
}

.px-14 {
   padding-left: var(--sp-14);
   padding-right: var(--sp-14);
}

.py-2 {
   padding-top: var(--sp-2);
   padding-bottom: var(--sp-2);
}

.py-4 {
   padding-top: var(--sp-4);
   padding-bottom: var(--sp-4);
}

.py-6 {
   padding-top: var(--sp-6);
   padding-bottom: var(--sp-6);
}

.py-8 {
   padding-top: var(--sp-8);
   padding-bottom: var(--sp-8);
}

.py-10 {
   padding-top: var(--sp-10);
   padding-bottom: var(--sp-10);
}

.py-12 {
   padding-top: var(--sp-12);
   padding-bottom: var(--sp-12);
}

.m-0 {
   margin: 0;
}

.mb-2 {
   margin-bottom: var(--sp-2);
}

.mb-4 {
   margin-bottom: var(--sp-4);
}

.mb-6 {
   margin-bottom: var(--sp-6);
}

.mb-8 {
   margin-bottom: var(--sp-8);
}

.mb-10 {
   margin-bottom: var(--sp-10);
}

.mb-12 {
   margin-bottom: var(--sp-12);
}

.mb-16 {
   margin-bottom: var(--sp-16);
}

.mb-20 {
   margin-bottom: var(--sp-20);
}

.mt-4 {
   margin-top: var(--sp-4);
}

.mt-8 {
   margin-top: var(--sp-8);
}

.mt-12 {
   margin-top: var(--sp-12);
}

.mt-16 {
   margin-top: var(--sp-16);
}

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

/* -----------------------------------------------
   TEXT
   ----------------------------------------------- */
.text-left {
   text-align: left;
}

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

.font-sans {
   font-family: var(--font);
}

.font-mono {
   font-family: var(--mono);
}

.text-xs {
   font-size: 11px;
}

.text-sm {
   font-size: 12px;
}

.text-base {
   font-size: 13px;
}

.text-md {
   font-size: 14px;
}

.text-lg {
   font-size: 15px;
}

.text-xl {
   font-size: 18px;
}

.text-2xl {
   font-size: 22px;
}

.text-3xl {
   font-size: 30px;
}

.font-medium {
   font-weight: 500;
}

.font-semibold {
   font-weight: 600;
}

.font-bold {
   font-weight: 700;
}

.font-extrabold {
   font-weight: 800;
}

.uppercase {
   text-transform: uppercase;
   letter-spacing: 0.12em;
}

.truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.text-ink {
   color: var(--ink);
}

.text-ink-2 {
   color: var(--ink-2);
}

.text-ink-3 {
   color: var(--ink-3);
}

.text-ink-4 {
   color: var(--ink-4);
}

.text-mute {
   color: var(--mute);
}

.text-faint {
   color: var(--faint);
}

.text-teal {
   color: var(--teal);
}

.text-red {
   color: var(--red);
}

.text-green {
   color: var(--green);
}

.text-white {
   color: var(--white);
}

/* -----------------------------------------------
   BACKGROUNDS
   ----------------------------------------------- */
.bg-white {
   background-color: var(--white);
}

.bg-snow {
   background-color: var(--snow);
}

.bg-cloud {
   background-color: var(--cloud);
}

.bg-teal {
   background-color: var(--teal);
}

.bg-teal-pale {
   background-color: var(--teal-pale);
}

.bg-ink {
   background-color: var(--ink);
}

.bg-ink-2 {
   background-color: var(--ink-2);
}

/* -----------------------------------------------
   BORDERS
   ----------------------------------------------- */
.border {
   border: 1px solid var(--cloud);
}

.border-b {
   border-bottom: 1px solid var(--cloud);
}

.border-t {
   border-top: 1px solid var(--cloud);
}

.border-l {
   border-left: 1px solid var(--cloud);
}

.border-r {
   border-right: 1px solid var(--cloud);
}

.border-none {
   border: none;
}

.border-teal {
   border-color: var(--teal);
}

.border-whisper {
   border-color: var(--whisper);
}

.border-faint {
   border-color: var(--faint);
}

.border-red {
   border-color: var(--red);
}

.rounded-sm {
   border-radius: var(--r-sm);
}

.rounded-md {
   border-radius: var(--r-md);
}

.rounded-lg {
   border-radius: var(--r-lg);
}

.rounded-xl {
   border-radius: var(--r-xl);
}

.rounded-2xl {
   border-radius: var(--r-2xl);
}

.rounded-3xl {
   border-radius: var(--r-3xl);
}

.rounded-shell {
   border-radius: var(--r-shell);
}

.rounded-pill {
   border-radius: var(--r-pill);
}

/* -----------------------------------------------
   SIZING
   ----------------------------------------------- */
.w-full {
   width: 100%;
}

.h-full {
   height: 100%;
}

.min-h-screen {
   min-height: 100vh;
}

/* -----------------------------------------------
   POSITION
   ----------------------------------------------- */
.relative {
   position: relative;
}

.absolute {
   position: absolute;
}

.fixed {
   position: fixed;
}

.sticky {
   position: sticky;
}

.inset-0 {
   inset: 0;
}

.top-0 {
   top: 0;
}

.right-0 {
   right: 0;
}

.bottom-0 {
   bottom: 0;
}

.left-0 {
   left: 0;
}

/* -----------------------------------------------
   OVERFLOW
   ----------------------------------------------- */
.overflow-hidden {
   overflow: hidden;
}

.overflow-auto {
   overflow: auto;
}

.overflow-y-auto {
   overflow-y: auto;
}

.overflow-x-hidden {
   overflow-x: hidden;
}

/* -----------------------------------------------
   CURSOR
   ----------------------------------------------- */
.cursor-pointer {
   cursor: pointer;
}

.cursor-not-allowed {
   cursor: not-allowed;
}

.cursor-default {
   cursor: default;
}

/* -----------------------------------------------
   TRANSITIONS
   ----------------------------------------------- */
.transition {
   transition: all var(--duration-fast);
}

.transition-colors {
   transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast);
}

.transition-transform {
   transition: transform var(--duration-fast);
}

.transition-shadow {
   transition: box-shadow var(--duration-fast);
}

.hover-lift:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-gw-hover);
}

.hover-scale:hover {
   transform: scale(1.02);
}

.active-press:active {
   transform: scale(0.97);
}

/* -----------------------------------------------
   ACCESSIBILITY
   ----------------------------------------------- */
.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;
}

/* -----------------------------------------------
   RESPONSIVE (common patterns)
   ----------------------------------------------- */
@media (max-width: 768px) {
   .md-hidden {
      display: none;
   }

   .md-block {
      display: block;
   }

   .md-flex {
      display: flex;
   }

   .md-text-center {
      text-align: center;
   }
}

@media (max-width: 480px) {
   .sm-hidden {
      display: none;
   }

   .sm-block {
      display: block;
   }

   .sm-flex {
      display: flex;
   }
}