/* ===================================
   HSI Design System - CSS Variables & Utilities
   Base font size: 16px
   =================================== */

/* ===================================
   PRIMITIVE TOKENS (Custom Properties Only)
   =================================== */

:root {
    /* Colors - Brand Blue */
    --brand-blue-050: #f0f5ff;
    --brand-blue-100: #ebf0ff;
    --brand-blue-200: #adc3ff;
    --brand-blue-300: #7096ff;
    --brand-blue-400: #235dfb;
    --brand-blue-500: #17368c;
    --brand-blue-600: #162b64;
    --brand-blue-700: #121e40;
    --brand-blue-800: #0c1328;
    --brand-blue-900: #070c18;
    --brand-blue-950: #030917;

    /* Colors - Accent Pink */
    --accent-pink-050: #fff1f6;
    --accent-pink-100: #ffdbe7;
    --accent-pink-200: #ffadc9;
    --accent-pink-300: #ff70a0;
    --accent-pink-400: #fb4b86;
    --accent-pink-500: #e1145a;
    --accent-pink-600: #861d40;
    --accent-pink-700: #401221;
    --accent-pink-800: #410a1d;
    --accent-pink-900: #330411;
    --accent-pink-950: #170007;

    /* Colors - Gray */
    --gray-050: #fcfcfc;
    --gray-100: #f5f5f5;
    --gray-200: #f1f1f2;
    --gray-250: #e3e3e4;
    --gray-300: #d6d6d6;
    --gray-350: #aeaeae;
    --gray-400: #939393;
    --gray-450: #707070;
    --gray-500: #525252;
    --gray-600: #424242;
    --gray-700: #353535;
    --gray-800: #272727;
    --gray-850: #202020;
    --gray-900: #1c1c1c;
    --gray-950: #181818;

    /* Colors - White */
    --white-100: rgba(255, 255, 255, 0.05);
    --white-200: rgba(255, 255, 255, 0.1);
    --white-300: rgba(255, 255, 255, 0.2);
    --white-400: rgba(255, 255, 255, 0.4);
    --white-500: rgba(255, 255, 255, 0.7);
    --white-600: rgba(255, 255, 255, 0.8);
    --white-700: rgba(255, 255, 255, 0.85);
    --white-800: rgba(255, 255, 255, 0.9);
    --white-900: rgba(255, 255, 255, 0.95);
    --white-1000: #ffffff;

    /* Colors - Black */
    --black-100: rgba(0, 0, 0, 0.05);
    --black-200: rgba(0, 0, 0, 0.1);
    --black-300: rgba(0, 0, 0, 0.2);
    --black-400: rgba(0, 0, 0, 0.4);
    --black-500: rgba(0, 0, 0, 0.7);
    --black-600: rgba(0, 0, 0, 0.8);
    --black-700: rgba(0, 0, 0, 0.85);
    --black-800: rgba(0, 0, 0, 0.9);
    --black-900: rgba(0, 0, 0, 0.95);
    --black-1000: #000000;

    /* Colors - Green */
    --green-50: #f1fef9;
    --green-100: #ebfffb;
    --green-200: #adffef;
    --green-300: #70ffe2;
    --green-400: #4bfbd9;
    --green-500: #22d3af;
    --green-600: #1d8671;
    --green-700: #124037;
    --green-800: #0b3c32;
    --green-900: #001e18;

    /* Colors - Red */
    --red-050: #fff2f0;
    --red-100: #ffcec7;
    --red-200: #ffa79d;
    --red-300: #ff7b70;
    --red-400: #fd413d;
    --red-500: #e11420;
    --red-600: #be0014;
    --red-700: #8d000c;
    --red-800: #5d0005;
    --red-900: #360002;

    /* Colors - Support Purple */
    --support-purple-100: #f5ebff;
    --support-purple-200: #d6adff;
    --support-purple-300: #b870ff;
    --support-purple-400: #a34bfb;
    --support-purple-500: #7a22d3;
    --support-purple-600: #521d86;
    --support-purple-700: #291240;
    --support-purple-800: #25103a;
    --support-purple-900: #210e33;
    --support-purple-1000: #1d0d2d;

    /* Colors - Support Teal */
    --support-teal-050: #f2feff;
    --support-teal-100: #e0f3f5;
    --support-teal-200: #ccebee;
    --support-teal-300: #99d7dd;
    --support-teal-400: #66c3cd;
    --support-teal-500: #33afbc;
    --support-teal-600: #009bab;
    --support-teal-700: #007480;
    --support-teal-800: #004e56;
    --support-teal-900: #001d20;

    /* Colors - Support Yellow */
    --support-yellow-100: #fff5eb;
    --support-yellow-200: #ffd9ad;
    --support-yellow-300: #ffbc70;
    --support-yellow-400: #fba94b;
    --support-yellow-500: #d38022;
    --support-yellow-600: #86551d;
    --support-yellow-700: #402a12;

    /* Font Families */
    --family-first: 'Gabarito', sans-serif;
    --family-second: 'Figtree', sans-serif;

    /* Font Weights */
    --weight-extralight: 100;
    --weight-light: 200;
    --weight-thin: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* Base Size Scale */
    --size-0: 0px;
    --size-0-25: 1px;
    --size-0-5: 2px;
    --size-1: 4px;
    --size-1-5: 6px;
    --size-2: 8px;
    --size-2-5: 10px;
    --size-3: 12px;
    --size-3-5: 14px;
    --size-4: 16px;
    --size-4-5: 18px;
    --size-5: 20px;
    --size-5-5: 22px;
    --size-6: 24px;
    --size-7: 28px;
    --size-8: 32px;
    --size-9: 36px;
    --size-10: 40px;
    --size-11: 44px;
    --size-12: 48px;
    --size-14: 56px;
    --size-16: 64px;
    --size-20: 80px;
    --size-24: 96px;
    --size-28: 112px;
    --size-32: 128px;
    --size-36: 144px;
    --size-40: 160px;
    --size-44: 176px;
    --size-48: 192px;
    --size-52: 208px;
    --size-56: 224px;
    --size-60: 240px;
    --size-64: 256px;
    --size-72: 288px;
    --size-80: 320px;
    --size-96: 384px;
    --size-neg-0-5: -2px;
    --size-neg-1: -4px;
    --size-neg-1-5: -6px;
    --size-neg-2: -8px;
}

/* ===================================
   SEMANTIC TOKENS - MOBILE (0-639px)
   =================================== */

