/* ==========================================================================
   🎨 Ashti Design System
   Generated from Figma Design System (REG1ypnT8FHl0GAISZycD4)
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* =====================================================================
       1.1 FONT FAMILIES
       ===================================================================== */
    --font-family-fa: 'Yekan Bakh', sans-serif;
    --font-family-en: 'Montserrat', sans-serif;
    /* =====================================================================
       1.2 FONT SIZES
       ===================================================================== */
    --font-size-display1: 48px; /* text-5xl */
    --font-size-display2: 40px; /* text-4xl */
    --font-size-display3: 32px; /* text-3xl */
    --font-size-h1: 24px; /* text-2xl */
    --font-size-h2: 20px; /* text-xl  */
    --font-size-h3: 18px; /* text-lg  */
    --font-size-h4: 16px; /* text-base */
    --font-size-h5: 14px; /* text-sm  */
    --font-size-h6: 12px; /* text-xs  */
    --font-size-caption1: 11px; /* text-2xs */
    --font-size-caption2: 10px; /* text-3xs */
    /* =====================================================================
       1.3 FONT WEIGHTS
       ===================================================================== */
    --font-weight-extrabold: 800;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    /* =====================================================================
       1.4 LINE HEIGHTS
       ===================================================================== */
    --line-height-display1: 72px;
    --line-height-display2: 60px;
    --line-height-display3: 48px;
    --line-height-h1: 36px;
    --line-height-h2: 30px;
    --line-height-h3: 28px;
    --line-height-h4: 24px;
    --line-height-h5: 20px;
    --line-height-h6: 18px;
    --line-height-caption1: 14px;
    --line-height-caption2: 14px;
    /* =====================================================================
       1.5 CORE COLORS — PRIMITIVES
       ===================================================================== */
    /* --- Zinc --- */
    --zinc-50: #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;
    /* Zinc Alpha */
    --zinc-100-50: #f4f4f580;
    --zinc-100-75: #f4f4f5bf;
    --zinc-200-50: #e4e4e780;
    --zinc-200-75: #e4e4e7bf;
    --zinc-700-50: #3f3f4680;
    --zinc-700-75: #3f3f46bf;
    --zinc-800-50: #27272a80;
    --zinc-800-75: #27272abf;
    --zinc-900-0: #18181b00;
    --zinc-900-20: #18181b33;
    --zinc-900-80: #18181bcc;
    --zinc-900-90: #18181be5;
    /* --- Slate --- */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
    /* Slate Alpha */
    --slate-100-50: #f1f5f980;
    --slate-100-75: #f1f5f9bf;
    --slate-200-50: #e2e8f080;
    --slate-200-75: #e2e8f0bf;
    --slate-700-50: #33415580;
    --slate-700-75: #334155bf;
    --slate-800-50: #1e293b80;
    --slate-800-75: #1e293bbf;
    --slate-900-0: #0f172a00;
    --slate-900-20: #0f172a33;
    --slate-900-80: #0f172acc;
    --slate-900-90: #0f172ae5;
    /* --- Sea (Primary) --- */
    --sea-50: #def0ee;
    --sea-100: #bde0de;
    --sea-200: #9bd1ce;
    --sea-300: #78c1bd;
    --sea-400: #4fb2ae;
    --sea-500: #00a29e;
    --sea-600: #007e7b;
    --sea-700: #005c5a;
    --sea-800: #003c3a;
    --sea-900: #001f1e;
    --sea-950: #000605;
    /* Sea Alpha */
    --sea-400-10: #4fb2ae1a;
    --sea-400-15: #4fb2ae26;
    --sea-400-25: #4fb2ae40;
    --sea-400-50: #4fb2ae80;
    --sea-400-75: #4fb2aebf;
    --sea-400-90: #4fb2aee5;
    --sea-500-0: #00a29e00;
    --sea-500-10: #00a29e1a;
    --sea-500-15: #00a29e26;
    --sea-500-25: #00a29e40;
    --sea-500-50: #00a29e80;
    --sea-500-75: #00a29ebf;
    --sea-500-90: #00a29ee5;
    /* --- Sun (Secondary) --- */
    --sun-50: #fff0e1;
    --sun-100: #ffe1c4;
    --sun-200: #ffd2a5;
    --sun-300: #ffc285;
    --sun-400: #ffb363;
    --sun-500: #ffa236;
    --sun-600: #c87e28;
    --sun-700: #945c1b;
    --sun-800: #633c0f;
    --sun-900: #361f05;
    --sun-950: #0f0601;
    /* Sun Alpha */
    --sun-400-10: #ffb3631a;
    --sun-400-15: #ffb36326;
    --sun-400-25: #ffb36340;
    --sun-400-50: #ffb36380;
    --sun-400-75: #ffb363bf;
    --sun-400-90: #ffb363e5;
    --sun-500-0: #ffa23600;
    --sun-500-10: #ffa2361a;
    --sun-500-15: #ffa23626;
    --sun-500-25: #ffa23640;
    --sun-500-50: #ffa23680;
    --sun-500-75: #ffa236bf;
    --sun-500-90: #ffa236e5;
    /* --- Blue --- */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;
    /* Blue Alpha */
    --blue-400-0: #60a5fa00;
    --blue-400-10: #60a5fa1a;
    --blue-400-15: #60a5fa26;
    --blue-400-20: #60a5fa33;
    --blue-400-25: #60a5fa40;
    --blue-400-50: #60a5fa80;
    --blue-400-75: #60a5fabf;
    --blue-400-90: #60a5fae5;
    --blue-500-10: #3b82f61a;
    --blue-500-15: #3b82f626;
    --blue-500-20: #3b82f633;
    --blue-500-25: #3b82f640;
    --blue-500-50: #3b82f680;
    --blue-500-75: #3b82f6bf;
    --blue-500-90: #3b82f6e5;
    /* --- Green --- */
    --green-50: #effdf5;
    --green-100: #d9fbe8;
    --green-200: #b3f5d1;
    --green-300: #75edae;
    --green-400: #00dc82;
    --green-500: #00c16a;
    --green-600: #00a155;
    --green-700: #007f45;
    --green-800: #016538;
    --green-900: #0a5331;
    --green-950: #052e16;
    /* Green Alpha */
    --green-400-10: #00dc821a;
    --green-400-15: #00dc8226;
    --green-400-25: #00dc8240;
    --green-400-50: #00dc8280;
    --green-400-75: #00dc82bf;
    --green-400-90: #00dc82e5;
    --green-500-0: #00c16a00;
    --green-500-10: #00c16a1a;
    --green-500-15: #00c16a26;
    --green-500-25: #00c16a40;
    --green-500-50: #00c16a80;
    --green-500-75: #00c16abf;
    --green-500-90: #00c16ae5;
    /* --- Red --- */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    --red-950: #450a0a;
    /* Red Alpha */
    --red-400-10: #f871711a;
    --red-400-15: #f8717126;
    --red-400-20: #f8717133;
    --red-400-25: #f8717140;
    --red-400-50: #f8717180;
    --red-400-75: #f87171bf;
    --red-400-90: #f87171e5;
    --red-500-0: #ef444400;
    --red-500-10: #ef44441a;
    --red-500-15: #ef444426;
    --red-500-20: #ef444433;
    --red-500-25: #ef444440;
    --red-500-50: #ef444480;
    --red-500-75: #ef4444bf;
    --red-500-90: #ef4444e5;
    /* --- Yellow --- */
    --yellow-50: #fef8e8;
    --yellow-100: #fef3c7;
    --yellow-200: #fdd28a;
    --yellow-300: #fcbb4d;
    --yellow-400: #fbab24;
    --yellow-500: #f59e0b;
    --yellow-600: #d98b06;
    --yellow-700: #b47409;
    --yellow-800: #92610e;
    --yellow-900: #78510f;
    --yellow-950: #452c03;
    /* Yellow Alpha */
    --yellow-400-10: #fbab241a;
    --yellow-400-15: #fbab2426;
    --yellow-400-25: #fbab2440;
    --yellow-400-50: #fbab2480;
    --yellow-400-75: #fbab24bf;
    --yellow-400-90: #fbab24e5;
    --yellow-500-0: #f59e0b00;
    --yellow-500-10: #f59e0b1a;
    --yellow-500-15: #f59e0b26;
    --yellow-500-25: #f59e0b40;
    --yellow-500-50: #f59e0b80;
    --yellow-500-75: #f59e0bbf;
    --yellow-500-90: #f59e0be5;
    /* --- Purple --- */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;
    --purple-950: #3b0764;
    /* Purple Alpha */
    --purple-400-10: #c084fc1a;
    --purple-400-15: #c084fc26;
    --purple-400-25: #c084fc40;
    --purple-400-50: #c084fc80;
    --purple-400-75: #c084fcbf;
    --purple-400-90: #c084fce5;
    --purple-500-0: #a855f700;
    --purple-500-10: #a855f71a;
    --purple-500-15: #a855f726;
    --purple-500-25: #a855f740;
    --purple-500-50: #a855f780;
    --purple-500-75: #a855f7bf;
    --purple-500-90: #a855f7e5;
    /* --- Pink --- */
    --pink-50: #fdf2f8;
    --pink-100: #fce7f3;
    --pink-200: #fbcfe8;
    --pink-300: #f9a8d4;
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-600: #db2777;
    --pink-700: #be185d;
    --pink-800: #9d174d;
    --pink-900: #831843;
    --pink-950: #500724;
    /* Pink Alpha */
    --pink-400-10: #f472b61a;
    --pink-400-15: #f472b626;
    --pink-400-25: #f472b640;
    --pink-400-50: #f472b680;
    --pink-400-75: #f472b6bf;
    --pink-400-90: #f472b6e5;
    --pink-500-0: #ec489900;
    --pink-500-10: #ec48991a;
    --pink-500-15: #ec489926;
    --pink-500-25: #ec489940;
    --pink-500-50: #ec489980;
    --pink-500-75: #ec4899bf;
    --pink-500-90: #ec4899e5;
    /* --- White --- */
    --white: #ffffff;
    --white-0: #ffffff00;
    --white-10: #ffffff1a;
    --white-15: #ffffff26;
    --white-20: #ffffff33;
    --white-25: #ffffff40;
    --white-50: #ffffff80;
    --white-75: #ffffffbf;
    --white-90: #ffffffe5;
    /* =====================================================================
       1.6 SEMANTIC COLORS — BACKGROUND
       ===================================================================== */
    --ui-bg: #ffffff;
    --ui-bg-90: #ffffffe5;
    --ui-bg-elevated: #f1f5f9;
    --ui-bg-elevated-50: #f1f5f980;
    --ui-bg-elevated-75: #f1f5f9bf;
    --ui-bg-accented: #e2e8f0;
    --ui-bg-accented-50: #e2e8f080;
    --ui-bg-accented-75: #e2e8f0bf;
    --ui-bg-inverted: #0f172a;
    --ui-bg-inverted-20: #0f172a33;
    --ui-bg-inverted-80: #0f172acc;
    /* =====================================================================
       1.7 SEMANTIC COLORS — BORDER
       ===================================================================== */
    --ui-border-muted: #F4F4F5;
    --ui-border: #E4E4E7;
    --ui-border-elevated: #D4D4D8;
    --ui-border-accented: #E4E4E7;
    /* =====================================================================
       1.8 SEMANTIC COLORS — TEXT
       ===================================================================== */
    --ui-text-highlighted: #09090b;
    --ui-text: #27272a;
    --ui-text-toned: #3f3f46;
    --ui-text-muted: #52525B;
    --ui-text-dimmed: #71717a;
    --ui-text-faded: #a1a1aa;
    --ui-text-contrast: #ffffff;
    --ui-text-white: #ffffff;
    --ui-text-black: #09090b;
    /* =====================================================================
       1.9 SEMANTIC COLORS — PRIMARY (Sea)
       ===================================================================== */
    --ui-primary: rgba(0, 162, 158, 1);
    --ui-primary-content: rgba(0, 126, 123, 1);
    --ui-primary-90: rgba(0, 162, 158, 0.9);
    --ui-primary-75: rgba(0, 162, 158, 0.75);
    --ui-primary-50: rgba(0, 162, 158, 0.5);
    --ui-primary-25: rgba(0, 162, 158, 0.25);
    --ui-primary-15: rgba(0, 162, 158, 0.15);
    --ui-primary-10: rgba(0, 162, 158, 0.1);
    --ui-primary-5: rgba(0, 162, 158, 0.05);
    --ui-primary-0: rgba(0, 162, 158, 0);
    /* =====================================================================
       1.10 SEMANTIC COLORS — SECONDARY (Sun)
       ===================================================================== */
    --ui-secondary: rgba(255, 162, 54, 1);
    --ui-secondary-content: rgba(200, 126, 40, 1);
    --ui-secondary-90: rgba(255, 162, 54, 0.9);
    --ui-secondary-75: rgba(255, 162, 54, 0.75);
    --ui-secondary-50: rgba(255, 162, 54, 0.5);
    --ui-secondary-25: rgba(255, 162, 54, 0.25);
    --ui-secondary-15: rgba(255, 162, 54, 0.15);
    --ui-secondary-10: rgba(255, 162, 54, 0.1);
    --ui-secondary-5: rgba(255, 162, 54, 0.05);
    --ui-secondary-0: rgba(255, 162, 54, 0);
    /* =====================================================================
       1.11 SEMANTIC COLORS — ERROR (Red)
       ===================================================================== */
    --ui-error: rgba(239, 68, 68, 1);
    --ui-error-content: rgba(220, 38, 38, 1);
    --ui-error-90: rgba(239, 68, 68, 0.9);
    --ui-error-75: rgba(239, 68, 68, 0.75);
    --ui-error-50: rgba(239, 68, 68, 0.5);
    --ui-error-25: rgba(239, 68, 68, 0.25);
    --ui-error-15: rgba(239, 68, 68, 0.15);
    --ui-error-10: rgba(239, 68, 68, 0.1);
    /* =====================================================================
       1.12 SEMANTIC COLORS — SUCCESS (Green)
       ===================================================================== */
    --ui-success: rgba(0, 193, 106, 1);
    --ui-success-content: rgba(0, 161, 85, 1);
    --ui-success-90: rgba(0, 193, 106, 0.9);
    --ui-success-75: rgba(0, 193, 106, 0.75);
    --ui-success-50: rgba(0, 193, 106, 0.5);
    --ui-success-25: rgba(0, 193, 106, 0.25);
    --ui-success-15: rgba(0, 193, 106, 0.15);
    --ui-success-10: rgba(0, 193, 106, 0.1);
    /* =====================================================================
       1.13 SEMANTIC COLORS — WARNING (Yellow)
       ===================================================================== */
    --ui-warning: rgba(245, 158, 11, 1);
    --ui-warning-content: rgba(217, 139, 6, 1);
    --ui-warning-90: rgba(245, 158, 11, 0.9);
    --ui-warning-75: rgba(245, 158, 11, 0.75);
    --ui-warning-50: rgba(245, 158, 11, 0.5);
    --ui-warning-25: rgba(245, 158, 11, 0.25);
    --ui-warning-15: rgba(245, 158, 11, 0.15);
    --ui-warning-10: rgba(245, 158, 11, 0.1);
    /* =====================================================================
       1.14 ACCENT COLORS — PINK
       ===================================================================== */
    --ui-pink: #ec4899;
    --ui-pink-content: #db2777;
    --ui-pink-90: #ec4899e5;
    --ui-pink-75: #ec4899bf;
    --ui-pink-50: #ec489980;
    --ui-pink-25: #ec489940;
    --ui-pink-15: #ec489926;
    --ui-pink-10: #ec48991a;
    /* =====================================================================
       1.15 ACCENT COLORS — PURPLE
       ===================================================================== */
    --ui-purple: #a855f7;
    --ui-purple-content: #9333ea;
    --ui-purple-90: #a855f7e5;
    --ui-purple-75: #a855f7bf;
    --ui-purple-50: #a855f780;
    --ui-purple-25: #a855f740;
    --ui-purple-15: #a855f726;
    --ui-purple-10: #a855f71a;
    /* =====================================================================
       1.16 ACCENT COLORS — BLUE
       ===================================================================== */
    --ui-blue: #3b82f6;
    --ui-blue-content: #2563eb;
    --ui-blue-90: #3b82f6e5;
    --ui-blue-75: #3b82f6bf;
    --ui-blue-50: #3b82f680;
    --ui-blue-25: #3b82f640;
    --ui-blue-15: #3b82f626;
    --ui-blue-10: #3b82f61a;
    /* =====================================================================
       1.17 GRADIENT TOKENS
       ===================================================================== */
    --ui-gradient-body: #ffffff00;
    --ui-gradient-primary: #00a29e00;
    --ui-gradient-white: #ffffff00;
    /* =====================================================================
       1.18 SPACING SCALE
       ===================================================================== */
    --space-0: 0px;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-4-5: 18px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-13: 52px;
    --space-14: 56px;
    --space-15: 60px;
    --space-16: 64px;
    --space-17: 68px;
    --space-18: 72px;
    --space-20: 80px;
    --space-24: 96px;
    --space-28: 112px;
    --space-32: 128px;
    --space-36: 144px;
    --space-40: 160px;
    --space-44: 176px;
    --space-48: 192px;
    --space-52: 208px;
    --space-56: 224px;
    --space-60: 240px;
    --space-64: 256px;
    --space-72: 288px;
    --space-80: 320px;
    --space-96: 384px;
    /* =====================================================================
       1.19 T-SHIRT SPACING UNITS
       ===================================================================== */
    --size-xs: 8px;
    --size-sm: 12px;
    --size-md: 16px;
    --size-lg: 22px;
    --size-xl: 36px;
    --size-2xl: 48px;
    --size-3xl: 80px;
    --size-4xl: 120px;
    --size-5xl: 224px;
    --size-6xl: 288px;
    --size-7xl: 384px;
    --size-8xl: 512px;
    --size-9xl: 640px;
    /* =====================================================================
       1.20 BORDER RADIUS
       ===================================================================== */
    --radius-none: 0px;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-5xl: 32px;
    --radius-full: 1000px;
    /* =====================================================================
       1.21 GRID SYSTEM
       ===================================================================== */
    --grid-columns-desktop: 12;
    --grid-gutter-desktop: 24px;
    --grid-margin-desktop: 120px;
    --grid-column-width-desktop: 78px;
    --grid-columns-tablet: 8;
    --grid-gutter-tablet: 24px;
    --grid-margin-tablet: 32px;
    --grid-column-width-tablet: 67px;
    --grid-columns-mobile: 4;
    --grid-gutter-mobile: 16px;
    --grid-margin-mobile: 20px;
    --grid-column-width-mobile: 72px;
    /* =====================================================================
       1.22 BREAKPOINTS
       ===================================================================== */
    --breakpoint-mobile: 376px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1440px;
}


