/* ========================================
   VM UTILITY SYSTEM — Fluid Responsive
   Spacing auto-scales from 320px → 1440px
   Breakpoints: 768px (md) · 1024px (lg)

   HOW IT WORKS:
   ─────────────
   Each spacing token uses clamp() to smoothly
   interpolate between a mobile min and desktop
   max value. No more jarring jumps.

   Just use ONE class like "vm-p-xl" and it
   auto-scales: 2rem on mobile → 4rem on desktop.

   Only use md/lg prefixes when you need a HARD
   SWITCH to a different token at a breakpoint.

   Token    320px (mobile)   1440px (desktop)
   ─────    ──────────────   ────────────────
   xs       8px  (0.5rem)    12px (0.75rem)
   sm       12px (0.75rem)   16px (1rem)
   md       16px (1rem)      24px (1.5rem)
   lg       24px (1.5rem)    40px (2.5rem)
   xl       32px (2rem)      64px (4rem)
   2xl      48px (3rem)      96px (6rem)
   3xl      64px (4rem)      128px(8rem)
   ======================================== */

   :root {
    --vm-space-xs:  clamp(0.5rem,  0.43rem + 0.36vw, 0.75rem);
    --vm-space-sm:  clamp(0.75rem, 0.68rem + 0.36vw, 1rem);
    --vm-space-md:  clamp(1rem,    0.86rem + 0.71vw, 1.5rem);
    --vm-space-lg:  clamp(1.5rem,  1.21rem + 1.43vw, 2.5rem);
    --vm-space-xl:  clamp(2rem,    1.43rem + 2.86vw, 4rem);
    --vm-space-2xl: clamp(3rem,    2.14rem + 4.29vw, 6rem);
    --vm-space-3xl: clamp(4rem,    2.86rem + 5.71vw, 8rem);
}

/* --- Text Highlighting --- */
.vm-text-pink { color: var(--wp--preset--color--pink-500) !important; }
.vm-text-blue { color: var(--wp--preset--color--blue-500) !important; }
.vm-text-gray { color: var(--wp--preset--color--neutral-500) !important; }
.vm-text-white { color: var(--wp--preset--color--neutral-0) !important; }
.vm-text-hallow { color: transparent !important; -webkit-text-stroke: 1px var(--ast-global-color-4); }
.vm-text-hallow-dark { color: transparent !important; -webkit-text-stroke: 1px var(--ast-global-color-2); }
.vm-text-hallow-pink { color: transparent !important; -webkit-text-stroke: 1px var(--wp--preset--color--pink-500); }
.vm-text-hallow-blue { color: transparent !important; -webkit-text-stroke: 1px var(--wp--preset--color--blue-500); }
.vm-text-hallow-gray { color: transparent !important; -webkit-text-stroke: 1px var(--wp--preset--color--neutral-500); }

/* --- Opacity --- */
.vm-opacity-50 { opacity: 0.5 !important; }
.vm-opacity-75 { opacity: 0.75 !important; }
.vm-opacity-100 { opacity: 1 !important; }

/* --- Position --- */
.vm-position-relative { position: relative !important; }
.vm-position-absolute { position: absolute !important; }
.vm-position-fixed { position: fixed !important; }
.vm-position-sticky { position: sticky !important; }
.vm-position-static { position: static !important; }
.vm-position-inherit { position: inherit !important; }
.vm-position-initial { position: initial !important; }
.vm-position-revert { position: revert !important; }

/* --- Overflow --- */
.vm-overflow-hidden { overflow: hidden !important; }
.vm-overflow-visible { overflow: visible !important; }
.vm-overflow-auto { overflow: auto !important; }
.vm-overflow-scroll { overflow: scroll !important; }
.vm-overflow-x-hidden { overflow-x: hidden !important; }
.vm-overflow-x-visible { overflow-x: visible !important; }
.vm-overflow-x-auto { overflow-x: auto !important; }
.vm-overflow-x-scroll { overflow-x: scroll !important; }
.vm-overflow-y-hidden { overflow-y: hidden !important; }
.vm-overflow-y-visible { overflow-y: visible !important; }
.vm-overflow-y-auto { overflow-y: auto !important; }
.vm-overflow-y-scroll { overflow-y: scroll !important; }