:root {
    /* Color - Text */
    --color-text-heading: var(--brand-blue-600);
    --color-text-heading-on-dark: var(--white-1000);
    --color-text-body: var(--brand-blue-950);
    --color-text-body-on-dark: var(--white-1000);
    --color-text-body-alt: var(--gray-500);
    --color-text-body-alt-on-dark: var(--white-800);
    --color-text-muted: var(--gray-400);
    --color-text-muted-on-dark: var(--white-600);
    --color-text-link: var(--brand-blue-400);
    --color-text-link-hover: var(--brand-blue-500);
    --color-text-link-on-dark: var(--brand-blue-200);
    --color-text-link-on-dark-hover: var(--brand-blue-100);
    --color-text-error: var(--red-500);
    --color-text-error-on-dark: var(--red-100);
    --color-text-success: var(--green-500);
    --color-text-success-on-dark: var(--green-50);

    /* Color - Background Content */
    --color-bg-content-default: var(--white-1000);
    --color-bg-content-default-active: var(--brand-blue-100);
    --color-bg-content-default-hover: var(--gray-200);
    --color-bg-content-brand: var(--brand-blue-100);
    --color-bg-content-brand-light: var(--brand-blue-050);
    --color-bg-content-brand-dark: var(--brand-blue-600);
    --color-bg-content-strong: var(--brand-blue-800);
    --color-bg-content-muted: var(--gray-100);
    --color-bg-content-success: var(--green-50);
    --color-bg-content-error: var(--red-050);

    /* Color - Background Button */
    --color-bg-button-primary: var(--accent-pink-500);
    --color-bg-button-primary-hover: var(--accent-pink-600);
    --color-bg-button-secondary: var(--brand-blue-400);
    --color-bg-button-secondary-hover: var(--brand-blue-500);

    /* Color - Border */
    --color-border-default: var(--gray-300);
    --color-border-default-active: var(--brand-blue-400);
    --color-border-brand: var(--brand-blue-200);
    --color-border-brand-light: var(--brand-blue-100);
    --color-border-brand-dark: var(--brand-blue-600);
    --color-border-muted: var(--gray-200);
    --color-border-strong: var(--brand-blue-800);
    --color-border-success: var(--green-500);
    --color-border-error: var(--red-500);
    --color-border-button-secondary: var(--accent-pink-500);
    --color-border-button-secondary-hover: var(--accent-pink-600);

    /* Color - Fill */
    --color-fill-stars: var(--support-yellow-400);
    --color-fill-success: var(--green-500);
    --color-fill-error: var(--red-500);
    --color-fill-brand: var(--brand-blue-400);
    --color-fill-light: var(--white-1000);
    --color-fill-deals: var(--support-teal-500);

    /* Color - Deals/Teal Text */
    --color-text-deals: var(--support-teal-700);

    /* Font Families */
    --font-family-heading: var(--family-first);
    --font-family-body: var(--family-second);

    /* Font Sizes */
    --font-size-heading-1-lg: 32px;
    --font-size-heading-1: 32px;
    --font-size-heading-2: 24px;
    --font-size-heading-3: 22px;
    --font-size-heading-4: 18px;
    --font-size-heading-5: 16px;
    --font-size-body-2xl: 48px;
    --font-size-body-xl: 28px;
    --font-size-body-lg: 22px;
    --font-size-body-md: 18px;
    --font-size-body: 16px;
    --font-size-body-sm: 14px;
    --font-size-body-xs: 12px;
    --font-size-body-2xs: 10px;
    --font-size-button-default: 16px;
    --font-size-button-sm: 16px;

    /* Line Heights */
    --font-lineheight-heading-1-lg: 36px;
    --font-lineheight-heading-1: 44px;
    --font-lineheight-heading-2: 40px;
    --font-lineheight-heading-3: 32px;
    --font-lineheight-heading-4: 24px;
    --font-lineheight-body-2xl: 48px;
    --font-lineheight-body-xl: 36px;
    --font-lineheight-body-lg: 32px;
    --font-lineheight-body-md: 32px;
    --font-lineheight-body: 28px;
    --font-lineheight-body-sm: 24px;
    --font-lineheight-body-xs: 18px;
    --font-lineheight-body-2xs: 12px;
    --font-lineheight-button-default: 20px;
    --font-lineheight-button-sm: 18px;

    /* Font Margins */
    --font-margin-heading-1-lg: 16px;
    --font-margin-heading-1: 16px;
    --font-margin-heading-2: 16px;
    --font-margin-heading-3: 16px;
    --font-margin-heading-4: 16px;
    --font-margin-body-2xl: 24px;
    --font-margin-body-xl: 24px;
    --font-margin-body-lg: 24px;
    --font-margin-body-md: 24px;
    --font-margin-body: 24px;
    --font-margin-body-sm: 24px;
    --font-margin-body-xsm: 16px;

    /* Font Weights */
    --font-weight-bold: var(--weight-bold);
    --font-weight-semibold: var(--weight-semibold);
    --font-weight-regular: var(--weight-normal);
    --font-weight-thin: var(--weight-thin);

    /* Border Radius */
    --border-radius-inner: 4px;
    --border-radius-outer: 10px;
    --border-radius-outer-lg: 16px;
    --border-radius-full: 384px;
    --border-radius-none: 0px;

    /* Border Width */
    --border-width-default: 2px;
    --border-width-emphasis: 4px;
    --border-width-subtle: 1px;

    /* Space - Padding Fluid */
    --space-padding-fluid-2xsm: 4px;
    --space-padding-fluid-xsm: 8px;
    --space-padding-fluid-sm: 12px;
    --space-padding-fluid-md: 16px;
    --space-padding-fluid-lg: 20px;
    --space-padding-fluid-xlg: 24px;
    --space-padding-fluid-2xlg: 36px;
    --space-padding-fluid-xsm-negative: -4px;
    --space-padding-fluid-sm-negative: -6px;
    --space-padding-fluid-md-negative: -8px;

    /* Space - Padding Fixed */
    --space-padding-fixed-2xsm: 4px;
    --space-padding-fixed-xsm: 10px;
    --space-padding-fixed-sm: 16px;
    --space-padding-fixed-md: 22px;
    --space-padding-fixed-lg: 28px;
    --space-padding-fixed-button-sm: 12px;
    --space-padding-fixed-button-md: 16px;
    --space-padding-fixed-button-lg: 20px;
    --space-padding-fixed-button-xlg: 24px;
    --space-padding-fixed-xlg: 36px;
    --space-padding-fixed-2xlg: 48px;
    --space-padding-fixed-xsm-negative: -4px;
    --space-padding-fixed-sm-negative: -6px;
    --space-padding-fixed-md-negative: -8px;

    /* Space - Gap Fluid */
    --space-gap-fluid-2xs: 4px;
    --space-gap-fluid-xs: 8px;
    --space-gap-fluid-sm: 12px;
    --space-gap-fluid-md: 16px;
    --space-gap-fluid-lg: 20px;
    --space-gap-fluid-xl: 24px;
    --space-gap-fluid-2xl: 28px;
    --space-gap-fluid-3xl: 32px;

    /* Space - Gap Fixed */
    --space-gap-fixed-2xs: 4px;
    --space-gap-fixed-xs: 8px;
    --space-gap-fixed-sm: 12px;
    --space-gap-fixed-md: 16px;
    --space-gap-fixed-lg: 20px;
    --space-gap-fixed-xl: 24px;
    --space-gap-fixed-2xl: 28px;
    --space-gap-fixed-3xl: 32px;

    /* Space - Margin */
    --space-margin-2xsm: 4px;
    --space-margin-xsm: 4px;
    --space-margin-sm: 8px;
    --space-margin-md: 16px;
    --space-margin-lg: 20px;
    --space-margin-xlg: 24px;
    --space-margin-2xlg: 32px;
    --space-margin-3xlg: 48px;
    --space-margin-xsm-negative: -4px;
    --space-margin-sm-negative: -6px;
    --space-margin-md-negative: -8px;

    /* Icon Sizes */
    --size-icon-2xsm: 8px;
    --size-icon-xsm: 12px;
    --size-icon-sm: 16px;
    --size-icon-md: 24px;
    --size-icon-lg: 32px;
    --size-icon-xlg: 64px;
    --size-icon-2xlg: 96px;
}

/* ===================================
   SEMANTIC TOKENS - TABLET (640px-1024px)
   =================================== */

@media (min-width: 640px) {
    :root {
        /* Font Sizes */
        --font-size-heading-1-lg: 44px;
        --font-size-heading-1: 44px;
        --font-size-heading-2: 36px;
        --font-size-heading-3: 24px;
        --font-size-heading-4: 18px;
        --font-size-heading-5: 16px;
        --font-size-body-2xl: 48px;
        --font-size-body-xl: 32px;
        --font-size-body-lg: 24px;
        --font-size-body-md: 18px;

        /* Line Heights */
        --font-lineheight-heading-1-lg: 48px;
        --font-lineheight-heading-1: 56px;
        --font-lineheight-heading-2: 40px;
        --font-lineheight-heading-3: 36px;
        --font-lineheight-heading-4: 24px;
        --font-lineheight-body-xl: 48px;
        --font-lineheight-body-lg: 36px;

        /* Space - Padding Fluid */
        --space-padding-fluid-2xsm: 8px;
        --space-padding-fluid-xsm: 12px;
        --space-padding-fluid-sm: 20px;
        --space-padding-fluid-md: 24px;
        --space-padding-fluid-lg: 28px;
        --space-padding-fluid-xlg: 32px;
        --space-padding-fluid-2xlg: 48px;

        /* Space - Gap Fluid */
        --space-gap-fluid-2xs: 6px;
        --space-gap-fluid-xs: 12px;
        --space-gap-fluid-sm: 16px;
        --space-gap-fluid-md: 22px;
        --space-gap-fluid-lg: 28px;
        --space-gap-fluid-xl: 32px;
        --space-gap-fluid-2xl: 36px;
        --space-gap-fluid-3xl: 40px;

        /* Space - Margin */
        --space-margin-xsm: 8px;
        --space-margin-sm: 12px;
        --space-margin-md: 20px;
        --space-margin-lg: 24px;
        --space-margin-xlg: 32px;
        --space-margin-2xlg: 48px;
        --space-margin-3xlg: 56px;
    }
}