/* ==========================================================================
   2. DARK THEME
   ========================================================================== */

[data-theme="dark"],
.dark {

    /* --- Background --- */
    --ui-bg: #0f172a;
    --ui-bg-90: #0f172ae6;
    --ui-bg-elevated: #1e293b;
    --ui-bg-elevated-50: #1e293b80;
    --ui-bg-elevated-75: #1e293bbf;
    --ui-bg-accented: #334155;
    --ui-bg-accented-50: #33415580;
    --ui-bg-accented-75: #334155bf;
    --ui-bg-inverted: #ffffff;
    --ui-bg-inverted-20: #ffffff33;
    --ui-bg-inverted-80: #ffffffbf;

    /* --- Border --- */
    --ui-border-muted: #1e293b;
    --ui-border: #334155;
    --ui-border-elevated: #334155;
    --ui-border-accented: #64748b;

    /* --- Text --- */
    --ui-text-highlighted: #ffffff;
    --ui-text: #e2e8f0;
    --ui-text-toned: #cbd5e1;
    --ui-text-muted: #94a3b8;
    --ui-text-dimmed: #94a3b8;
    --ui-text-faded: #475569;
    --ui-text-contrast: #0f172a;
    --ui-text-white: #ffffff;
    --ui-text-black: #020617;

    /* --- Gradient --- */
    --ui-gradient-body: #0f172a00;
}


/* ==========================================================================
   3. TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

/* ---- 3.1 Display Sizes ---- */

.text-display1 {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-display1) !important;
    font-weight: var(--font-weight-extrabold) !important;
    line-height: var(--line-height-display1) !important;
    letter-spacing: 0 !important;
}