/* --- Background Color --- */
.vm-bg-pink { background-color: var(--wp--preset--color--pink-500); }
.vm-bg-blue { background-color: var(--wp--preset--color--blue-500); }
.vm-bg-gray { background-color: var(--wp--preset--color--neutral-500); }
.vm-bg-white { background-color: var(--wp--preset--color--neutral-0); }
.vm-bg-neutral-25 { background-color: var(--wp--preset--color--neutral-25); }
.vm-bg-neutral-50 { background-color: var(--wp--preset--color--neutral-50); }
.vm-bg-neutral-100 { background-color: var(--wp--preset--color--neutral-100); }
.vm-bg-neutral-200 { background-color: var(--wp--preset--color--neutral-200); }
.vm-bg-neutral-300 { background-color: var(--wp--preset--color--neutral-300); }


/* --- Max Width --- */
.vm-maxw-320  { max-width: 320px !important; }
.vm-maxw-460  { max-width: 460px !important; }
.vm-maxw-640  { max-width: 640px !important; }
.vm-maxw-768  { max-width: 768px !important; }
.vm-maxw-960  { max-width: 960px !important; }
.vm-maxw-1200 { max-width: 1200px !important; }
.vm-maxw-full { max-width: 100% !important; }

/* --- Container --- */
.vm-container {
    padding: var(--vm-space-xl) var(--vm-space-lg);
}

/* Mobile: more top/bottom padding for .vm-container */
@media (max-width: 767px) {
    .vm-container {
        padding-top: var(--vm-space-2xl);
        padding-bottom: var(--vm-space-2xl);
        padding-left: 5.95% !important;
        padding-right: 5.95% !important;
    }
}

/* --- Padding (all sides, fluid) --- */
.vm-p-0   { padding: 0 !important; }
.vm-p-xs  { padding: var(--vm-space-xs) !important; }
.vm-p-sm  { padding: var(--vm-space-sm) !important; }
.vm-p-md  { padding: var(--vm-space-md) !important; }
.vm-p-lg  { padding: var(--vm-space-lg) !important; }
.vm-p-xl  { padding: var(--vm-space-xl) !important; }
.vm-p-2xl { padding: var(--vm-space-2xl) !important; }
.vm-p-3xl { padding: var(--vm-space-3xl) !important; }

/* Padding Y-axis (Top & Bottom) */
.vm-py-0   { padding-top: 0 !important; padding-bottom: 0 !important; }
.vm-py-xs  { padding-top: var(--vm-space-xs) !important; padding-bottom: var(--vm-space-xs) !important; }
.vm-py-sm  { padding-top: var(--vm-space-sm) !important; padding-bottom: var(--vm-space-sm) !important; }
.vm-py-md  { padding-top: var(--vm-space-md) !important; padding-bottom: var(--vm-space-md) !important; }
.vm-py-lg  { padding-top: var(--vm-space-lg) !important; padding-bottom: var(--vm-space-lg) !important; }
.vm-py-xl  { padding-top: var(--vm-space-xl) !important; padding-bottom: var(--vm-space-xl) !important; }
.vm-py-2xl { padding-top: var(--vm-space-2xl) !important; padding-bottom: var(--vm-space-2xl) !important; }
.vm-py-3xl { padding-top: var(--vm-space-3xl) !important; padding-bottom: var(--vm-space-3xl) !important; }

/* Padding X-axis (Left & Right) */
.vm-px-0   { padding-left: 0 !important; padding-right: 0 !important; }
.vm-px-xs  { padding-left: var(--vm-space-xs) !important; padding-right: var(--vm-space-xs) !important; }
.vm-px-sm  { padding-left: var(--vm-space-sm) !important; padding-right: var(--vm-space-sm) !important; }
.vm-px-md  { padding-left: var(--vm-space-md) !important; padding-right: var(--vm-space-md) !important; }
.vm-px-lg  { padding-left: var(--vm-space-lg) !important; padding-right: var(--vm-space-lg) !important; }
.vm-px-xl  { padding-left: var(--vm-space-xl) !important; padding-right: var(--vm-space-xl) !important; }
.vm-px-2xl { padding-left: var(--vm-space-2xl) !important; padding-right: var(--vm-space-2xl) !important; }