/* ===================================
   SEMANTIC TOKENS - DESKTOP (1025px+)
   =================================== */

@media (min-width: 1025px) {
    :root {
        /* Font Sizes */
        --font-size-heading-1: 56px;

        /* Line Heights */
        --font-lineheight-heading-1: 64px;
        --font-lineheight-heading-2: 48px;
    }
}

/* ===================================
   UTILITY CLASSES - TEXT COLORS
   =================================== */

.color-text-heading {
    color: var(--color-text-heading);
}
.color-text-heading-on-dark {
    color: var(--color-text-heading-on-dark);
}
.color-text-body {
    color: var(--color-text-body);
}
.color-text-body-on-dark {
    color: var(--color-text-body-on-dark);
}
.color-text-body-alt {
    color: var(--color-text-body-alt);
}
.color-text-body-alt-on-dark {
    color: var(--color-text-body-alt-on-dark);
}
.color-text-muted {
    color: var(--color-text-muted);
}
.color-text-muted-on-dark {
    color: var(--color-text-muted-on-dark);
}
.color-text-link {
    color: var(--color-text-link);
}
.color-text-link-hover:hover {
    color: var(--color-text-link-hover);
}
.color-text-link-on-dark {
    color: var(--color-text-link-on-dark);
}
.color-text-link-on-dark-hover:hover {
    color: var(--color-text-link-on-dark-hover);
}
.color-text-error {
    color: var(--color-text-error);
}
.color-text-error-on-dark {
    color: var(--color-text-error-on-dark);
}
.color-text-success {
    color: var(--color-text-success);
}
.color-text-success-on-dark {
    color: var(--color-text-success-on-dark);
}
.color-text-deals {
    color: var(--color-text-deals);
}

/* ===================================
   UTILITY CLASSES - BACKGROUND COLORS
   =================================== */

.color-bg-content-default {
    background-color: var(--color-bg-content-default);
}
.color-bg-content-default-active {
    background-color: var(--color-bg-content-default-active);
}
.color-bg-content-default-hover:hover {
    background-color: var(--color-bg-content-default-hover);
}
.color-bg-content-brand {
    background-color: var(--color-bg-content-brand);
}
.color-bg-content-brand-light {
    background-color: var(--color-bg-content-brand-light);
}
.color-bg-content-brand-dark {
    background-color: var(--color-bg-content-brand-dark);
}
.color-bg-content-strong {
    background-color: var(--color-bg-content-strong);
}
.color-bg-content-muted {
    background-color: var(--color-bg-content-muted);
}
.color-bg-content-success {
    background-color: var(--color-bg-content-success);
}
.color-bg-content-error {
    background-color: var(--color-bg-content-error);
}

.color-bg-button-primary {
    background-color: var(--color-bg-button-primary);
}
.color-bg-button-primary-hover:hover {
    background-color: var(--color-bg-button-primary-hover);
}
.color-bg-button-secondary {
    background-color: var(--color-bg-button-secondary);
}
.color-bg-button-secondary-hover:hover {
    background-color: var(--color-bg-button-secondary-hover);
}

/* ===================================
   UTILITY CLASSES - BORDER COLORS
   =================================== */

.color-border-default {
    border-color: var(--color-border-default);
}
.color-border-default-active {
    border-color: var(--color-border-default-active);
}
.color-border-brand {
    border-color: var(--color-border-brand);
}
.color-border-brand-light {
    border-color: var(--color-border-brand-light);
}
.color-border-brand-dark {
    border-color: var(--color-border-brand-dark);
}
.color-border-muted {
    border-color: var(--color-border-muted);
}
.color-border-strong {
    border-color: var(--color-border-strong);
}
.color-border-success {
    border-color: var(--color-border-success);
}
.color-border-error {
    border-color: var(--color-border-error);
}
.color-border-button-secondary {
    border-color: var(--color-border-button-secondary);
}
.color-border-button-secondary-hover:hover {
    border-color: var(--color-border-button-secondary-hover);
}

/* ===================================
   UTILITY CLASSES - FILL COLORS
   =================================== */

.color-fill-stars {
    fill: var(--color-fill-stars);
}
.color-fill-success {
    fill: var(--color-fill-success);
}
.color-fill-error {
    fill: var(--color-fill-error);
}
.color-fill-brand {
    fill: var(--color-fill-brand);
}
.color-fill-light {
    fill: var(--color-fill-light);
}
.color-fill-deals {
    fill: var(--color-fill-deals);
}

/* ===================================
   UTILITY CLASSES - TYPOGRAPHY
   =================================== */

.font-family-heading {
    font-family: var(--font-family-heading);
}
.font-family-body {
    font-family: var(--font-family-body);
}

.font-size-heading-1-lg {
    font-size: var(--font-size-heading-1-lg);
}
.font-size-heading-1 {
    font-size: var(--font-size-heading-1);
}
.font-size-heading-2 {
    font-size: var(--font-size-heading-2);
}
.font-size-heading-3 {
    font-size: var(--font-size-heading-3);
}
.font-size-heading-4 {
    font-size: var(--font-size-heading-4);
}
.font-size-heading-5 {
    font-size: var(--font-size-heading-5);
}
.font-size-body-2xl {
    font-size: var(--font-size-body-2xl);
}
.font-size-body-xl {
    font-size: var(--font-size-body-xl);
}
.font-size-body-lg {
    font-size: var(--font-size-body-lg);
}
.font-size-body-md {
    font-size: var(--font-size-body-md);
}
.font-size-body {
    font-size: var(--font-size-body);
}
.font-size-body-sm {
    font-size: var(--font-size-body-sm);
}
.font-size-body-xs {
    font-size: var(--font-size-body-xs);
}
.font-size-body-2xs {
    font-size: var(--font-size-body-2xs);
}
.font-size-button-default {
    font-size: var(--font-size-button-default);
}
.font-size-button-sm {
    font-size: var(--font-size-button-sm);
}

.font-lineheight-heading-1-lg {
    line-height: var(--font-lineheight-heading-1-lg);
}
.font-lineheight-heading-1 {
    line-height: var(--font-lineheight-heading-1);
}
.font-lineheight-heading-2 {
    line-height: var(--font-lineheight-heading-2);
}
.font-lineheight-heading-3 {
    line-height: var(--font-lineheight-heading-3);
}
.font-lineheight-heading-4 {
    line-height: var(--font-lineheight-heading-4);
}
.font-lineheight-body-2xl {
    line-height: var(--font-lineheight-body-2xl);
}
.font-lineheight-body-xl {
    line-height: var(--font-lineheight-body-xl);
}
.font-lineheight-body-lg {
    line-height: var(--font-lineheight-body-lg);
}
.font-lineheight-body-md {
    line-height: var(--font-lineheight-body-md);
}
.font-lineheight-body {
    line-height: var(--font-lineheight-body);
}
.font-lineheight-body-sm {
    line-height: var(--font-lineheight-body-sm);
}
.font-lineheight-body-xs {
    line-height: var(--font-lineheight-body-xs);
}
.font-lineheight-body-2xs {
    line-height: var(--font-lineheight-body-2xs);
}
.font-lineheight-button-default {
    line-height: var(--font-lineheight-button-default);
}
.font-lineheight-button-sm {
    line-height: var(--font-lineheight-button-sm);
}

.font-weight-bold {
    font-weight: var(--font-weight-bold);
}
.font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}
.font-weight-regular {
    font-weight: var(--font-weight-regular);
}
.font-weight-thin {
    font-weight: var(--font-weight-thin);
}