.text-display2 {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-display2) !important;
    font-weight: var(--font-weight-extrabold) !important;
    line-height: var(--line-height-display2) !important;
    letter-spacing: 0 !important;
}

.text-display3 {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-display3) !important;
    font-weight: var(--font-weight-extrabold) !important;
    line-height: var(--line-height-display3) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.2 H1 — 24px (text-2xl) ---- */

.text-h1-extrabold,
.text-2xl-extrabold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-extrabold) !important;
    line-height: var(--line-height-h1) !important;
    letter-spacing: 0 !important;
}

.text-h1-bold,
.text-2xl-bold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-h1) !important;
    letter-spacing: 0 !important;
}

.text-h1-semibold,
.text-2xl-semibold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-h1) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.3 H2 — 20px (text-xl) ---- */

.text-h2-extrabold,
.text-xl-extrabold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-extrabold) !important;
    line-height: var(--line-height-h2) !important;
    letter-spacing: 0 !important;
}

.text-h2-bold,
.text-xl-bold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-h2) !important;
    letter-spacing: 0 !important;
}

.text-h2-semibold,
.text-xl-semibold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-h2) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.4 H3 — 18px (text-lg) ---- */

.text-h3-extrabold,
.text-lg-extrabold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-extrabold) !important;
    line-height: var(--line-height-h3) !important;
    letter-spacing: 0 !important;
}

.text-h3-bold,
.text-lg-bold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-h3) !important;
    letter-spacing: 0 !important;
}

.text-h3-semibold,
.text-lg-semibold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-h3) !important;
    letter-spacing: 0 !important;
}

.text-h3-regular,
.text-lg-regular {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-h3) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.5 H4 — 16px (text-base) ---- */

.text-h4-extrabold,
.text-base-extrabold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-extrabold) !important;
    line-height: var(--line-height-h4) !important;
    letter-spacing: 0 !important;
}

.text-h4-bold,
.text-base-bold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-h4) !important;
    letter-spacing: 0 !important;
}

.text-h4-semibold,
.text-base-semibold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-h4) !important;
    letter-spacing: 0 !important;
}

.text-h4-regular,
.text-base-regular {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-h4) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.6 H5 — 14px (text-sm) ---- */

.text-h5-bold,
.text-sm-bold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h5) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-h5) !important;
    letter-spacing: 0 !important;
}

.text-h5-semibold,
.text-sm-semibold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h5) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-h5) !important;
    letter-spacing: 0 !important;
}

.text-h5-regular,
.text-sm-regular {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h5) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-h5) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.7 H6 — 12px (text-xs) ---- */

.text-h6-bold,
.text-xs-bold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h6) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-h6) !important;
    letter-spacing: 0 !important;
}

.text-h6-semibold,
.text-xs-semibold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h6) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-h6) !important;
    letter-spacing: 0 !important;
}

.text-h6-regular,
.text-xs-regular {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-h6) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-h6) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.8 Caption1 — 11px (text-2xs) ---- */

.text-caption1-semibold,
.text-2xs-semibold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-caption1) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-caption1) !important;
    letter-spacing: 0 !important;
}

.text-caption1-regular,
.text-2xs-regular {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-caption1) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-caption1) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.9 Caption2 — 10px (text-3xs) ---- */

.text-caption2-semibold,
.text-3xs-semibold {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-caption2) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 12px !important;
    letter-spacing: 0 !important;
}

.text-caption2-regular,
.text-3xs-regular {
    font-family: var(--font-family-fa) !important;
    font-size: var(--font-size-caption2) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-caption2) !important;
    letter-spacing: 0 !important;
}


/* ---- 3.10 Font Family Helpers ---- */

.font-fa {
    font-family: var(--font-family-fa) !important;
}

.font-en {
    font-family: var(--font-family-en) !important;
}


/* ---- 3.11 Font Weight Helpers ---- */

.font-extrabold {
    font-weight: var(--font-weight-extrabold) !important;
}

.font-bold {
    font-weight: var(--font-weight-bold) !important;
}

.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-regular {
    font-weight: var(--font-weight-regular) !important;
}


/* ==========================================================================
   4. COLOR UTILITY CLASSES
   ========================================================================== */

/* ---- 4.1 Text Colors ---- */

.text-highlighted {
    color: var(--ui-text-highlighted) !important;
}

.text-default {
    color: var(--ui-text) !important;
}

.text-toned {
    color: var(--ui-text-toned) !important;
}

.text-muted {
    color: var(--ui-text-muted) !important;
}

.text-dimmed {
    color: var(--ui-text-dimmed) !important;
}

.text-faded {
    color: var(--ui-text-faded) !important;
}

.text-contrast {
    color: var(--ui-text-contrast) !important;
}

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

.text-black {
    color: var(--ui-text-black) !important;
}

.text-primary {
    color: var(--ui-primary) !important;
}

.text-primary-content {
    color: var(--ui-primary-content) !important;
}

.text-secondary {
    color: var(--ui-secondary) !important;
}

.text-secondary-content {
    color: var(--ui-secondary-content) !important;
}

.text-error {
    color: var(--ui-error) !important;
}

.text-error-content {
    color: var(--ui-error-content) !important;
}

.text-success {
    color: var(--ui-success) !important;
}

.text-success-content {
    color: var(--ui-success-content) !important;
}

.text-warning {
    color: var(--ui-warning) !important;
}

.text-warning-content {
    color: var(--ui-warning-content) !important;
}

.text-pink {
    color: var(--ui-pink) !important;
}

.text-purple {
    color: var(--ui-purple) !important;
}

.text-blue {
    color: var(--ui-blue) !important;
}


/* ---- 4.2 Background Colors ---- */

.bg-body {
    background-color: var(--ui-bg) !important;
}

.bg-body-90 {
    background-color: var(--ui-bg-90) !important;
}

.bg-elevated {
    background-color: var(--ui-bg-elevated) !important;
}

.bg-elevated-50 {
    background-color: var(--ui-bg-elevated-50) !important;
}

.bg-elevated-75 {
    background-color: var(--ui-bg-elevated-75) !important;
}

.bg-accented {
    background-color: var(--ui-bg-accented) !important;
}

.bg-accented-50 {
    background-color: var(--ui-bg-accented-50) !important;
}

.bg-accented-75 {
    background-color: var(--ui-bg-accented-75) !important;
}

.bg-inverted {
    background-color: var(--ui-bg-inverted) !important;
}

.bg-inverted-20 {
    background-color: var(--ui-bg-inverted-20) !important;
}

.bg-inverted-80 {
    background-color: var(--ui-bg-inverted-80) !important;
}

/* Brand / Status Background Colors */
.bg-primary {
    background-color: var(--ui-primary) !important;
}

.bg-primary-90 {
    background-color: var(--ui-primary-90) !important;
}

.bg-primary-75 {
    background-color: var(--ui-primary-75) !important;
}

.bg-primary-50 {
    background-color: var(--ui-primary-50) !important;
}

.bg-primary-25 {
    background-color: var(--ui-primary-25) !important;
}

.bg-primary-15 {
    background-color: var(--ui-primary-15) !important;
}

.bg-primary-10 {
    background-color: var(--ui-primary-10) !important;
}

.bg-primary-5 {
    background-color: var(--ui-primary-5) !important;
}

.bg-secondary {
    background-color: var(--ui-secondary) !important;
}

.bg-secondary-90 {
    background-color: var(--ui-secondary-90) !important;
}

.bg-secondary-75 {
    background-color: var(--ui-secondary-75) !important;
}

.bg-secondary-50 {
    background-color: var(--ui-secondary-50) !important;
}

.bg-secondary-25 {
    background-color: var(--ui-secondary-25) !important;
}

.bg-secondary-15 {
    background-color: var(--ui-secondary-15) !important;
}

.bg-secondary-10 {
    background-color: var(--ui-secondary-10) !important;
}

.bg-error {
    background-color: var(--ui-error) !important;
}

.bg-error-90 {
    background-color: var(--ui-error-90) !important;
}

.bg-error-75 {
    background-color: var(--ui-error-75) !important;
}

.bg-error-50 {
    background-color: var(--ui-error-50) !important;
}

.bg-error-25 {
    background-color: var(--ui-error-25) !important;
}

.bg-error-15 {
    background-color: var(--ui-error-15) !important;
}

.bg-error-10 {
    background-color: var(--ui-error-10) !important;
}

.bg-success {
    background-color: var(--ui-success) !important;
}

.bg-success-90 {
    background-color: var(--ui-success-90) !important;
}

.bg-success-75 {
    background-color: var(--ui-success-75) !important;
}

.bg-success-50 {
    background-color: var(--ui-success-50) !important;
}

.bg-success-25 {
    background-color: var(--ui-success-25) !important;
}

.bg-success-15 {
    background-color: var(--ui-success-15) !important;
}

.bg-success-10 {
    background-color: var(--ui-success-10) !important;
}

.bg-warning {
    background-color: var(--ui-warning) !important;
}

.bg-warning-90 {
    background-color: var(--ui-warning-90) !important;
}

.bg-warning-75 {
    background-color: var(--ui-warning-75) !important;
}

.bg-warning-50 {
    background-color: var(--ui-warning-50) !important;
}

.bg-warning-25 {
    background-color: var(--ui-warning-25) !important;
}

.bg-warning-15 {
    background-color: var(--ui-warning-15) !important;
}

.bg-warning-10 {
    background-color: var(--ui-warning-10) !important;
}

.bg-pink {
    background-color: var(--ui-pink) !important;
}

.bg-pink-90 {
    background-color: var(--ui-pink-90) !important;
}

.bg-pink-75 {
    background-color: var(--ui-pink-75) !important;
}

.bg-pink-50 {
    background-color: var(--ui-pink-50) !important;
}

.bg-pink-25 {
    background-color: var(--ui-pink-25) !important;
}

.bg-pink-15 {
    background-color: var(--ui-pink-15) !important;
}

.bg-pink-10 {
    background-color: var(--ui-pink-10) !important;
}

.bg-purple {
    background-color: var(--ui-purple) !important;
}

.bg-purple-90 {
    background-color: var(--ui-purple-90) !important;
}

.bg-purple-75 {
    background-color: var(--ui-purple-75) !important;
}