/* --- Margin (all sides, fluid) --- */
.vm-m-0    { margin: 0 !important; }
.vm-m-auto { margin: auto !important; }
.vm-m-xs   { margin: var(--vm-space-xs) !important; }
.vm-m-sm   { margin: var(--vm-space-sm) !important; }
.vm-m-md   { margin: var(--vm-space-md) !important; }
.vm-m-lg   { margin: var(--vm-space-lg) !important; }
.vm-m-xl   { margin: var(--vm-space-xl) !important; }

/* Margin Y-axis (Top & Bottom) */
.vm-my-0    { margin-top: 0 !important; margin-bottom: 0 !important; }
.vm-my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.vm-my-xs   { margin-top: var(--vm-space-xs) !important; margin-bottom: var(--vm-space-xs) !important; }
.vm-my-sm   { margin-top: var(--vm-space-sm) !important; margin-bottom: var(--vm-space-sm) !important; }
.vm-my-md   { margin-top: var(--vm-space-md) !important; margin-bottom: var(--vm-space-md) !important; }
.vm-my-lg   { margin-top: var(--vm-space-lg) !important; margin-bottom: var(--vm-space-lg) !important; }
.vm-my-xl   { margin-top: var(--vm-space-xl) !important; margin-bottom: var(--vm-space-xl) !important; }

/* Margin X-axis (Left & Right) */
.vm-mx-0    { margin-left: 0 !important; margin-right: 0 !important; }
.vm-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.vm-mx-xs   { margin-left: var(--vm-space-xs) !important; margin-right: var(--vm-space-xs) !important; }
.vm-mx-sm   { margin-left: var(--vm-space-sm) !important; margin-right: var(--vm-space-sm) !important; }
.vm-mx-md   { margin-left: var(--vm-space-md) !important; margin-right: var(--vm-space-md) !important; }
.vm-mx-lg   { margin-left: var(--vm-space-lg) !important; margin-right: var(--vm-space-lg) !important; }
.vm-mx-xl   { margin-left: var(--vm-space-xl) !important; margin-right: var(--vm-space-xl) !important; }

/* --- Gap (fluid) --- */
.vm-gap-xs { gap: var(--vm-space-xs) !important; }
.vm-gap-sm { gap: var(--vm-space-sm) !important; }
.vm-gap-md { gap: var(--vm-space-md) !important; }
.vm-gap-lg { gap: var(--vm-space-lg) !important; }
.vm-gap-xl { gap: var(--vm-space-xl) !important; }

/* --- Row Gap --- */
.vm-row-gap-xs { row-gap: var(--vm-space-xs) !important; }
.vm-row-gap-sm { row-gap: var(--vm-space-sm) !important; }
.vm-row-gap-md { row-gap: var(--vm-space-md) !important; }
.vm-row-gap-lg { row-gap: var(--vm-space-lg) !important; }
.vm-row-gap-xl { row-gap: var(--vm-space-xl) !important; }
.vm-row-gap-2xl { row-gap: var(--vm-space-2xl) !important; }
.vm-row-gap-3xl { row-gap: var(--vm-space-3xl) !important; }

/* --- Column Gap --- */
.vm-col-gap-xs { column-gap: var(--vm-space-xs) !important; }
.vm-col-gap-sm { column-gap: var(--vm-space-sm) !important; }
.vm-col-gap-md { column-gap: var(--vm-space-md) !important; }
.vm-col-gap-lg { column-gap: var(--vm-space-lg) !important; }
.vm-col-gap-xl { column-gap: var(--vm-space-xl) !important; }
.vm-col-gap-2xl { column-gap: var(--vm-space-2xl) !important; }
.vm-col-gap-3xl { column-gap: var(--vm-space-3xl) !important; }

/* --- Display & Layout --- */
.vm-flex         { display: flex !important; }
.vm-inline-flex  { display: inline-flex !important; }
.vm-grid         { display: grid !important; }
.vm-block        { display: block !important; }
.vm-inline-block { display: inline-block !important; }
.vm-hidden       { display: none !important; }