/* ===================================
   UTILITY CLASSES - BORDER RADIUS
   =================================== */

.border-radius-inner {
    border-radius: var(--border-radius-inner);
}
.border-radius-outer {
    border-radius: var(--border-radius-outer);
}
.border-radius-outer-lg {
    border-radius: var(--border-radius-outer-lg);
}
.border-radius-full {
    border-radius: var(--border-radius-full);
}
.border-radius-none {
    border-radius: var(--border-radius-none);
}

/* ===================================
   UTILITY CLASSES - BORDER WIDTH
   =================================== */

.border-width-default {
    border-width: var(--border-width-default);
}
.border-width-emphasis {
    border-width: var(--border-width-emphasis);
}
.border-width-subtle {
    border-width: var(--border-width-subtle);
}

/* ===================================
   UTILITY CLASSES - PADDING FLUID
   =================================== */

/* All sides */
.space-padding-fluid-2xsm {
    padding: var(--space-padding-fluid-2xsm);
}
.space-padding-fluid-xsm {
    padding: var(--space-padding-fluid-xsm);
}
.space-padding-fluid-sm {
    padding: var(--space-padding-fluid-sm);
}
.space-padding-fluid-md {
    padding: var(--space-padding-fluid-md);
}
.space-padding-fluid-lg {
    padding: var(--space-padding-fluid-lg);
}
.space-padding-fluid-xlg {
    padding: var(--space-padding-fluid-xlg);
}
.space-padding-fluid-2xlg {
    padding: var(--space-padding-fluid-2xlg);
}

/* X-axis (left and right) */
.space-padding-fluid-2xsm-x {
    padding-left: var(--space-padding-fluid-2xsm);
    padding-right: var(--space-padding-fluid-2xsm);
}
.space-padding-fluid-xsm-x {
    padding-left: var(--space-padding-fluid-xsm);
    padding-right: var(--space-padding-fluid-xsm);
}
.space-padding-fluid-sm-x {
    padding-left: var(--space-padding-fluid-sm);
    padding-right: var(--space-padding-fluid-sm);
}
.space-padding-fluid-md-x {
    padding-left: var(--space-padding-fluid-md);
    padding-right: var(--space-padding-fluid-md);
}
.space-padding-fluid-lg-x {
    padding-left: var(--space-padding-fluid-lg);
    padding-right: var(--space-padding-fluid-lg);
}
.space-padding-fluid-xlg-x {
    padding-left: var(--space-padding-fluid-xlg);
    padding-right: var(--space-padding-fluid-xlg);
}
.space-padding-fluid-2xlg-x {
    padding-left: var(--space-padding-fluid-2xlg);
    padding-right: var(--space-padding-fluid-2xlg);
}

/* Y-axis (top and bottom) */
.space-padding-fluid-2xsm-y {
    padding-top: var(--space-padding-fluid-2xsm);
    padding-bottom: var(--space-padding-fluid-2xsm);
}
.space-padding-fluid-xsm-y {
    padding-top: var(--space-padding-fluid-xsm);
    padding-bottom: var(--space-padding-fluid-xsm);
}
.space-padding-fluid-sm-y {
    padding-top: var(--space-padding-fluid-sm);
    padding-bottom: var(--space-padding-fluid-sm);
}
.space-padding-fluid-md-y {
    padding-top: var(--space-padding-fluid-md);
    padding-bottom: var(--space-padding-fluid-md);
}
.space-padding-fluid-lg-y {
    padding-top: var(--space-padding-fluid-lg);
    padding-bottom: var(--space-padding-fluid-lg);
}
.space-padding-fluid-xlg-y {
    padding-top: var(--space-padding-fluid-xlg);
    padding-bottom: var(--space-padding-fluid-xlg);
}
.space-padding-fluid-2xlg-y {
    padding-top: var(--space-padding-fluid-2xlg);
    padding-bottom: var(--space-padding-fluid-2xlg);
}

/* Top only */
.space-padding-fluid-2xsm-t {
    padding-top: var(--space-padding-fluid-2xsm);
}
.space-padding-fluid-xsm-t {
    padding-top: var(--space-padding-fluid-xsm);
}
.space-padding-fluid-sm-t {
    padding-top: var(--space-padding-fluid-sm);
}
.space-padding-fluid-md-t {
    padding-top: var(--space-padding-fluid-md);
}
.space-padding-fluid-lg-t {
    padding-top: var(--space-padding-fluid-lg);
}
.space-padding-fluid-xlg-t {
    padding-top: var(--space-padding-fluid-xlg);
}
.space-padding-fluid-2xlg-t {
    padding-top: var(--space-padding-fluid-2xlg);
}

/* Bottom only */
.space-padding-fluid-2xsm-b {
    padding-bottom: var(--space-padding-fluid-2xsm);
}
.space-padding-fluid-xsm-b {
    padding-bottom: var(--space-padding-fluid-xsm);
}
.space-padding-fluid-sm-b {
    padding-bottom: var(--space-padding-fluid-sm);
}
.space-padding-fluid-md-b {
    padding-bottom: var(--space-padding-fluid-md);
}
.space-padding-fluid-lg-b {
    padding-bottom: var(--space-padding-fluid-lg);
}
.space-padding-fluid-xlg-b {
    padding-bottom: var(--space-padding-fluid-xlg);
}
.space-padding-fluid-2xlg-b {
    padding-bottom: var(--space-padding-fluid-2xlg);
}

/* Left only */
.space-padding-fluid-2xsm-l {
    padding-left: var(--space-padding-fluid-2xsm);
}
.space-padding-fluid-xsm-l {
    padding-left: var(--space-padding-fluid-xsm);
}
.space-padding-fluid-sm-l {
    padding-left: var(--space-padding-fluid-sm);
}
.space-padding-fluid-md-l {
    padding-left: var(--space-padding-fluid-md);
}
.space-padding-fluid-lg-l {
    padding-left: var(--space-padding-fluid-lg);
}
.space-padding-fluid-xlg-l {
    padding-left: var(--space-padding-fluid-xlg);
}
.space-padding-fluid-2xlg-l {
    padding-left: var(--space-padding-fluid-2xlg);
}

/* Right only */
.space-padding-fluid-2xsm-r {
    padding-right: var(--space-padding-fluid-2xsm);
}
.space-padding-fluid-xsm-r {
    padding-right: var(--space-padding-fluid-xsm);
}
.space-padding-fluid-sm-r {
    padding-right: var(--space-padding-fluid-sm);
}
.space-padding-fluid-md-r {
    padding-right: var(--space-padding-fluid-md);
}
.space-padding-fluid-lg-r {
    padding-right: var(--space-padding-fluid-lg);
}
.space-padding-fluid-xlg-r {
    padding-right: var(--space-padding-fluid-xlg);
}
.space-padding-fluid-2xlg-r {
    padding-right: var(--space-padding-fluid-2xlg);
}

/* ===================================
   UTILITY CLASSES - PADDING FIXED
   =================================== */

/* All sides */
.space-padding-fixed-2xsm {
    padding: var(--space-padding-fixed-2xsm);
}
.space-padding-fixed-xsm {
    padding: var(--space-padding-fixed-xsm);
}
.space-padding-fixed-sm {
    padding: var(--space-padding-fixed-sm);
}
.space-padding-fixed-md {
    padding: var(--space-padding-fixed-md);
}
.space-padding-fixed-lg {
    padding: var(--space-padding-fixed-lg);
}
.space-padding-fixed-xlg {
    padding: var(--space-padding-fixed-xlg);
}
.space-padding-fixed-2xlg {
    padding: var(--space-padding-fixed-2xlg);
}
.space-padding-fixed-button-sm {
    padding: var(--space-padding-fixed-button-sm);
}
.space-padding-fixed-button-md {
    padding: var(--space-padding-fixed-button-md);
}
.space-padding-fixed-button-lg {
    padding: var(--space-padding-fixed-button-lg);
}
.space-padding-fixed-button-xlg {
    padding: var(--space-padding-fixed-button-xlg);
}