.bg-purple-50 {
    background-color: var(--ui-purple-50) !important;
}

.bg-purple-25 {
    background-color: var(--ui-purple-25) !important;
}

.bg-purple-15 {
    background-color: var(--ui-purple-15) !important;
}

.bg-purple-10 {
    background-color: var(--ui-purple-10) !important;
}

.bg-blue {
    background-color: var(--ui-blue) !important;
}

.bg-blue-90 {
    background-color: var(--ui-blue-90) !important;
}

.bg-blue-75 {
    background-color: var(--ui-blue-75) !important;
}

.bg-blue-50 {
    background-color: var(--ui-blue-50) !important;
}

.bg-blue-25 {
    background-color: var(--ui-blue-25) !important;
}

.bg-blue-15 {
    background-color: var(--ui-blue-15) !important;
}

.bg-blue-10 {
    background-color: var(--ui-blue-10) !important;
}


/* ---- 4.3 Border Colors ---- */

.border-muted {
    border-color: var(--ui-border-muted) !important;
}

.border-default {
    border-color: var(--ui-border) !important;
}

.border-elevated {
    border-color: var(--ui-border-elevated) !important;
}

.border-accented {
    border-color: var(--ui-border-accented) !important;
}

.border-primary {
    border-color: var(--ui-primary) !important;
}

.border-secondary {
    border-color: var(--ui-secondary) !important;
}

.border-error {
    border-color: var(--ui-error) !important;
}

.border-success {
    border-color: var(--ui-success) !important;
}

.border-warning {
    border-color: var(--ui-warning) !important;
}


/* ==========================================================================
   5. SPACING UTILITY CLASSES
   ========================================================================== */

/* ---- 5.1 Padding ---- */

.p-0    { padding: var(--space-0) !important; }
.p-0-5  { padding: var(--space-0-5) !important; }
.p-1    { padding: var(--space-1) !important; }
.p-1-5  { padding: var(--space-1-5) !important; }
.p-2    { padding: var(--space-2) !important; }
.p-2-5  { padding: var(--space-2-5) !important; }
.p-3    { padding: var(--space-3) !important; }
.p-3-5  { padding: var(--space-3-5) !important; }
.p-4    { padding: var(--space-4) !important; }
.p-4-5  { padding: var(--space-4-5) !important; }
.p-5    { padding: var(--space-5) !important; }
.p-6    { padding: var(--space-6) !important; }
.p-7    { padding: var(--space-7) !important; }
.p-8    { padding: var(--space-8) !important; }
.p-9    { padding: var(--space-9) !important; }
.p-10   { padding: var(--space-10) !important; }
.p-11   { padding: var(--space-11) !important; }
.p-12   { padding: var(--space-12) !important; }
.p-13   { padding: var(--space-13) !important; }
.p-14   { padding: var(--space-14) !important; }
.p-15   { padding: var(--space-15) !important; }
.p-16   { padding: var(--space-16) !important; }
.p-17   { padding: var(--space-17) !important; }
.p-18   { padding: var(--space-18) !important; }
.p-20   { padding: var(--space-20) !important; }
.p-24   { padding: var(--space-24) !important; }
.p-28   { padding: var(--space-28) !important; }
.p-32   { padding: var(--space-32) !important; }
.p-36   { padding: var(--space-36) !important; }
.p-40   { padding: var(--space-40) !important; }
.p-44   { padding: var(--space-44) !important; }
.p-48   { padding: var(--space-48) !important; }
.p-52   { padding: var(--space-52) !important; }
.p-56   { padding: var(--space-56) !important; }
.p-60   { padding: var(--space-60) !important; }
.p-64   { padding: var(--space-64) !important; }
.p-72   { padding: var(--space-72) !important; }
.p-80   { padding: var(--space-80) !important; }
.p-96   { padding: var(--space-96) !important; }

.px-0    { padding-inline: var(--space-0) !important; }
.px-0-5  { padding-inline: var(--space-0-5) !important; }
.px-1    { padding-inline: var(--space-1) !important; }
.px-1-5  { padding-inline: var(--space-1-5) !important; }
.px-2    { padding-inline: var(--space-2) !important; }
.px-2-5  { padding-inline: var(--space-2-5) !important; }
.px-3    { padding-inline: var(--space-3) !important; }
.px-3-5  { padding-inline: var(--space-3-5) !important; }
.px-4    { padding-inline: var(--space-4) !important; }
.px-4-5  { padding-inline: var(--space-4-5) !important; }
.px-5    { padding-inline: var(--space-5) !important; }
.px-6    { padding-inline: var(--space-6) !important; }
.px-7    { padding-inline: var(--space-7) !important; }
.px-8    { padding-inline: var(--space-8) !important; }
.px-9    { padding-inline: var(--space-9) !important; }
.px-10   { padding-inline: var(--space-10) !important; }
.px-11   { padding-inline: var(--space-11) !important; }
.px-12   { padding-inline: var(--space-12) !important; }
.px-13   { padding-inline: var(--space-13) !important; }
.px-14   { padding-inline: var(--space-14) !important; }
.px-15   { padding-inline: var(--space-15) !important; }
.px-16   { padding-inline: var(--space-16) !important; }
.px-17   { padding-inline: var(--space-17) !important; }
.px-18   { padding-inline: var(--space-18) !important; }
.px-20   { padding-inline: var(--space-20) !important; }
.px-24   { padding-inline: var(--space-24) !important; }
.px-28   { padding-inline: var(--space-28) !important; }
.px-32   { padding-inline: var(--space-32) !important; }
.px-36   { padding-inline: var(--space-36) !important; }
.px-40   { padding-inline: var(--space-40) !important; }
.px-44   { padding-inline: var(--space-44) !important; }
.px-48   { padding-inline: var(--space-48) !important; }
.px-52   { padding-inline: var(--space-52) !important; }
.px-56   { padding-inline: var(--space-56) !important; }
.px-60   { padding-inline: var(--space-60) !important; }
.px-64   { padding-inline: var(--space-64) !important; }
.px-72   { padding-inline: var(--space-72) !important; }
.px-80   { padding-inline: var(--space-80) !important; }
.px-96   { padding-inline: var(--space-96) !important; }

.py-0    { padding-block: var(--space-0) !important; }
.py-0-5  { padding-block: var(--space-0-5) !important; }
.py-1    { padding-block: var(--space-1) !important; }
.py-1-5  { padding-block: var(--space-1-5) !important; }
.py-2    { padding-block: var(--space-2) !important; }
.py-2-5  { padding-block: var(--space-2-5) !important; }
.py-3    { padding-block: var(--space-3) !important; }
.py-3-5  { padding-block: var(--space-3-5) !important; }
.py-4    { padding-block: var(--space-4) !important; }
.py-4-5  { padding-block: var(--space-4-5) !important; }
.py-5    { padding-block: var(--space-5) !important; }
.py-6    { padding-block: var(--space-6) !important; }
.py-7    { padding-block: var(--space-7) !important; }
.py-8    { padding-block: var(--space-8) !important; }
.py-9    { padding-block: var(--space-9) !important; }
.py-10   { padding-block: var(--space-10) !important; }
.py-11   { padding-block: var(--space-11) !important; }
.py-12   { padding-block: var(--space-12) !important; }
.py-13   { padding-block: var(--space-13) !important; }
.py-14   { padding-block: var(--space-14) !important; }
.py-15   { padding-block: var(--space-15) !important; }
.py-16   { padding-block: var(--space-16) !important; }
.py-17   { padding-block: var(--space-17) !important; }
.py-18   { padding-block: var(--space-18) !important; }
.py-20   { padding-block: var(--space-20) !important; }
.py-24   { padding-block: var(--space-24) !important; }
.py-28   { padding-block: var(--space-28) !important; }
.py-32   { padding-block: var(--space-32) !important; }
.py-36   { padding-block: var(--space-36) !important; }
.py-40   { padding-block: var(--space-40) !important; }
.py-44   { padding-block: var(--space-44) !important; }
.py-48   { padding-block: var(--space-48) !important; }
.py-52   { padding-block: var(--space-52) !important; }
.py-56   { padding-block: var(--space-56) !important; }
.py-60   { padding-block: var(--space-60) !important; }
.py-64   { padding-block: var(--space-64) !important; }
.py-72   { padding-block: var(--space-72) !important; }
.py-80   { padding-block: var(--space-80) !important; }
.py-96   { padding-block: var(--space-96) !important; }

.pt-0    { padding-block-start: var(--space-0) !important; }
.pt-1    { padding-block-start: var(--space-1) !important; }
.pt-2    { padding-block-start: var(--space-2) !important; }
.pt-3    { padding-block-start: var(--space-3) !important; }
.pt-4    { padding-block-start: var(--space-4) !important; }
.pt-5    { padding-block-start: var(--space-5) !important; }
.pt-6    { padding-block-start: var(--space-6) !important; }
.pt-7    { padding-block-start: var(--space-7) !important; }
.pt-8    { padding-block-start: var(--space-8) !important; }
.pt-9    { padding-block-start: var(--space-9) !important; }
.pt-10   { padding-block-start: var(--space-10) !important; }
.pt-11   { padding-block-start: var(--space-11) !important; }
.pt-12   { padding-block-start: var(--space-12) !important; }
.pt-13   { padding-block-start: var(--space-13) !important; }
.pt-14   { padding-block-start: var(--space-14) !important; }
.pt-15   { padding-block-start: var(--space-15) !important; }
.pt-16   { padding-block-start: var(--space-16) !important; }
.pt-17   { padding-block-start: var(--space-17) !important; }
.pt-18   { padding-block-start: var(--space-18) !important; }
.pt-20   { padding-block-start: var(--space-20) !important; }
.pt-24   { padding-block-start: var(--space-24) !important; }
.pt-28   { padding-block-start: var(--space-28) !important; }
.pt-32   { padding-block-start: var(--space-32) !important; }
.pt-36   { padding-block-start: var(--space-36) !important; }
.pt-40   { padding-block-start: var(--space-40) !important; }
.pt-44   { padding-block-start: var(--space-44) !important; }
.pt-48   { padding-block-start: var(--space-48) !important; }
.pt-52   { padding-block-start: var(--space-52) !important; }
.pt-56   { padding-block-start: var(--space-56) !important; }
.pt-60   { padding-block-start: var(--space-60) !important; }
.pt-64   { padding-block-start: var(--space-64) !important; }
.pt-72   { padding-block-start: var(--space-72) !important; }
.pt-80   { padding-block-start: var(--space-80) !important; }
.pt-96   { padding-block-start: var(--space-96) !important; }

