:root {
    /* Gap scale */
    --gap-0: 0rem;
    --gap-1: 0.25rem; /* 4px */
    --gap-2: 0.5rem; /* 8px */
    --gap-3: 0.75rem; /* 12px */
    --gap-4: 1rem; /* 16px */
    --gap-6: 1.5rem; /* 24px */
    --gap-8: 2rem; /* 32px */

    /* Font sizes */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
    --text-6xl: 3.75rem; /* 60px */
}

/* Flex container */
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}

/* Direction */
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}

/* Wrap */
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}

/* Justify content */
.justify-start {
    justify-content: flex-start;
}
.justify-center {
    justify-content: center;
}
.justify-end {
    justify-content: flex-end;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-evenly {
    justify-content: space-evenly;
}

/* Align items */
.items-start {
    align-items: flex-start;
}
.items-center {
    align-items: center;
}
.items-end {
    align-items: flex-end;
}
.items-stretch {
    align-items: stretch;
}

/* Self alignment */
.self-start {
    align-self: flex-start;
}
.self-center {
    align-self: center;
}
.self-end {
    align-self: flex-end;
}

/* Flex grow/shrink */
.flex-grow {
    flex-grow: 1;
}
.flex-grow-0 {
    flex-grow: 0;
}
.flex-shrink {
    flex-shrink: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Flex presets */
.flex-1 {
    flex: 1 1 0%;
}
.flex-auto {
    flex: 1 1 auto;
}
.flex-none {
    flex: none;
}

/* Gap */
.gap-0 {
    gap: var(--gap-0);
}
.gap-1 {
    gap: var(--gap-1);
}
.gap-2 {
    gap: var(--gap-2);
}
.gap-4 {
    gap: var(--gap-4);
}
.gap-6 {
    gap: var(--gap-6);
}
.gap-8 {
    gap: var(--gap-8);
}

/* Text alignment */
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

/* Font sizes */
.text-xs {
    font-size: var(--text-xs);
}
.text-sm {
    font-size: var(--text-sm);
}
.text-base {
    font-size: var(--text-base);
}
.text-lg {
    font-size: var(--text-lg);
}
.text-xl {
    font-size: var(--text-xl);
}
.text-2xl {
    font-size: var(--text-2xl);
}
.text-3xl {
    font-size: var(--text-3xl);
}
.text-4xl {
    font-size: var(--text-4xl);
}
.text-5xl {
    font-size: var(--text-5xl);
}
.text-6xl {
    font-size: var(--text-6xl);
}

/* Max-width utilities */
.max-w-full {
    max-width: 100%;
}

/* Extra small devices and up (≥480px) */
@media (min-width: 480px) {
    .xs\:flex-row {
        flex-direction: row;
    }

    .xs\:flex-col {
        flex-direction: column;
    }
}

/* Small devices and up (≥640px) */
@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:flex-col {
        flex-direction: column;
    }
}

/* Medium devices and up (≥768px) */
@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row;
    }

    .md\:flex-col {
        flex-direction: column;
    }
}

/* Large devices and up (≥1024px) */
@media (min-width: 1024px) {
    .lg\:flex-row {
        flex-direction: row;
    }

    .lg\:flex-col {
        flex-direction: column;
    }
}