/* X-axis (left and right) */
.space-padding-fixed-2xsm-x {
    padding-left: var(--space-padding-fixed-2xsm);
    padding-right: var(--space-padding-fixed-2xsm);
}
.space-padding-fixed-xsm-x {
    padding-left: var(--space-padding-fixed-xsm);
    padding-right: var(--space-padding-fixed-xsm);
}
.space-padding-fixed-sm-x {
    padding-left: var(--space-padding-fixed-sm);
    padding-right: var(--space-padding-fixed-sm);
}
.space-padding-fixed-md-x {
    padding-left: var(--space-padding-fixed-md);
    padding-right: var(--space-padding-fixed-md);
}
.space-padding-fixed-lg-x {
    padding-left: var(--space-padding-fixed-lg);
    padding-right: var(--space-padding-fixed-lg);
}
.space-padding-fixed-xlg-x {
    padding-left: var(--space-padding-fixed-xlg);
    padding-right: var(--space-padding-fixed-xlg);
}
.space-padding-fixed-2xlg-x {
    padding-left: var(--space-padding-fixed-2xlg);
    padding-right: var(--space-padding-fixed-2xlg);
}
.space-padding-fixed-button-sm-x {
    padding-left: var(--space-padding-fixed-button-sm);
    padding-right: var(--space-padding-fixed-button-sm);
}
.space-padding-fixed-button-md-x {
    padding-left: var(--space-padding-fixed-button-md);
    padding-right: var(--space-padding-fixed-button-md);
}
.space-padding-fixed-button-lg-x {
    padding-left: var(--space-padding-fixed-button-lg);
    padding-right: var(--space-padding-fixed-button-lg);
}
.space-padding-fixed-button-xlg-x {
    padding-left: var(--space-padding-fixed-button-xlg);
    padding-right: var(--space-padding-fixed-button-xlg);
}

/* Y-axis (top and bottom) */
.space-padding-fixed-2xsm-y {
    padding-top: var(--space-padding-fixed-2xsm);
    padding-bottom: var(--space-padding-fixed-2xsm);
}
.space-padding-fixed-xsm-y {
    padding-top: var(--space-padding-fixed-xsm);
    padding-bottom: var(--space-padding-fixed-xsm);
}
.space-padding-fixed-sm-y {
    padding-top: var(--space-padding-fixed-sm);
    padding-bottom: var(--space-padding-fixed-sm);
}
.space-padding-fixed-md-y {
    padding-top: var(--space-padding-fixed-md);
    padding-bottom: var(--space-padding-fixed-md);
}
.space-padding-fixed-lg-y {
    padding-top: var(--space-padding-fixed-lg);
    padding-bottom: var(--space-padding-fixed-lg);
}
.space-padding-fixed-xlg-y {
    padding-top: var(--space-padding-fixed-xlg);
    padding-bottom: var(--space-padding-fixed-xlg);
}
.space-padding-fixed-2xlg-y {
    padding-top: var(--space-padding-fixed-2xlg);
    padding-bottom: var(--space-padding-fixed-2xlg);
}
.space-padding-fixed-button-sm-y {
    padding-top: var(--space-padding-fixed-button-sm);
    padding-bottom: var(--space-padding-fixed-button-sm);
}
.space-padding-fixed-button-md-y {
    padding-top: var(--space-padding-fixed-button-md);
    padding-bottom: var(--space-padding-fixed-button-md);
}
.space-padding-fixed-button-lg-y {
    padding-top: var(--space-padding-fixed-button-lg);
    padding-bottom: var(--space-padding-fixed-button-lg);
}
.space-padding-fixed-button-xlg-y {
    padding-top: var(--space-padding-fixed-button-xlg);
    padding-bottom: var(--space-padding-fixed-button-xlg);
}

/* Top only */
.space-padding-fixed-2xsm-t {
    padding-top: var(--space-padding-fixed-2xsm);
}
.space-padding-fixed-xsm-t {
    padding-top: var(--space-padding-fixed-xsm);
}
.space-padding-fixed-sm-t {
    padding-top: var(--space-padding-fixed-sm);
}
.space-padding-fixed-md-t {
    padding-top: var(--space-padding-fixed-md);
}
.space-padding-fixed-lg-t {
    padding-top: var(--space-padding-fixed-lg);
}
.space-padding-fixed-xlg-t {
    padding-top: var(--space-padding-fixed-xlg);
}
.space-padding-fixed-2xlg-t {
    padding-top: var(--space-padding-fixed-2xlg);
}
.space-padding-fixed-button-sm-t {
    padding-top: var(--space-padding-fixed-button-sm);
}
.space-padding-fixed-button-md-t {
    padding-top: var(--space-padding-fixed-button-md);
}
.space-padding-fixed-button-lg-t {
    padding-top: var(--space-padding-fixed-button-lg);
}
.space-padding-fixed-button-xlg-t {
    padding-top: var(--space-padding-fixed-button-xlg);
}

/* Bottom only */
.space-padding-fixed-2xsm-b {
    padding-bottom: var(--space-padding-fixed-2xsm);
}
.space-padding-fixed-xsm-b {
    padding-bottom: var(--space-padding-fixed-xsm);
}
.space-padding-fixed-sm-b {
    padding-bottom: var(--space-padding-fixed-sm);
}
.space-padding-fixed-md-b {
    padding-bottom: var(--space-padding-fixed-md);
}
.space-padding-fixed-lg-b {
    padding-bottom: var(--space-padding-fixed-lg);
}
.space-padding-fixed-xlg-b {
    padding-bottom: var(--space-padding-fixed-xlg);
}
.space-padding-fixed-2xlg-b {
    padding-bottom: var(--space-padding-fixed-2xlg);
}
.space-padding-fixed-button-sm-b {
    padding-bottom: var(--space-padding-fixed-button-sm);
}
.space-padding-fixed-button-md-b {
    padding-bottom: var(--space-padding-fixed-button-md);
}
.space-padding-fixed-button-lg-b {
    padding-bottom: var(--space-padding-fixed-button-lg);
}
.space-padding-fixed-button-xlg-b {
    padding-bottom: var(--space-padding-fixed-button-xlg);
}

/* Left only */
.space-padding-fixed-2xsm-l {
    padding-left: var(--space-padding-fixed-2xsm);
}
.space-padding-fixed-xsm-l {
    padding-left: var(--space-padding-fixed-xsm);
}
.space-padding-fixed-sm-l {
    padding-left: var(--space-padding-fixed-sm);
}
.space-padding-fixed-md-l {
    padding-left: var(--space-padding-fixed-md);
}
.space-padding-fixed-lg-l {
    padding-left: var(--space-padding-fixed-lg);
}
.space-padding-fixed-xlg-l {
    padding-left: var(--space-padding-fixed-xlg);
}
.space-padding-fixed-2xlg-l {
    padding-left: var(--space-padding-fixed-2xlg);
}
.space-padding-fixed-button-sm-l {
    padding-left: var(--space-padding-fixed-button-sm);
}
.space-padding-fixed-button-md-l {
    padding-left: var(--space-padding-fixed-button-md);
}
.space-padding-fixed-button-lg-l {
    padding-left: var(--space-padding-fixed-button-lg);
}
.space-padding-fixed-button-xlg-l {
    padding-left: var(--space-padding-fixed-button-xlg);
}

/* Right only */
.space-padding-fixed-2xsm-r {
    padding-right: var(--space-padding-fixed-2xsm);
}
.space-padding-fixed-xsm-r {
    padding-right: var(--space-padding-fixed-xsm);
}
.space-padding-fixed-sm-r {
    padding-right: var(--space-padding-fixed-sm);
}
.space-padding-fixed-md-r {
    padding-right: var(--space-padding-fixed-md);
}
.space-padding-fixed-lg-r {
    padding-right: var(--space-padding-fixed-lg);
}
.space-padding-fixed-xlg-r {
    padding-right: var(--space-padding-fixed-xlg);
}
.space-padding-fixed-2xlg-r {
    padding-right: var(--space-padding-fixed-2xlg);
}
.space-padding-fixed-button-sm-r {
    padding-right: var(--space-padding-fixed-button-sm);
}
.space-padding-fixed-button-md-r {
    padding-right: var(--space-padding-fixed-button-md);
}
.space-padding-fixed-button-lg-r {
    padding-right: var(--space-padding-fixed-button-lg);
}
.space-padding-fixed-button-xlg-r {
    padding-right: var(--space-padding-fixed-button-xlg);
}