.pb-0    { padding-block-end: var(--space-0) !important; }
.pb-1    { padding-block-end: var(--space-1) !important; }
.pb-2    { padding-block-end: var(--space-2) !important; }
.pb-3    { padding-block-end: var(--space-3) !important; }
.pb-4    { padding-block-end: var(--space-4) !important; }
.pb-5    { padding-block-end: var(--space-5) !important; }
.pb-6    { padding-block-end: var(--space-6) !important; }
.pb-7    { padding-block-end: var(--space-7) !important; }
.pb-8    { padding-block-end: var(--space-8) !important; }
.pb-9    { padding-block-end: var(--space-9) !important; }
.pb-10   { padding-block-end: var(--space-10) !important; }
.pb-11   { padding-block-end: var(--space-11) !important; }
.pb-12   { padding-block-end: var(--space-12) !important; }
.pb-13   { padding-block-end: var(--space-13) !important; }
.pb-14   { padding-block-end: var(--space-14) !important; }
.pb-15   { padding-block-end: var(--space-15) !important; }
.pb-16   { padding-block-end: var(--space-16) !important; }
.pb-17   { padding-block-end: var(--space-17) !important; }
.pb-18   { padding-block-end: var(--space-18) !important; }
.pb-20   { padding-block-end: var(--space-20) !important; }
.pb-24   { padding-block-end: var(--space-24) !important; }
.pb-28   { padding-block-end: var(--space-28) !important; }
.pb-32   { padding-block-end: var(--space-32) !important; }
.pb-36   { padding-block-end: var(--space-36) !important; }
.pb-40   { padding-block-end: var(--space-40) !important; }
.pb-44   { padding-block-end: var(--space-44) !important; }
.pb-48   { padding-block-end: var(--space-48) !important; }
.pb-52   { padding-block-end: var(--space-52) !important; }
.pb-56   { padding-block-end: var(--space-56) !important; }
.pb-60   { padding-block-end: var(--space-60) !important; }
.pb-64   { padding-block-end: var(--space-64) !important; }
.pb-72   { padding-block-end: var(--space-72) !important; }
.pb-80   { padding-block-end: var(--space-80) !important; }
.pb-96   { padding-block-end: var(--space-96) !important; }

.ps-0    { padding-inline-start: var(--space-0) !important; }
.ps-1    { padding-inline-start: var(--space-1) !important; }
.ps-2    { padding-inline-start: var(--space-2) !important; }
.ps-3    { padding-inline-start: var(--space-3) !important; }
.ps-4    { padding-inline-start: var(--space-4) !important; }
.ps-5    { padding-inline-start: var(--space-5) !important; }
.ps-6    { padding-inline-start: var(--space-6) !important; }
.ps-7    { padding-inline-start: var(--space-7) !important; }
.ps-8    { padding-inline-start: var(--space-8) !important; }
.ps-9    { padding-inline-start: var(--space-9) !important; }
.ps-10   { padding-inline-start: var(--space-10) !important; }
.ps-11   { padding-inline-start: var(--space-11) !important; }
.ps-12   { padding-inline-start: var(--space-12) !important; }
.ps-13   { padding-inline-start: var(--space-13) !important; }
.ps-14   { padding-inline-start: var(--space-14) !important; }
.ps-15   { padding-inline-start: var(--space-15) !important; }
.ps-16   { padding-inline-start: var(--space-16) !important; }
.ps-17   { padding-inline-start: var(--space-17) !important; }
.ps-18   { padding-inline-start: var(--space-18) !important; }
.ps-20   { padding-inline-start: var(--space-20) !important; }
.ps-24   { padding-inline-start: var(--space-24) !important; }
.ps-28   { padding-inline-start: var(--space-28) !important; }
.ps-32   { padding-inline-start: var(--space-32) !important; }
.ps-36   { padding-inline-start: var(--space-36) !important; }
.ps-40   { padding-inline-start: var(--space-40) !important; }
.ps-44   { padding-inline-start: var(--space-44) !important; }
.ps-48   { padding-inline-start: var(--space-48) !important; }
.ps-52   { padding-inline-start: var(--space-52) !important; }
.ps-56   { padding-inline-start: var(--space-56) !important; }
.ps-60   { padding-inline-start: var(--space-60) !important; }
.ps-64   { padding-inline-start: var(--space-64) !important; }
.ps-72   { padding-inline-start: var(--space-72) !important; }
.ps-80   { padding-inline-start: var(--space-80) !important; }
.ps-96   { padding-inline-start: var(--space-96) !important; }

.pe-0    { padding-inline-end: var(--space-0) !important; }
.pe-1    { padding-inline-end: var(--space-1) !important; }
.pe-2    { padding-inline-end: var(--space-2) !important; }
.pe-3    { padding-inline-end: var(--space-3) !important; }
.pe-4    { padding-inline-end: var(--space-4) !important; }
.pe-5    { padding-inline-end: var(--space-5) !important; }
.pe-6    { padding-inline-end: var(--space-6) !important; }
.pe-7    { padding-inline-end: var(--space-7) !important; }
.pe-8    { padding-inline-end: var(--space-8) !important; }
.pe-9    { padding-inline-end: var(--space-9) !important; }
.pe-10   { padding-inline-end: var(--space-10) !important; }
.pe-11   { padding-inline-end: var(--space-11) !important; }
.pe-12   { padding-inline-end: var(--space-12) !important; }
.pe-13   { padding-inline-end: var(--space-13) !important; }
.pe-14   { padding-inline-end: var(--space-14) !important; }
.pe-15   { padding-inline-end: var(--space-15) !important; }
.pe-16   { padding-inline-end: var(--space-16) !important; }
.pe-17   { padding-inline-end: var(--space-17) !important; }
.pe-18   { padding-inline-end: var(--space-18) !important; }
.pe-20   { padding-inline-end: var(--space-20) !important; }
.pe-24   { padding-inline-end: var(--space-24) !important; }
.pe-28   { padding-inline-end: var(--space-28) !important; }
.pe-32   { padding-inline-end: var(--space-32) !important; }
.pe-36   { padding-inline-end: var(--space-36) !important; }
.pe-40   { padding-inline-end: var(--space-40) !important; }
.pe-44   { padding-inline-end: var(--space-44) !important; }
.pe-48   { padding-inline-end: var(--space-48) !important; }
.pe-52   { padding-inline-end: var(--space-52) !important; }
.pe-56   { padding-inline-end: var(--space-56) !important; }
.pe-60   { padding-inline-end: var(--space-60) !important; }
.pe-64   { padding-inline-end: var(--space-64) !important; }
.pe-72   { padding-inline-end: var(--space-72) !important; }
.pe-80   { padding-inline-end: var(--space-80) !important; }
.pe-96   { padding-inline-end: var(--space-96) !important; }


/* ---- 5.2 Margin ---- */

.m-0    { margin: var(--space-0) !important; }
.m-0-5  { margin: var(--space-0-5) !important; }
.m-1    { margin: var(--space-1) !important; }
.m-1-5  { margin: var(--space-1-5) !important; }
.m-2    { margin: var(--space-2) !important; }
.m-2-5  { margin: var(--space-2-5) !important; }
.m-3    { margin: var(--space-3) !important; }
.m-3-5  { margin: var(--space-3-5) !important; }
.m-4    { margin: var(--space-4) !important; }
.m-4-5  { margin: var(--space-4-5) !important; }
.m-5    { margin: var(--space-5) !important; }
.m-6    { margin: var(--space-6) !important; }
.m-7    { margin: var(--space-7) !important; }
.m-8    { margin: var(--space-8) !important; }
.m-9    { margin: var(--space-9) !important; }
.m-10   { margin: var(--space-10) !important; }
.m-11   { margin: var(--space-11) !important; }
.m-12   { margin: var(--space-12) !important; }
.m-13   { margin: var(--space-13) !important; }
.m-14   { margin: var(--space-14) !important; }
.m-15   { margin: var(--space-15) !important; }
.m-16   { margin: var(--space-16) !important; }
.m-17   { margin: var(--space-17) !important; }
.m-18   { margin: var(--space-18) !important; }
.m-20   { margin: var(--space-20) !important; }
.m-24   { margin: var(--space-24) !important; }
.m-28   { margin: var(--space-28) !important; }
.m-32   { margin: var(--space-32) !important; }
.m-36   { margin: var(--space-36) !important; }
.m-40   { margin: var(--space-40) !important; }
.m-44   { margin: var(--space-44) !important; }
.m-48   { margin: var(--space-48) !important; }
.m-52   { margin: var(--space-52) !important; }
.m-56   { margin: var(--space-56) !important; }
.m-60   { margin: var(--space-60) !important; }
.m-64   { margin: var(--space-64) !important; }
.m-72   { margin: var(--space-72) !important; }
.m-80   { margin: var(--space-80) !important; }
.m-96   { margin: var(--space-96) !important; }
.m-auto { margin: auto !important; }