/* --- Flexbox --- */
.vm-flex-row        { flex-direction: row !important; }
.vm-flex-col        { flex-direction: column !important; }
.vm-flex-wrap       { flex-wrap: wrap !important; }
.vm-items-start     { align-items: flex-start !important; }
.vm-items-center    { align-items: center !important; }
.vm-items-end       { align-items: flex-end !important; }
.vm-justify-start   { justify-content: flex-start !important; }
.vm-justify-center  { justify-content: center !important; }
.vm-justify-end     { justify-content: flex-end !important; }
.vm-justify-between { justify-content: space-between !important; }

/* --- Sizing --- */
.vm-w-full   { width: 100% !important; }
.vm-w-auto   { width: auto !important; }
.vm-h-full   { height: 100% !important; }
.vm-h-auto   { height: auto !important; }
.vm-h-screen { height: 100vh !important; }

/* ========================================
   TABLET OVERRIDES — 768px+
   Use only when you need a HARD switch to
   a different token at tablet breakpoint.
   ======================================== */
@media (min-width: 768px) {

    /* Padding */
    .vm-md-p-0   { padding: 0 !important; }
    .vm-md-p-sm  { padding: var(--vm-space-sm) !important; }
    .vm-md-p-md  { padding: var(--vm-space-md) !important; }
    .vm-md-p-lg  { padding: var(--vm-space-lg) !important; }
    .vm-md-p-xl  { padding: var(--vm-space-xl) !important; }
    .vm-md-p-2xl { padding: var(--vm-space-2xl) !important; }

    .vm-md-py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
    .vm-md-py-sm { padding-top: var(--vm-space-sm) !important; padding-bottom: var(--vm-space-sm) !important; }
    .vm-md-py-md { padding-top: var(--vm-space-md) !important; padding-bottom: var(--vm-space-md) !important; }
    .vm-md-py-lg { padding-top: var(--vm-space-lg) !important; padding-bottom: var(--vm-space-lg) !important; }
    .vm-md-py-xl { padding-top: var(--vm-space-xl) !important; padding-bottom: var(--vm-space-xl) !important; }

    .vm-md-px-sm { padding-left: var(--vm-space-sm) !important; padding-right: var(--vm-space-sm) !important; }
    .vm-md-px-md { padding-left: var(--vm-space-md) !important; padding-right: var(--vm-space-md) !important; }
    .vm-md-px-lg { padding-left: var(--vm-space-lg) !important; padding-right: var(--vm-space-lg) !important; }

    /* Margin */
    .vm-md-my-sm { margin-top: var(--vm-space-sm) !important; margin-bottom: var(--vm-space-sm) !important; }
    .vm-md-my-md { margin-top: var(--vm-space-md) !important; margin-bottom: var(--vm-space-md) !important; }
    .vm-md-my-lg { margin-top: var(--vm-space-lg) !important; margin-bottom: var(--vm-space-lg) !important; }

    /* Gap */
    .vm-md-gap-sm { gap: var(--vm-space-sm) !important; }
    .vm-md-gap-md { gap: var(--vm-space-md) !important; }
    .vm-md-gap-lg { gap: var(--vm-space-lg) !important; }
    .vm-md-gap-xl { gap: var(--vm-space-xl) !important; }
    .vm-md-gap-2xl { gap: var(--vm-space-2xl) !important; }

    /* Row Gap */
    .vm-md-row-gap-sm { row-gap: var(--vm-space-sm) !important; }
    .vm-md-row-gap-md { row-gap: var(--vm-space-md) !important; }
    .vm-md-row-gap-lg { row-gap: var(--vm-space-lg) !important; }
    .vm-md-row-gap-xl { row-gap: var(--vm-space-xl) !important; }
    .vm-md-row-gap-2xl { row-gap: var(--vm-space-2xl) !important; }

    /* Column Gap */
    .vm-md-col-gap-sm { column-gap: var(--vm-space-sm) !important; }
    .vm-md-col-gap-md { column-gap: var(--vm-space-md) !important; }
    .vm-md-col-gap-lg { column-gap: var(--vm-space-lg) !important; }
    .vm-md-col-gap-xl { column-gap: var(--vm-space-xl) !important; }
    .vm-md-col-gap-2xl { column-gap: var(--vm-space-2xl) !important; }

    /* Layout */
    .vm-md-flex     { display: flex !important; }
    .vm-md-flex-row { flex-direction: row !important; }
    .vm-md-flex-col { flex-direction: column !important; }
    .vm-md-block    { display: block !important; }
    .vm-md-hidden   { display: none !important; }
}