/* ===================================
   UTILITY CLASSES - GAP FLUID
   =================================== */

/* Both axes */
.space-gap-fluid-2xs {
    gap: var(--space-gap-fluid-2xs);
}
.space-gap-fluid-xs {
    gap: var(--space-gap-fluid-xs);
}
.space-gap-fluid-sm {
    gap: var(--space-gap-fluid-sm);
}
.space-gap-fluid-md {
    gap: var(--space-gap-fluid-md);
}
.space-gap-fluid-lg {
    gap: var(--space-gap-fluid-lg);
}
.space-gap-fluid-xl {
    gap: var(--space-gap-fluid-xl);
}
.space-gap-fluid-2xl {
    gap: var(--space-gap-fluid-2xl);
}
.space-gap-fluid-3xl {
    gap: var(--space-gap-fluid-3xl);
}

/* X-axis (column-gap) */
.space-gap-fluid-2xs-x {
    column-gap: var(--space-gap-fluid-2xs);
}
.space-gap-fluid-xs-x {
    column-gap: var(--space-gap-fluid-xs);
}
.space-gap-fluid-sm-x {
    column-gap: var(--space-gap-fluid-sm);
}
.space-gap-fluid-md-x {
    column-gap: var(--space-gap-fluid-md);
}
.space-gap-fluid-lg-x {
    column-gap: var(--space-gap-fluid-lg);
}
.space-gap-fluid-xl-x {
    column-gap: var(--space-gap-fluid-xl);
}
.space-gap-fluid-2xl-x {
    column-gap: var(--space-gap-fluid-2xl);
}
.space-gap-fluid-3xl-x {
    column-gap: var(--space-gap-fluid-3xl);
}

/* Y-axis (row-gap) */
.space-gap-fluid-2xs-y {
    row-gap: var(--space-gap-fluid-2xs);
}
.space-gap-fluid-xs-y {
    row-gap: var(--space-gap-fluid-xs);
}
.space-gap-fluid-sm-y {
    row-gap: var(--space-gap-fluid-sm);
}
.space-gap-fluid-md-y {
    row-gap: var(--space-gap-fluid-md);
}
.space-gap-fluid-lg-y {
    row-gap: var(--space-gap-fluid-lg);
}
.space-gap-fluid-xl-y {
    row-gap: var(--space-gap-fluid-xl);
}
.space-gap-fluid-2xl-y {
    row-gap: var(--space-gap-fluid-2xl);
}
.space-gap-fluid-3xl-y {
    row-gap: var(--space-gap-fluid-3xl);
}

/* ===================================
   UTILITY CLASSES - GAP FIXED
   =================================== */

/* Both axes */
.space-gap-fixed-2xs {
    gap: var(--space-gap-fixed-2xs);
}
.space-gap-fixed-xs {
    gap: var(--space-gap-fixed-xs);
}
.space-gap-fixed-sm {
    gap: var(--space-gap-fixed-sm);
}
.space-gap-fixed-md {
    gap: var(--space-gap-fixed-md);
}
.space-gap-fixed-lg {
    gap: var(--space-gap-fixed-lg);
}
.space-gap-fixed-xl {
    gap: var(--space-gap-fixed-xl);
}
.space-gap-fixed-2xl {
    gap: var(--space-gap-fixed-2xl);
}
.space-gap-fixed-3xl {
    gap: var(--space-gap-fixed-3xl);
}

/* X-axis (column-gap) */
.space-gap-fixed-2xs-x {
    column-gap: var(--space-gap-fixed-2xs);
}
.space-gap-fixed-xs-x {
    column-gap: var(--space-gap-fixed-xs);
}
.space-gap-fixed-sm-x {
    column-gap: var(--space-gap-fixed-sm);
}
.space-gap-fixed-md-x {
    column-gap: var(--space-gap-fixed-md);
}
.space-gap-fixed-lg-x {
    column-gap: var(--space-gap-fixed-lg);
}
.space-gap-fixed-xl-x {
    column-gap: var(--space-gap-fixed-xl);
}
.space-gap-fixed-2xl-x {
    column-gap: var(--space-gap-fixed-2xl);
}
.space-gap-fixed-3xl-x {
    column-gap: var(--space-gap-fixed-3xl);
}

/* Y-axis (row-gap) */
.space-gap-fixed-2xs-y {
    row-gap: var(--space-gap-fixed-2xs);
}
.space-gap-fixed-xs-y {
    row-gap: var(--space-gap-fixed-xs);
}
.space-gap-fixed-sm-y {
    row-gap: var(--space-gap-fixed-sm);
}
.space-gap-fixed-md-y {
    row-gap: var(--space-gap-fixed-md);
}
.space-gap-fixed-lg-y {
    row-gap: var(--space-gap-fixed-lg);
}
.space-gap-fixed-xl-y {
    row-gap: var(--space-gap-fixed-xl);
}
.space-gap-fixed-2xl-y {
    row-gap: var(--space-gap-fixed-2xl);
}
.space-gap-fixed-3xl-y {
    row-gap: var(--space-gap-fixed-3xl);
}

/* ===================================
   UTILITY CLASSES - MARGIN
   =================================== */

/* All sides */
.space-margin-2xsm {
    margin: var(--space-margin-2xsm);
}
.space-margin-xsm {
    margin: var(--space-margin-xsm);
}
.space-margin-sm {
    margin: var(--space-margin-sm);
}
.space-margin-md {
    margin: var(--space-margin-md);
}
.space-margin-lg {
    margin: var(--space-margin-lg);
}
.space-margin-xlg {
    margin: var(--space-margin-xlg);
}
.space-margin-2xlg {
    margin: var(--space-margin-2xlg);
}
.space-margin-3xlg {
    margin: var(--space-margin-3xlg);
}

/* X-axis (left and right) */
.space-margin-2xsm-x {
    margin-left: var(--space-margin-2xsm);
    margin-right: var(--space-margin-2xsm);
}
.space-margin-xsm-x {
    margin-left: var(--space-margin-xsm);
    margin-right: var(--space-margin-xsm);
}
.space-margin-sm-x {
    margin-left: var(--space-margin-sm);
    margin-right: var(--space-margin-sm);
}
.space-margin-md-x {
    margin-left: var(--space-margin-md);
    margin-right: var(--space-margin-md);
}
.space-margin-lg-x {
    margin-left: var(--space-margin-lg);
    margin-right: var(--space-margin-lg);
}
.space-margin-xlg-x {
    margin-left: var(--space-margin-xlg);
    margin-right: var(--space-margin-xlg);
}
.space-margin-2xlg-x {
    margin-left: var(--space-margin-2xlg);
    margin-right: var(--space-margin-2xlg);
}
.space-margin-3xlg-x {
    margin-left: var(--space-margin-3xlg);
    margin-right: var(--space-margin-3xlg);
}

/* Y-axis (top and bottom) */
.space-margin-2xsm-y {
    margin-top: var(--space-margin-2xsm);
    margin-bottom: var(--space-margin-2xsm);
}
.space-margin-xsm-y {
    margin-top: var(--space-margin-xsm);
    margin-bottom: var(--space-margin-xsm);
}
.space-margin-sm-y {
    margin-top: var(--space-margin-sm);
    margin-bottom: var(--space-margin-sm);
}
.space-margin-md-y {
    margin-top: var(--space-margin-md);
    margin-bottom: var(--space-margin-md);
}
.space-margin-lg-y {
    margin-top: var(--space-margin-lg);
    margin-bottom: var(--space-margin-lg);
}
.space-margin-xlg-y {
    margin-top: var(--space-margin-xlg);
    margin-bottom: var(--space-margin-xlg);
}
.space-margin-2xlg-y {
    margin-top: var(--space-margin-2xlg);
    margin-bottom: var(--space-margin-2xlg);
}
.space-margin-3xlg-y {
    margin-top: var(--space-margin-3xlg);
    margin-bottom: var(--space-margin-3xlg);
}