.mx-0    { margin-inline: var(--space-0) !important; }
.mx-1    { margin-inline: var(--space-1) !important; }
.mx-2    { margin-inline: var(--space-2) !important; }
.mx-3    { margin-inline: var(--space-3) !important; }
.mx-4    { margin-inline: var(--space-4) !important; }
.mx-5    { margin-inline: var(--space-5) !important; }
.mx-6    { margin-inline: var(--space-6) !important; }
.mx-7    { margin-inline: var(--space-7) !important; }
.mx-8    { margin-inline: var(--space-8) !important; }
.mx-9    { margin-inline: var(--space-9) !important; }
.mx-10   { margin-inline: var(--space-10) !important; }
.mx-11   { margin-inline: var(--space-11) !important; }
.mx-12   { margin-inline: var(--space-12) !important; }
.mx-13   { margin-inline: var(--space-13) !important; }
.mx-14   { margin-inline: var(--space-14) !important; }
.mx-15   { margin-inline: var(--space-15) !important; }
.mx-16   { margin-inline: var(--space-16) !important; }
.mx-17   { margin-inline: var(--space-17) !important; }
.mx-18   { margin-inline: var(--space-18) !important; }
.mx-20   { margin-inline: var(--space-20) !important; }
.mx-24   { margin-inline: var(--space-24) !important; }
.mx-28   { margin-inline: var(--space-28) !important; }
.mx-32   { margin-inline: var(--space-32) !important; }
.mx-36   { margin-inline: var(--space-36) !important; }
.mx-40   { margin-inline: var(--space-40) !important; }
.mx-44   { margin-inline: var(--space-44) !important; }
.mx-48   { margin-inline: var(--space-48) !important; }
.mx-52   { margin-inline: var(--space-52) !important; }
.mx-56   { margin-inline: var(--space-56) !important; }
.mx-60   { margin-inline: var(--space-60) !important; }
.mx-64   { margin-inline: var(--space-64) !important; }
.mx-72   { margin-inline: var(--space-72) !important; }
.mx-80   { margin-inline: var(--space-80) !important; }
.mx-96   { margin-inline: var(--space-96) !important; }
.mx-auto { margin-inline: auto !important; }

.my-0    { margin-block: var(--space-0) !important; }
.my-1    { margin-block: var(--space-1) !important; }
.my-2    { margin-block: var(--space-2) !important; }
.my-3    { margin-block: var(--space-3) !important; }
.my-4    { margin-block: var(--space-4) !important; }
.my-5    { margin-block: var(--space-5) !important; }
.my-6    { margin-block: var(--space-6) !important; }
.my-7    { margin-block: var(--space-7) !important; }
.my-8    { margin-block: var(--space-8) !important; }
.my-9    { margin-block: var(--space-9) !important; }
.my-10   { margin-block: var(--space-10) !important; }
.my-11   { margin-block: var(--space-11) !important; }
.my-12   { margin-block: var(--space-12) !important; }
.my-13   { margin-block: var(--space-13) !important; }
.my-14   { margin-block: var(--space-14) !important; }
.my-15   { margin-block: var(--space-15) !important; }
.my-16   { margin-block: var(--space-16) !important; }
.my-17   { margin-block: var(--space-17) !important; }
.my-18   { margin-block: var(--space-18) !important; }
.my-20   { margin-block: var(--space-20) !important; }
.my-24   { margin-block: var(--space-24) !important; }
.my-28   { margin-block: var(--space-28) !important; }
.my-32   { margin-block: var(--space-32) !important; }
.my-36   { margin-block: var(--space-36) !important; }
.my-40   { margin-block: var(--space-40) !important; }
.my-44   { margin-block: var(--space-44) !important; }
.my-48   { margin-block: var(--space-48) !important; }
.my-52   { margin-block: var(--space-52) !important; }
.my-56   { margin-block: var(--space-56) !important; }
.my-60   { margin-block: var(--space-60) !important; }
.my-64   { margin-block: var(--space-64) !important; }
.my-72   { margin-block: var(--space-72) !important; }
.my-80   { margin-block: var(--space-80) !important; }
.my-96   { margin-block: var(--space-96) !important; }
.my-auto { margin-block: auto !important; }

.mt-0    { margin-block-start: var(--space-0) !important; }
.mt-1    { margin-block-start: var(--space-1) !important; }
.mt-2    { margin-block-start: var(--space-2) !important; }
.mt-3    { margin-block-start: var(--space-3) !important; }
.mt-4    { margin-block-start: var(--space-4) !important; }
.mt-5    { margin-block-start: var(--space-5) !important; }
.mt-6    { margin-block-start: var(--space-6) !important; }
.mt-7    { margin-block-start: var(--space-7) !important; }
.mt-8    { margin-block-start: var(--space-8) !important; }
.mt-9    { margin-block-start: var(--space-9) !important; }
.mt-10   { margin-block-start: var(--space-10) !important; }
.mt-11   { margin-block-start: var(--space-11) !important; }
.mt-12   { margin-block-start: var(--space-12) !important; }
.mt-13   { margin-block-start: var(--space-13) !important; }
.mt-14   { margin-block-start: var(--space-14) !important; }
.mt-15   { margin-block-start: var(--space-15) !important; }
.mt-16   { margin-block-start: var(--space-16) !important; }
.mt-17   { margin-block-start: var(--space-17) !important; }
.mt-18   { margin-block-start: var(--space-18) !important; }
.mt-20   { margin-block-start: var(--space-20) !important; }
.mt-24   { margin-block-start: var(--space-24) !important; }
.mt-28   { margin-block-start: var(--space-28) !important; }
.mt-32   { margin-block-start: var(--space-32) !important; }
.mt-36   { margin-block-start: var(--space-36) !important; }
.mt-40   { margin-block-start: var(--space-40) !important; }
.mt-44   { margin-block-start: var(--space-44) !important; }
.mt-48   { margin-block-start: var(--space-48) !important; }
.mt-52   { margin-block-start: var(--space-52) !important; }
.mt-56   { margin-block-start: var(--space-56) !important; }
.mt-60   { margin-block-start: var(--space-60) !important; }
.mt-64   { margin-block-start: var(--space-64) !important; }
.mt-72   { margin-block-start: var(--space-72) !important; }
.mt-80   { margin-block-start: var(--space-80) !important; }
.mt-96   { margin-block-start: var(--space-96) !important; }

.mb-0    { margin-block-end: var(--space-0) !important; }
.mb-1    { margin-block-end: var(--space-1) !important; }
.mb-2    { margin-block-end: var(--space-2) !important; }
.mb-3    { margin-block-end: var(--space-3) !important; }
.mb-4    { margin-block-end: var(--space-4) !important; }
.mb-5    { margin-block-end: var(--space-5) !important; }
.mb-6    { margin-block-end: var(--space-6) !important; }
.mb-7    { margin-block-end: var(--space-7) !important; }
.mb-8    { margin-block-end: var(--space-8) !important; }
.mb-9    { margin-block-end: var(--space-9) !important; }
.mb-10   { margin-block-end: var(--space-10) !important; }
.mb-11   { margin-block-end: var(--space-11) !important; }
.mb-12   { margin-block-end: var(--space-12) !important; }
.mb-13   { margin-block-end: var(--space-13) !important; }
.mb-14   { margin-block-end: var(--space-14) !important; }
.mb-15   { margin-block-end: var(--space-15) !important; }
.mb-16   { margin-block-end: var(--space-16) !important; }
.mb-17   { margin-block-end: var(--space-17) !important; }
.mb-18   { margin-block-end: var(--space-18) !important; }
.mb-20   { margin-block-end: var(--space-20) !important; }
.mb-24   { margin-block-end: var(--space-24) !important; }
.mb-28   { margin-block-end: var(--space-28) !important; }
.mb-32   { margin-block-end: var(--space-32) !important; }
.mb-36   { margin-block-end: var(--space-36) !important; }
.mb-40   { margin-block-end: var(--space-40) !important; }
.mb-44   { margin-block-end: var(--space-44) !important; }
.mb-48   { margin-block-end: var(--space-48) !important; }
.mb-52   { margin-block-end: var(--space-52) !important; }
.mb-56   { margin-block-end: var(--space-56) !important; }
.mb-60   { margin-block-end: var(--space-60) !important; }
.mb-64   { margin-block-end: var(--space-64) !important; }
.mb-72   { margin-block-end: var(--space-72) !important; }
.mb-80   { margin-block-end: var(--space-80) !important; }
.mb-96   { margin-block-end: var(--space-96) !important; }

.ms-0    { margin-inline-start: var(--space-0) !important; }
.ms-1    { margin-inline-start: var(--space-1) !important; }
.ms-2    { margin-inline-start: var(--space-2) !important; }
.ms-3    { margin-inline-start: var(--space-3) !important; }
.ms-4    { margin-inline-start: var(--space-4) !important; }
.ms-5    { margin-inline-start: var(--space-5) !important; }
.ms-6    { margin-inline-start: var(--space-6) !important; }
.ms-7    { margin-inline-start: var(--space-7) !important; }
.ms-8    { margin-inline-start: var(--space-8) !important; }
.ms-9    { margin-inline-start: var(--space-9) !important; }
.ms-10   { margin-inline-start: var(--space-10) !important; }
.ms-11   { margin-inline-start: var(--space-11) !important; }
.ms-12   { margin-inline-start: var(--space-12) !important; }
.ms-13   { margin-inline-start: var(--space-13) !important; }
.ms-14   { margin-inline-start: var(--space-14) !important; }
.ms-15   { margin-inline-start: var(--space-15) !important; }
.ms-16   { margin-inline-start: var(--space-16) !important; }
.ms-17   { margin-inline-start: var(--space-17) !important; }
.ms-18   { margin-inline-start: var(--space-18) !important; }
.ms-20   { margin-inline-start: var(--space-20) !important; }
.ms-24   { margin-inline-start: var(--space-24) !important; }
.ms-28   { margin-inline-start: var(--space-28) !important; }
.ms-32   { margin-inline-start: var(--space-32) !important; }
.ms-36   { margin-inline-start: var(--space-36) !important; }
.ms-40   { margin-inline-start: var(--space-40) !important; }
.ms-44   { margin-inline-start: var(--space-44) !important; }
.ms-48   { margin-inline-start: var(--space-48) !important; }
.ms-52   { margin-inline-start: var(--space-52) !important; }
.ms-56   { margin-inline-start: var(--space-56) !important; }
.ms-60   { margin-inline-start: var(--space-60) !important; }
.ms-64   { margin-inline-start: var(--space-64) !important; }
.ms-72   { margin-inline-start: var(--space-72) !important; }
.ms-80   { margin-inline-start: var(--space-80) !important; }
.ms-96   { margin-inline-start: var(--space-96) !important; }
.ms-auto { margin-inline-start: auto !important; }