/* ========================================
   DESKTOP OVERRIDES — 1024px+
   Use only when you need a HARD switch to
   a different token at desktop breakpoint.
   ======================================== */
@media (min-width: 1024px) {
    /* Padding */
    .vm-lg-p-0   { padding: 0 !important; }
    .vm-lg-p-sm  { padding: var(--vm-space-sm) !important; }
    .vm-lg-p-md  { padding: var(--vm-space-md) !important; }
    .vm-lg-p-lg  { padding: var(--vm-space-lg) !important; }
    .vm-lg-p-xl  { padding: var(--vm-space-xl) !important; }
    .vm-lg-p-2xl { padding: var(--vm-space-2xl) !important; }

    .vm-lg-py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
    .vm-lg-py-sm { padding-top: var(--vm-space-sm) !important; padding-bottom: var(--vm-space-sm) !important; }
    .vm-lg-py-md { padding-top: var(--vm-space-md) !important; padding-bottom: var(--vm-space-md) !important; }
    .vm-lg-py-lg { padding-top: var(--vm-space-lg) !important; padding-bottom: var(--vm-space-lg) !important; }
    .vm-lg-py-xl { padding-top: var(--vm-space-xl) !important; padding-bottom: var(--vm-space-xl) !important; }

    .vm-lg-px-sm { padding-left: var(--vm-space-sm) !important; padding-right: var(--vm-space-sm) !important; }
    .vm-lg-px-md { padding-left: var(--vm-space-md) !important; padding-right: var(--vm-space-md) !important; }
    .vm-lg-px-lg { padding-left: var(--vm-space-lg) !important; padding-right: var(--vm-space-lg) !important; }

    /* Margin */
    .vm-lg-my-sm { margin-top: var(--vm-space-sm) !important; margin-bottom: var(--vm-space-sm) !important; }
    .vm-lg-my-md { margin-top: var(--vm-space-md) !important; margin-bottom: var(--vm-space-md) !important; }
    .vm-lg-my-lg { margin-top: var(--vm-space-lg) !important; margin-bottom: var(--vm-space-lg) !important; }

    /* Gap */
    .vm-lg-gap-sm { gap: var(--vm-space-sm) !important; }
    .vm-lg-gap-md { gap: var(--vm-space-md) !important; }
    .vm-lg-gap-lg { gap: var(--vm-space-lg) !important; }
    .vm-lg-gap-xl { gap: var(--vm-space-xl) !important; }
    .vm-lg-gap-2xl { gap: var(--vm-space-2xl) !important; }

    /* Row Gap */
    .vm-lg-row-gap-sm { row-gap: var(--vm-space-sm) !important; }
    .vm-lg-row-gap-md { row-gap: var(--vm-space-md) !important; }
    .vm-lg-row-gap-lg { row-gap: var(--vm-space-lg) !important; }
    .vm-lg-row-gap-xl { row-gap: var(--vm-space-xl) !important; }
    .vm-lg-row-gap-2xl { row-gap: var(--vm-space-2xl) !important; }

    /* Column Gap */
    .vm-lg-col-gap-sm { column-gap: var(--vm-space-sm) !important; }
    .vm-lg-col-gap-md { column-gap: var(--vm-space-md) !important; }
    .vm-lg-col-gap-lg { column-gap: var(--vm-space-lg) !important; }
    .vm-lg-col-gap-xl { column-gap: var(--vm-space-xl) !important; }
    .vm-lg-col-gap-2xl { column-gap: var(--vm-space-2xl) !important; }

    /* Layout */
    .vm-lg-flex     { display: flex !important; }
    .vm-lg-flex-row { flex-direction: row !important; }
    .vm-lg-flex-col { flex-direction: column !important; }
    .vm-lg-block    { display: block !important; }
    .vm-lg-hidden   { display: none !important; }
}