/* Top only */
.space-margin-2xsm-t {
    margin-top: var(--space-margin-2xsm);
}
.space-margin-xsm-t {
    margin-top: var(--space-margin-xsm);
}
.space-margin-sm-t {
    margin-top: var(--space-margin-sm);
}
.space-margin-md-t {
    margin-top: var(--space-margin-md);
}
.space-margin-lg-t {
    margin-top: var(--space-margin-lg);
}
.space-margin-xlg-t {
    margin-top: var(--space-margin-xlg);
}
.space-margin-2xlg-t {
    margin-top: var(--space-margin-2xlg);
}
.space-margin-3xlg-t {
    margin-top: var(--space-margin-3xlg);
}

/* Bottom only */
.space-margin-2xsm-b {
    margin-bottom: var(--space-margin-2xsm);
}
.space-margin-xsm-b {
    margin-bottom: var(--space-margin-xsm);
}
.space-margin-sm-b {
    margin-bottom: var(--space-margin-sm);
}
.space-margin-md-b {
    margin-bottom: var(--space-margin-md);
}
.space-margin-lg-b {
    margin-bottom: var(--space-margin-lg);
}
.space-margin-xlg-b {
    margin-bottom: var(--space-margin-xlg);
}
.space-margin-2xlg-b {
    margin-bottom: var(--space-margin-2xlg);
}
.space-margin-3xlg-b {
    margin-bottom: var(--space-margin-3xlg);
}

/* Left only */
.space-margin-2xsm-l {
    margin-left: var(--space-margin-2xsm);
}
.space-margin-xsm-l {
    margin-left: var(--space-margin-xsm);
}
.space-margin-sm-l {
    margin-left: var(--space-margin-sm);
}
.space-margin-md-l {
    margin-left: var(--space-margin-md);
}
.space-margin-lg-l {
    margin-left: var(--space-margin-lg);
}
.space-margin-xlg-l {
    margin-left: var(--space-margin-xlg);
}
.space-margin-2xlg-l {
    margin-left: var(--space-margin-2xlg);
}
.space-margin-3xlg-l {
    margin-left: var(--space-margin-3xlg);
}

/* Right only */
.space-margin-2xsm-r {
    margin-right: var(--space-margin-2xsm);
}
.space-margin-xsm-r {
    margin-right: var(--space-margin-xsm);
}
.space-margin-sm-r {
    margin-right: var(--space-margin-sm);
}
.space-margin-md-r {
    margin-right: var(--space-margin-md);
}
.space-margin-lg-r {
    margin-right: var(--space-margin-lg);
}
.space-margin-xlg-r {
    margin-right: var(--space-margin-xlg);
}
.space-margin-2xlg-r {
    margin-right: var(--space-margin-2xlg);
}
.space-margin-3xlg-r {
    margin-right: var(--space-margin-3xlg);
}

/* ===================================
   UTILITY CLASSES - ICON SIZES
   =================================== */

.size-icon-2xsm {
    width: var(--size-icon-2xsm);
    height: var(--size-icon-2xsm);
}
.size-icon-xsm {
    width: var(--size-icon-xsm);
    height: var(--size-icon-xsm);
}
.size-icon-sm {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
}
.size-icon-md {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
}
.size-icon-lg {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
}
.size-icon-xlg {
    width: var(--size-icon-xlg);
    height: var(--size-icon-xlg);
}
.size-icon-2xlg {
    width: var(--size-icon-2xlg);
    height: var(--size-icon-2xlg);
}

/* ===================================
   UTILITY CLASSES - TEXT STYLES
   =================================== */

/* Heading Styles */
.heading-h1-large {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-1-lg);
    line-height: var(--font-lineheight-heading-1-lg);
    letter-spacing: 0;
}

.heading-h1-medium {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-1);
    line-height: var(--font-lineheight-heading-1);
    letter-spacing: 0;
}

.heading-h2 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-2);
    line-height: var(--font-lineheight-heading-2);
    letter-spacing: 0;
}

.heading-h3 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-3);
    line-height: var(--font-lineheight-heading-3);
    letter-spacing: 0;
}

.heading-h4 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-4);
    line-height: var(--font-lineheight-heading-4);
    letter-spacing: 0;
}

/* Text Body Styles - 2XL */
.text-body-2xl {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-2xl);
    line-height: var(--font-lineheight-body-2xl);
    letter-spacing: 0;
}

.text-body-2xl-bold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body-2xl);
    line-height: var(--font-lineheight-body-2xl);
    letter-spacing: 0;
}

/* Text Body Styles - XL */
.text-body-xl {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-xl);
    line-height: var(--font-lineheight-body-xl);
    letter-spacing: 0;
}

.text-body-xl-bold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body-xl);
    line-height: var(--font-lineheight-body-xl);
    letter-spacing: 0;
}

/* Text Body Styles - Large */
.text-body-lg {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-lg);
    line-height: var(--font-lineheight-body-lg);
    letter-spacing: 0;
}

.text-body-lg-bold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body-lg);
    line-height: var(--font-lineheight-body-lg);
    letter-spacing: 0;
}

/* Text Body Styles - Medium */
.text-body-md {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-md);
    line-height: var(--font-lineheight-body-md);
    letter-spacing: 0;
}

.text-body-md-bold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body-md);
    line-height: var(--font-lineheight-body-md);
    letter-spacing: 0;
}

/* Text Body Styles - Default */
.text-body-default {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--font-lineheight-body);
    letter-spacing: 0;
}

.text-body-default-bold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    line-height: var(--font-lineheight-body);
    letter-spacing: 0;
}

/* Text Body Styles - Small */
.text-body-sm {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-sm);
    line-height: var(--font-lineheight-body-sm);
    letter-spacing: 0;
}

.text-body-sm-italic {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-sm);
    line-height: var(--font-lineheight-body-sm);
    letter-spacing: 0;
    font-style: italic;
}

.text-body-sm-bold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body-sm);
    line-height: var(--font-lineheight-body-sm);
    letter-spacing: 0;
}

/* Text Body Styles - Extra Small */
.text-body-xs {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-xs);
    line-height: var(--font-lineheight-body-xs);
    letter-spacing: 0;
}

.text-body-xs-bold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body-xs);
    line-height: var(--font-lineheight-body-xs);
    letter-spacing: 0;
}

/* Text Body Styles - 2XS */
.text-body-2xs {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-2xs);
    line-height: var(--font-lineheight-body-2xs);
    letter-spacing: 0;
}

.text-body-2xs-bold {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body-2xs);
    line-height: var(--font-lineheight-body-2xs);
    letter-spacing: 0;
}

/* Button Styles */
.button-button-default {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-button-default);
    line-height: var(--font-lineheight-button-default);
    letter-spacing: 0;
}

.button-button-sm {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-button-sm);
    line-height: var(--font-lineheight-button-sm);
    letter-spacing: 0;
}

/* ===================================
   UTILITY CLASSES - LAYOUT
   =================================== */

.flex {
    display: flex;
}
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-auto {
    flex: 1 1 auto;
}
.flex-none {
    flex: none;
}
.items-start {
    align-items: flex-start;
}
.items-center {
    align-items: center;
}
.items-end {
    align-items: flex-end;
}
.justify-start {
    justify-content: flex-start;
}
.justify-center {
    justify-content: justify-center;
}
.justify-between {
    justify-content: space-between;
}
.justify-end {
    justify-content: flex-end;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}
.max-w-full {
    max-width: 100%;
}
.shrink-0 {
    flex-shrink: 0;
}

/* Box Model */
.border-solid {
    border-style: solid;
}
.border {
    border-width: var(--border-width-default);
}
.border-t {
    border-top-width: var(--border-width-default);
}
.border-b {
    border-bottom-width: var(--border-width-default);
}
.border-l {
    border-left-width: var(--border-width-default);
}
.border-r {
    border-right-width: var(--border-width-default);
}
.overflow-hidden {
    overflow: hidden;
}
.box-border {
    box-sizing: border-box;
}