.me-0    { margin-inline-end: var(--space-0) !important; }
.me-1    { margin-inline-end: var(--space-1) !important; }
.me-2    { margin-inline-end: var(--space-2) !important; }
.me-3    { margin-inline-end: var(--space-3) !important; }
.me-4    { margin-inline-end: var(--space-4) !important; }
.me-5    { margin-inline-end: var(--space-5) !important; }
.me-6    { margin-inline-end: var(--space-6) !important; }
.me-7    { margin-inline-end: var(--space-7) !important; }
.me-8    { margin-inline-end: var(--space-8) !important; }
.me-9    { margin-inline-end: var(--space-9) !important; }
.me-10   { margin-inline-end: var(--space-10) !important; }
.me-11   { margin-inline-end: var(--space-11) !important; }
.me-12   { margin-inline-end: var(--space-12) !important; }
.me-13   { margin-inline-end: var(--space-13) !important; }
.me-14   { margin-inline-end: var(--space-14) !important; }
.me-15   { margin-inline-end: var(--space-15) !important; }
.me-16   { margin-inline-end: var(--space-16) !important; }
.me-17   { margin-inline-end: var(--space-17) !important; }
.me-18   { margin-inline-end: var(--space-18) !important; }
.me-20   { margin-inline-end: var(--space-20) !important; }
.me-24   { margin-inline-end: var(--space-24) !important; }
.me-28   { margin-inline-end: var(--space-28) !important; }
.me-32   { margin-inline-end: var(--space-32) !important; }
.me-36   { margin-inline-end: var(--space-36) !important; }
.me-40   { margin-inline-end: var(--space-40) !important; }
.me-44   { margin-inline-end: var(--space-44) !important; }
.me-48   { margin-inline-end: var(--space-48) !important; }
.me-52   { margin-inline-end: var(--space-52) !important; }
.me-56   { margin-inline-end: var(--space-56) !important; }
.me-60   { margin-inline-end: var(--space-60) !important; }
.me-64   { margin-inline-end: var(--space-64) !important; }
.me-72   { margin-inline-end: var(--space-72) !important; }
.me-80   { margin-inline-end: var(--space-80) !important; }
.me-96   { margin-inline-end: var(--space-96) !important; }
.me-auto { margin-inline-end: auto !important; }


/* ---- 5.3 Gap ---- */

.gap-0    { gap: var(--space-0) !important; }
.gap-0-5  { gap: var(--space-0-5) !important; }
.gap-1    { gap: var(--space-1) !important; }
.gap-1-5  { gap: var(--space-1-5) !important; }
.gap-2    { gap: var(--space-2) !important; }
.gap-2-5  { gap: var(--space-2-5) !important; }
.gap-3    { gap: var(--space-3) !important; }
.gap-3-5  { gap: var(--space-3-5) !important; }
.gap-4    { gap: var(--space-4) !important; }
.gap-4-5  { gap: var(--space-4-5) !important; }
.gap-5    { gap: var(--space-5) !important; }
.gap-6    { gap: var(--space-6) !important; }
.gap-7    { gap: var(--space-7) !important; }
.gap-8    { gap: var(--space-8) !important; }
.gap-9    { gap: var(--space-9) !important; }
.gap-10   { gap: var(--space-10) !important; }
.gap-11   { gap: var(--space-11) !important; }
.gap-12   { gap: var(--space-12) !important; }
.gap-13   { gap: var(--space-13) !important; }
.gap-14   { gap: var(--space-14) !important; }
.gap-15   { gap: var(--space-15) !important; }
.gap-16   { gap: var(--space-16) !important; }
.gap-17   { gap: var(--space-17) !important; }
.gap-18   { gap: var(--space-18) !important; }
.gap-20   { gap: var(--space-20) !important; }
.gap-24   { gap: var(--space-24) !important; }
.gap-28   { gap: var(--space-28) !important; }
.gap-32   { gap: var(--space-32) !important; }
.gap-36   { gap: var(--space-36) !important; }
.gap-40   { gap: var(--space-40) !important; }
.gap-44   { gap: var(--space-44) !important; }
.gap-48   { gap: var(--space-48) !important; }
.gap-52   { gap: var(--space-52) !important; }
.gap-56   { gap: var(--space-56) !important; }
.gap-60   { gap: var(--space-60) !important; }
.gap-64   { gap: var(--space-64) !important; }
.gap-72   { gap: var(--space-72) !important; }
.gap-80   { gap: var(--space-80) !important; }
.gap-96   { gap: var(--space-96) !important; }

.gap-x-0    { column-gap: var(--space-0) !important; }
.gap-x-1    { column-gap: var(--space-1) !important; }
.gap-x-2    { column-gap: var(--space-2) !important; }
.gap-x-3    { column-gap: var(--space-3) !important; }
.gap-x-4    { column-gap: var(--space-4) !important; }
.gap-x-5    { column-gap: var(--space-5) !important; }
.gap-x-6    { column-gap: var(--space-6) !important; }
.gap-x-7    { column-gap: var(--space-7) !important; }
.gap-x-8    { column-gap: var(--space-8) !important; }
.gap-x-9    { column-gap: var(--space-9) !important; }
.gap-x-10   { column-gap: var(--space-10) !important; }
.gap-x-11   { column-gap: var(--space-11) !important; }
.gap-x-12   { column-gap: var(--space-12) !important; }
.gap-x-13   { column-gap: var(--space-13) !important; }
.gap-x-14   { column-gap: var(--space-14) !important; }
.gap-x-15   { column-gap: var(--space-15) !important; }
.gap-x-16   { column-gap: var(--space-16) !important; }
.gap-x-17   { column-gap: var(--space-17) !important; }
.gap-x-18   { column-gap: var(--space-18) !important; }
.gap-x-20   { column-gap: var(--space-20) !important; }
.gap-x-24   { column-gap: var(--space-24) !important; }
.gap-x-28   { column-gap: var(--space-28) !important; }
.gap-x-32   { column-gap: var(--space-32) !important; }
.gap-x-36   { column-gap: var(--space-36) !important; }
.gap-x-40   { column-gap: var(--space-40) !important; }
.gap-x-44   { column-gap: var(--space-44) !important; }
.gap-x-48   { column-gap: var(--space-48) !important; }
.gap-x-52   { column-gap: var(--space-52) !important; }
.gap-x-56   { column-gap: var(--space-56) !important; }
.gap-x-60   { column-gap: var(--space-60) !important; }
.gap-x-64   { column-gap: var(--space-64) !important; }
.gap-x-72   { column-gap: var(--space-72) !important; }
.gap-x-80   { column-gap: var(--space-80) !important; }
.gap-x-96   { column-gap: var(--space-96) !important; }

.gap-y-0    { row-gap: var(--space-0) !important; }
.gap-y-1    { row-gap: var(--space-1) !important; }
.gap-y-2    { row-gap: var(--space-2) !important; }
.gap-y-3    { row-gap: var(--space-3) !important; }
.gap-y-4    { row-gap: var(--space-4) !important; }
.gap-y-5    { row-gap: var(--space-5) !important; }
.gap-y-6    { row-gap: var(--space-6) !important; }
.gap-y-7    { row-gap: var(--space-7) !important; }
.gap-y-8    { row-gap: var(--space-8) !important; }
.gap-y-9    { row-gap: var(--space-9) !important; }
.gap-y-10   { row-gap: var(--space-10) !important; }
.gap-y-11   { row-gap: var(--space-11) !important; }
.gap-y-12   { row-gap: var(--space-12) !important; }
.gap-y-13   { row-gap: var(--space-13) !important; }
.gap-y-14   { row-gap: var(--space-14) !important; }
.gap-y-15   { row-gap: var(--space-15) !important; }
.gap-y-16   { row-gap: var(--space-16) !important; }
.gap-y-17   { row-gap: var(--space-17) !important; }
.gap-y-18   { row-gap: var(--space-18) !important; }
.gap-y-20   { row-gap: var(--space-20) !important; }
.gap-y-24   { row-gap: var(--space-24) !important; }
.gap-y-28   { row-gap: var(--space-28) !important; }
.gap-y-32   { row-gap: var(--space-32) !important; }
.gap-y-36   { row-gap: var(--space-36) !important; }
.gap-y-40   { row-gap: var(--space-40) !important; }
.gap-y-44   { row-gap: var(--space-44) !important; }
.gap-y-48   { row-gap: var(--space-48) !important; }
.gap-y-52   { row-gap: var(--space-52) !important; }
.gap-y-56   { row-gap: var(--space-56) !important; }
.gap-y-60   { row-gap: var(--space-60) !important; }
.gap-y-64   { row-gap: var(--space-64) !important; }
.gap-y-72   { row-gap: var(--space-72) !important; }
.gap-y-80   { row-gap: var(--space-80) !important; }
.gap-y-96   { row-gap: var(--space-96) !important; }


/* ==========================================================================
   6. BORDER RADIUS UTILITY CLASSES
   ========================================================================== */

.rounded-none   { border-radius: var(--radius-none) !important; }
.rounded-sm     { border-radius: var(--radius-sm) !important; }
.rounded        { border-radius: var(--radius) !important; }
.rounded-md     { border-radius: var(--radius-md) !important; }
.rounded-lg     { border-radius: var(--radius-lg) !important; }
.rounded-xl     { border-radius: var(--radius-xl) !important; }
.rounded-2xl    { border-radius: var(--radius-2xl) !important; }
.rounded-3xl    { border-radius: var(--radius-3xl) !important; }
.rounded-4xl    { border-radius: var(--radius-4xl) !important; }
.rounded-5xl    { border-radius: var(--radius-5xl) !important; }
.rounded-full   { border-radius: var(--radius-full) !important; }

/* Top corners */
.rounded-t-none { border-start-start-radius: var(--radius-none) !important; border-start-end-radius: var(--radius-none) !important; }
.rounded-t-sm   { border-start-start-radius: var(--radius-sm) !important; border-start-end-radius: var(--radius-sm) !important; }
.rounded-t      { border-start-start-radius: var(--radius) !important; border-start-end-radius: var(--radius) !important; }
.rounded-t-md   { border-start-start-radius: var(--radius-md) !important; border-start-end-radius: var(--radius-md) !important; }
.rounded-t-lg   { border-start-start-radius: var(--radius-lg) !important; border-start-end-radius: var(--radius-lg) !important; }
.rounded-t-xl   { border-start-start-radius: var(--radius-xl) !important; border-start-end-radius: var(--radius-xl) !important; }
.rounded-t-2xl  { border-start-start-radius: var(--radius-2xl) !important; border-start-end-radius: var(--radius-2xl) !important; }
.rounded-t-3xl  { border-start-start-radius: var(--radius-3xl) !important; border-start-end-radius: var(--radius-3xl) !important; }
.rounded-t-4xl  { border-start-start-radius: var(--radius-4xl) !important; border-start-end-radius: var(--radius-4xl) !important; }
.rounded-t-5xl  { border-start-start-radius: var(--radius-5xl) !important; border-start-end-radius: var(--radius-5xl) !important; }
.rounded-t-full { border-start-start-radius: var(--radius-full) !important; border-start-end-radius: var(--radius-full) !important; }

