:root {
    --gray-25: hsl(210, 33%, 99%);
    --gray-50: hsl(210, 40%, 98%);
    --gray-100: hsl(210, 40%, 96%);
    --gray-200: hsl(214, 30%, 91%);
    --gray-300: hsl(213, 27%, 84%);
    --gray-400: hsl(215, 20%, 65%);
    --gray-500: hsl(215, 17%, 47%);
    --gray-600: hsl(215, 19%, 35%);
    --gray-700: hsl(215, 25%, 27%);
    --gray-800: hsl(217, 33%, 17%);
    --gray-900: hsl(222, 47%, 11%);
    --gray-950: hsl(229, 84%, 5%);

    --brand-25: #fcfaff;
    --brand-50: #faf5ff;
    --brand-100: #f3e8ff;
    --brand-200: #e9d5ff;
    --brand-300: #d8b4fe;
    --brand-400: #c084fc;
    --brand-500: #a855f7;
    --brand-600: #9333ea;
    --brand-700: #7e22ce;
    --brand-800: #6b21a8;
    --brand-900: #581c87;
    --brand-950: #3b0764;
}

.font-light {
    font-weight: 300;
}
.font-normal {
    font-weight: 400;
}

.tracking-tighter {
    letter-spacing: -0.05em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.flex {
    display: flex;
}

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

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

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

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

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

.p-2 {
    padding: 0.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.p-10 {
    padding: 2.5rem;
}

.p-12 {
    padding: 3rem;
}

.p-16 {
    padding: 4rem;
}

.p-20 {
    padding: 5rem;
}

.p-24 {
    padding: 6rem;
}

.p-32 {
    padding: 8rem;
}

.p-40 {
    padding: 10rem;
}

.p-48 {
    padding: 12rem;
}

.p-56 {
    padding: 14rem;
}

.p-64 {
    padding: 16rem;
}

.p-px {
    padding: 1px;
}

.pl-1 {
    padding-left: 0.25rem; /* 4px */
}

.pb-4 {
    padding-bottom: 1rem;
}

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

.gap-0 {
    gap: 0;
}

.gap-0\.5 {
    gap: 0.125rem;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-10 {
    gap: 2.5rem;
}

.gap-12 {
    gap: 3rem;
}