/* Shadow */
.shadow-card {
    box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04),
        0px 2px 4px 0px rgba(0, 0, 0, 0.16);
}

/* Display */
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.hidden {
    display: none;
}

/* Text */
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===================================
   RESPONSIVE UTILITIES
   =================================== */

@media (min-width: 640px) {
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:hidden {
        display: none;
    }
    .md\:block {
        display: block;
    }
}

@media (min-width: 1025px) {
    .lg\:flex-row {
        flex-direction: row;
    }
    .lg\:hidden {
        display: none;
    }
    .lg\:block {
        display: block;
    }
}

/* ===================================
   UTILITY CLASSES - SPACING
   =================================== */

/* Padding - All sides */
.p-0 {
    padding: 0;
}
.p-1 {
    padding: var(--size-1);
}
.p-2 {
    padding: var(--size-2);
}
.p-3 {
    padding: var(--size-3);
}
.p-4 {
    padding: var(--size-4);
}
.p-5 {
    padding: var(--size-5);
}
.p-6 {
    padding: var(--size-6);
}

/* Padding - Individual sides */
.pt-0 {
    padding-top: 0;
}
.pt-2 {
    padding-top: var(--size-2);
}
.pt-4 {
    padding-top: var(--size-4);
}
.pb-0 {
    padding-bottom: 0;
}
.pb-2 {
    padding-bottom: var(--size-2);
}
.pb-4 {
    padding-bottom: var(--size-4);
}
.pl-0 {
    padding-left: 0;
}
.pr-0 {
    padding-right: 0;
}

/* Padding - X and Y axis */
.px-0 {
    padding-left: 0;
    padding-right: 0;
}
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.px-2 {
    padding-left: var(--size-2);
    padding-right: var(--size-2);
}
.py-2 {
    padding-top: var(--size-2);
    padding-bottom: var(--size-2);
}

/* Margin */
.m-0 {
    margin: 0;
}
.m-auto {
    margin: 0 auto;
}
.mt-0 {
    margin-top: 0;
}
.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: var(--size-1);
}
.mb-2 {
    margin-bottom: var(--size-2);
}
.mb-3 {
    margin-bottom: var(--size-3);
}
.mb-4 {
    margin-bottom: var(--size-4);
}
.mb-6 {
    margin-bottom: var(--size-6);
}

/* Gap */
.gap-1 {
    gap: var(--size-1);
}
.gap-2 {
    gap: var(--size-2);
}
.gap-3 {
    gap: var(--size-3);
}
.gap-4 {
    gap: var(--size-4);
}
.gap-5 {
    gap: var(--size-5);
}

/* ===================================
   UTILITY CLASSES - SIZING
   =================================== */

.w-auto {
    width: auto;
}
.w-16 {
    width: var(--size-16);
}
.w-20 {
    width: var(--size-20);
}
.w-32 {
    width: var(--size-32);
}
.w-40 {
    width: var(--size-40);
}
.w-48 {
    width: var(--size-48);
}
.w-56 {
    width: var(--size-56);
}
.w-64 {
    width: var(--size-64);
}

.h-auto {
    height: auto;
}
.h-12 {
    height: var(--size-12);
}
.h-14 {
    height: var(--size-14);
}
.h-16 {
    height: var(--size-16);
}

.min-w-0 {
    min-width: 0;
}
.min-w-full {
    min-width: 100%;
}
.max-w-xs {
    max-width: 390px;
}
.max-w-md {
    max-width: 640px;
}
.max-w-lg {
    max-width: 868px;
}
.max-w-screen {
    max-width: 1200px;
}

/* ===================================
   UTILITY CLASSES - BORDERS
   =================================== */

.rounded {
    border-radius: var(--border-radius-outer);
}
.rounded-lg {
    border-radius: var(--border-radius-outer-lg);
}
.rounded-full {
    border-radius: var(--border-radius-full);
}
.rounded-inner {
    border-radius: var(--border-radius-inner);
}

.border-0 {
    border-width: 0;
}
.border-t-0 {
    border-top-width: 0;
}
.border-b-subtle {
    border-bottom-width: var(--border-width-subtle);
}
.border-t-subtle {
    border-top-width: var(--border-width-subtle);
}

/* ===================================
   UTILITY CLASSES - BACKGROUNDS
   =================================== */

.bg-white {
    background-color: var(--white-1000);
}
.bg-gray-100 {
    background-color: var(--gray-100);
}
.bg-brand-blue-400 {
    background-color: var(--brand-blue-400);
}
.bg-brand-dark {
    background-color: var(--brand-blue-600);
}
.bg-pink-500 {
    background-color: var(--accent-pink-500);
}
.bg-pink-600 {
    background-color: var(--accent-pink-600);
}
.bg-brand-light {
    background-color: var(--brand-blue-050);
}
.bg-gray-light {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ===================================
   UTILITY CLASSES - CURSOR & INTERACTION
   =================================== */

.cursor-pointer {
    cursor: pointer;
}
.pointer-events-none {
    pointer-events: none;
}

/* ===================================
   UTILITY CLASSES - POSITIONING
   =================================== */

.top-0 {
    top: 0;
}
.left-0 {
    left: 0;
}
.right-0 {
    right: 0;
}
.bottom-0 {
    bottom: 0;
}
.inset-0 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}

/* Transform */
.transform {
    transform: translateZ(0);
}
.-translate-x-1\/2 {
    transform: translateX(-50%);
}
.-translate-y-1\/2 {
    transform: translateY(-50%);
}

/* ===================================
   UTILITY CLASSES - WHITESPACE
   =================================== */

.whitespace-nowrap {
    white-space: nowrap;
}
.whitespace-normal {
    white-space: normal;
}

/* ===================================
   RESPONSIVE UTILITIES - TABLET
   =================================== */

@media (min-width: 640px) {
    .md\:flex {
        display: flex;
    }
    .md\:flex-col {
        flex-direction: column;
    }
    .md\:w-auto {
        width: auto;
    }
    .md\:max-w-md {
        max-width: 640px;
    }
    .md\:gap-4 {
        gap: var(--size-4);
    }
}

/* ===================================
   RESPONSIVE UTILITIES - DESKTOP
   =================================== */

@media (min-width: 1025px) {
    .lg\:flex {
        display: flex;
    }
    .lg\:flex-col {
        flex-direction: column;
    }
    .lg\:flex-row {
        flex-direction: row;
    }
    .lg\:flex-1 {
        flex: 1;
    }
    .lg\:shrink-0 {
        flex-shrink: 0;
    }
    .lg\:w-auto {
        width: auto;
    }
    .lg\:w-48 {
        width: var(--size-48);
    }
    .lg\:w-56 {
        width: var(--size-56);
    }
    .lg\:max-w-lg {
        max-width: 868px;
    }
    .lg\:gap-4 {
        gap: var(--size-4);
    }
    .lg\:items-start {
        align-items: flex-start;
    }
    .lg\:items-center {
        align-items: center;
    }
    .lg\:justify-start {
        justify-content: flex-start;
    }
    .lg\:justify-center {
        justify-content: center;
    }
    .lg\:justify-between {
        justify-content: space-between;
    }
    .lg\:justify-end {
        justify-content: flex-end;
    }
    .lg\:border-b {
        border-bottom: 1px solid;
    }
    .lg\:border-t-0 {
        border-top: 0;
    }
    .lg\:mb-0 {
        margin-bottom: 0;
    }
    .lg\:mb-1 {
        margin-bottom: var(--size-1);
    }
    .lg\:text-body-sm {
        font-size: var(--font-size-body-sm);
        line-height: var(--font-lineheight-body-sm);
    }
    .lg\:text-body-md {
        font-size: var(--font-size-body-md);
        line-height: var(--font-lineheight-body-md);
    }
    .lg\:text-body-md-bold {
        font-size: var(--font-size-body-md);
        line-height: var(--font-lineheight-body-md);
        font-weight: var(--font-weight-bold);
    }
    .lg\:text-right {
        text-align: right;
    }
}