/* Bottom corners */
.rounded-b-none { border-end-start-radius: var(--radius-none) !important; border-end-end-radius: var(--radius-none) !important; }
.rounded-b-sm   { border-end-start-radius: var(--radius-sm) !important; border-end-end-radius: var(--radius-sm) !important; }
.rounded-b      { border-end-start-radius: var(--radius) !important; border-end-end-radius: var(--radius) !important; }
.rounded-b-md   { border-end-start-radius: var(--radius-md) !important; border-end-end-radius: var(--radius-md) !important; }
.rounded-b-lg   { border-end-start-radius: var(--radius-lg) !important; border-end-end-radius: var(--radius-lg) !important; }
.rounded-b-xl   { border-end-start-radius: var(--radius-xl) !important; border-end-end-radius: var(--radius-xl) !important; }
.rounded-b-2xl  { border-end-start-radius: var(--radius-2xl) !important; border-end-end-radius: var(--radius-2xl) !important; }
.rounded-b-3xl  { border-end-start-radius: var(--radius-3xl) !important; border-end-end-radius: var(--radius-3xl) !important; }
.rounded-b-4xl  { border-end-start-radius: var(--radius-4xl) !important; border-end-end-radius: var(--radius-4xl) !important; }
.rounded-b-5xl  { border-end-start-radius: var(--radius-5xl) !important; border-end-end-radius: var(--radius-5xl) !important; }
.rounded-b-full { border-end-start-radius: var(--radius-full) !important; border-end-end-radius: var(--radius-full) !important; }

/* Start (RTL-aware: right in RTL) */
.rounded-s-none { border-start-start-radius: var(--radius-none) !important; border-end-start-radius: var(--radius-none) !important; }
.rounded-s-sm   { border-start-start-radius: var(--radius-sm) !important; border-end-start-radius: var(--radius-sm) !important; }
.rounded-s      { border-start-start-radius: var(--radius) !important; border-end-start-radius: var(--radius) !important; }
.rounded-s-md   { border-start-start-radius: var(--radius-md) !important; border-end-start-radius: var(--radius-md) !important; }
.rounded-s-lg   { border-start-start-radius: var(--radius-lg) !important; border-end-start-radius: var(--radius-lg) !important; }
.rounded-s-xl   { border-start-start-radius: var(--radius-xl) !important; border-end-start-radius: var(--radius-xl) !important; }
.rounded-s-2xl  { border-start-start-radius: var(--radius-2xl) !important; border-end-start-radius: var(--radius-2xl) !important; }
.rounded-s-3xl  { border-start-start-radius: var(--radius-3xl) !important; border-end-start-radius: var(--radius-3xl) !important; }
.rounded-s-full { border-start-start-radius: var(--radius-full) !important; border-end-start-radius: var(--radius-full) !important; }

/* End (RTL-aware: left in RTL) */
.rounded-e-none { border-start-end-radius: var(--radius-none) !important; border-end-end-radius: var(--radius-none) !important; }
.rounded-e-sm   { border-start-end-radius: var(--radius-sm) !important; border-end-end-radius: var(--radius-sm) !important; }
.rounded-e      { border-start-end-radius: var(--radius) !important; border-end-end-radius: var(--radius) !important; }
.rounded-e-md   { border-start-end-radius: var(--radius-md) !important; border-end-end-radius: var(--radius-md) !important; }
.rounded-e-lg   { border-start-end-radius: var(--radius-lg) !important; border-end-end-radius: var(--radius-lg) !important; }
.rounded-e-xl   { border-start-end-radius: var(--radius-xl) !important; border-end-end-radius: var(--radius-xl) !important; }
.rounded-e-2xl  { border-start-end-radius: var(--radius-2xl) !important; border-end-end-radius: var(--radius-2xl) !important; }
.rounded-e-3xl  { border-start-end-radius: var(--radius-3xl) !important; border-end-end-radius: var(--radius-3xl) !important; }
.rounded-e-full { border-start-end-radius: var(--radius-full) !important; border-end-end-radius: var(--radius-full) !important; }


/* ==========================================================================
   7. GRID SYSTEM
   ========================================================================== */

.container {
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--grid-margin-mobile) !important;
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--grid-margin-tablet) !important;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1440px !important;
        padding-inline: var(--grid-margin-desktop) !important;
    }
}

.grid {
    display: grid !important;
    gap: var(--grid-gutter-mobile) !important;
    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr) !important;
}

@media (min-width: 768px) {
    .grid {
        gap: var(--grid-gutter-tablet) !important;
        grid-template-columns: repeat(var(--grid-columns-tablet), 1fr) !important;
    }
}

@media (min-width: 1440px) {
    .grid {
        gap: var(--grid-gutter-desktop) !important;
        grid-template-columns: repeat(var(--grid-columns-desktop), 1fr) !important;
    }
}

/* Grid column spans — Mobile (4 columns) */
.col-span-1  { grid-column: span 1 !important; }
.col-span-2  { grid-column: span 2 !important; }
.col-span-3  { grid-column: span 3 !important; }
.col-span-4  { grid-column: span 4 !important; }
.col-span-full { grid-column: 1 / -1 !important; }

/* Grid column spans — Tablet (8 columns) */
@media (min-width: 768px) {
    .md\:col-span-1  { grid-column: span 1 !important; }
    .md\:col-span-2  { grid-column: span 2 !important; }
    .md\:col-span-3  { grid-column: span 3 !important; }
    .md\:col-span-4  { grid-column: span 4 !important; }
    .md\:col-span-5  { grid-column: span 5 !important; }
    .md\:col-span-6  { grid-column: span 6 !important; }
    .md\:col-span-7  { grid-column: span 7 !important; }
    .md\:col-span-8  { grid-column: span 8 !important; }
    .md\:col-span-full { grid-column: 1 / -1 !important; }
}

/* Grid column spans — Desktop (12 columns) */
@media (min-width: 1440px) {
    .lg\:col-span-1  { grid-column: span 1 !important; }
    .lg\:col-span-2  { grid-column: span 2 !important; }
    .lg\:col-span-3  { grid-column: span 3 !important; }
    .lg\:col-span-4  { grid-column: span 4 !important; }
    .lg\:col-span-5  { grid-column: span 5 !important; }
    .lg\:col-span-6  { grid-column: span 6 !important; }
    .lg\:col-span-7  { grid-column: span 7 !important; }
    .lg\:col-span-8  { grid-column: span 8 !important; }
    .lg\:col-span-9  { grid-column: span 9 !important; }
    .lg\:col-span-10 { grid-column: span 10 !important; }
    .lg\:col-span-11 { grid-column: span 11 !important; }
    .lg\:col-span-12 { grid-column: span 12 !important; }
    .lg\:col-span-full { grid-column: 1 / -1 !important; }
}


/* ==========================================================================
   8. WIDTH & HEIGHT UTILITIES (T-SHIRT SIZES)
   ========================================================================== */

.w-xs   { width: var(--size-xs) !important; }
.w-sm   { width: var(--size-sm) !important; }
.w-md   { width: var(--size-md) !important; }
.w-lg   { width: var(--size-lg) !important; }
.w-xl   { width: var(--size-xl) !important; }
.w-2xl  { width: var(--size-2xl) !important; }
.w-3xl  { width: var(--size-3xl) !important; }
.w-4xl  { width: var(--size-4xl) !important; }
.w-5xl  { width: var(--size-5xl) !important; }
.w-6xl  { width: var(--size-6xl) !important; }
.w-7xl  { width: var(--size-7xl) !important; }
.w-8xl  { width: var(--size-8xl) !important; }
.w-9xl  { width: var(--size-9xl) !important; }
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }

.h-xs   { height: var(--size-xs) !important; }
.h-sm   { height: var(--size-sm) !important; }
.h-md   { height: var(--size-md) !important; }
.h-lg   { height: var(--size-lg) !important; }
.h-xl   { height: var(--size-xl) !important; }
.h-2xl  { height: var(--size-2xl) !important; }
.h-3xl  { height: var(--size-3xl) !important; }
.h-4xl  { height: var(--size-4xl) !important; }
.h-5xl  { height: var(--size-5xl) !important; }
.h-6xl  { height: var(--size-6xl) !important; }
.h-7xl  { height: var(--size-7xl) !important; }
.h-8xl  { height: var(--size-8xl) !important; }
.h-9xl  { height: var(--size-9xl) !important; }
.h-full { height: 100% !important; }
.h-auto { height: auto !important; }

.min-h-xs   { min-height: var(--size-xs) !important; }
.min-h-sm   { min-height: var(--size-sm) !important; }
.min-h-md   { min-height: var(--size-md) !important; }
.min-h-lg   { min-height: var(--size-lg) !important; }
.min-h-xl   { min-height: var(--size-xl) !important; }
.min-h-2xl  { min-height: var(--size-2xl) !important; }
.min-h-3xl  { min-height: var(--size-3xl) !important; }
.min-h-4xl  { min-height: var(--size-4xl) !important; }

.max-w-xs   { max-width: var(--size-xs) !important; }
.max-w-sm   { max-width: var(--size-sm) !important; }
.max-w-md   { max-width: var(--size-md) !important; }
.max-w-lg   { max-width: var(--size-lg) !important; }
.max-w-xl   { max-width: var(--size-xl) !important; }
.max-w-2xl  { max-width: var(--size-2xl) !important; }
.max-w-3xl  { max-width: var(--size-3xl) !important; }
.max-w-4xl  { max-width: var(--size-4xl) !important; }
.max-w-5xl  { max-width: var(--size-5xl) !important; }
.max-w-6xl  { max-width: var(--size-6xl) !important; }
.max-w-7xl  { max-width: var(--size-7xl) !important; }
.max-w-8xl  { max-width: var(--size-8xl) !important; }
.max-w-9xl  { max-width: var(--size-9xl) !important; }
.max-w-full { max-width: 100% !important; }