prewind.css

/*
  ----------------------------------------
  Prewind CSS
  ----------------------------------------
*/

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    button {
        background: none;
        border: none;
        cursor: pointer;
        color: inherit;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    fieldset {
        border: none;
    }

    hr {
        border: none;
        height: 0;
        border-top: 1px solid;
        margin: 1em 0;
    }
}

@layer prewind {
    /* Container */
    .container {
        margin-inline: auto;
        padding: var(--container-padding);
        width: clamp(360px, 100%, var(--container-max));
    }

    /* Accessibility */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    .not-sr-only {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    /* Appearance */
    .appearance-none {
        appearance: none;
    }

    /* Aspect Ratio */
    .aspect-square {
        aspect-ratio: 1 / 1;
    }
    .aspect-video {
        aspect-ratio: 16 / 9;
    }
    .aspect-auto {
        aspect-ratio: auto;
    }

    /* Border Color */
    .border-brand-1 {
        border-color: var(--brand-1);
    }
    .border-brand-1-light {
        border-color: var(--brand-1-light);
    }
    .border-brand-2 {
        border-color: var(--brand-2);
    }
    .border-brand-2-light {
        border-color: var(--brand-2-light);
    }
    .border-brand-3 {
        border-color: var(--brand-3);
    }
    .border-brand-3-light {
        border-color: var(--brand-3-light);
    }
    .border-brand-4 {
        border-color: var(--brand-4);
    }
    .border-brand-4-light {
        border-color: var(--brand-4-light);
    }
    .border-black {
        border-color: var(--black);
    }
    .border-darker {
        border-color: var(--darker);
    }
    .border-dark {
        border-color: var(--dark);
    }
    .border-midtone {
        border-color: var(--midtone);
    }
    .border-light {
        border-color: var(--light);
    }
    .border-lighter {
        border-color: var(--lighter);
    }
    .border-white {
        border-color: var(--white);
    }
    .border-success {
        border-color: var(--success);
    }
    .border-success-light {
        border-color: var(--success-light);
    }
    .border-info {
        border-color: var(--info);
    }
    .border-info-light {
        border-color: var(--info-light);
    }
    .border-warning {
        border-color: var(--warning);
    }
    .border-warning-light {
        border-color: var(--warning-light);
    }
    .border-error {
        border-color: var(--error);
    }
    .border-error-light {
        border-color: var(--error-light);
    }
    .border-link {
        border-color: var(--link);
    }
    .border-highlight {
        border-color: var(--highlight);
    }

    /* Border Radius */
    .rounded-none {
        border-radius: 0;
    }
    .rounded-sm {
        border-radius: var(--rounded-sm);
    }
    .rounded {
        border-radius: var(--rounded);
    }
    .rounded-lg {
        border-radius: var(--rounded-lg);
    }
    .rounded-full {
        border-radius: 9999px;
    }

    /* Border Style */
    .border-solid {
        border-style: solid;
    }
    .border-dashed {
        border-style: dashed;
    }
    .border-dotted {
        border-style: dotted;
    }
    .border-none {
        border: none;
    }

    /* Border Width */
    .border {
        border-width: var(--border);
        border-style: solid;
    }
    .border-sm {
        border-width: var(--border-sm);
        border-style: solid;
    }
    .border-lg {
        border-width: var(--border-lg);
        border-style: solid;
    }
    .border-t {
        border-top-width: var(--border);
        border-top-style: solid;
    }
    .border-t-sm {
        border-top-width: var(--border-sm);
        border-top-style: solid;
    }
    .border-t-lg {
        border-top-width: var(--border-lg);
        border-top-style: solid;
    }
    .border-r {
        border-right-width: var(--border);
        border-right-style: solid;
    }
    .border-r-sm {
        border-right-width: var(--border-sm);
        border-right-style: solid;
    }
    .border-r-lg {
        border-right-width: var(--border-lg);
        border-right-style: solid;
    }
    .border-b {
        border-bottom-width: var(--border);
        border-bottom-style: solid;
    }
    .border-b-sm {
        border-bottom-width: var(--border-sm);
        border-bottom-style: solid;
    }
    .border-b-lg {
        border-bottom-width: var(--border-lg);
        border-bottom-style: solid;
    }
    .border-l {
        border-left-width: var(--border);
        border-left-style: solid;
    }
    .border-l-sm {
        border-left-width: var(--border-sm);
        border-left-style: solid;
    }
    .border-l-lg {
        border-left-width: var(--border-lg);
        border-left-style: solid;
    }

    /* Colors - Background */
    .bg-brand-1 {
        background: rgb(from var(--brand-1) r g b / var(--bg-opacity, 1));
    }
    .bg-brand-1-light {
        background: rgb(from var(--brand-1-light) r g b / var(--bg-opacity, 1));
    }
    .bg-brand-2 {
        background: rgb(from var(--brand-2) r g b / var(--bg-opacity, 1));
    }
    .bg-brand-2-light {
        background: rgb(from var(--brand-2-light) r g b / var(--bg-opacity, 1));
    }
    .bg-brand-3 {
        background: rgb(from var(--brand-3) r g b / var(--bg-opacity, 1));
    }
    .bg-brand-3-light {
        background: rgb(from var(--brand-3-light) r g b / var(--bg-opacity, 1));
    }
    .bg-brand-4 {
        background: rgb(from var(--brand-4) r g b / var(--bg-opacity, 1));
    }
    .bg-brand-4-light {
        background: rgb(from var(--brand-4-light) r g b / var(--bg-opacity, 1));
    }
    .bg-black {
        background: rgb(from var(--black) r g b / var(--bg-opacity, 1));
    }
    .bg-darker {
        background: rgb(from var(--darker) r g b / var(--bg-opacity, 1));
    }
    .bg-dark {
        background: rgb(from var(--dark) r g b / var(--bg-opacity, 1));
    }
    .bg-midtone {
        background: rgb(from var(--midtone) r g b / var(--bg-opacity, 1));
    }
    .bg-light {
        background: rgb(from var(--light) r g b / var(--bg-opacity, 1));
    }
    .bg-lighter {
        background: rgb(from var(--lighter) r g b / var(--bg-opacity, 1));
    }
    .bg-white {
        background: rgb(from var(--white) r g b / var(--bg-opacity, 1));
    }
    .bg-success {
        background: rgb(from var(--success) r g b / var(--bg-opacity, 1));
    }
    .bg-success-light {
        background: rgb(from var(--success-light) r g b / var(--bg-opacity, 1));
    }
    .bg-info {
        background: rgb(from var(--info) r g b / var(--bg-opacity, 1));
    }
    .bg-info-light {
        background: rgb(from var(--info-light) r g b / var(--bg-opacity, 1));
    }
    .bg-warning {
        background: rgb(from var(--warning) r g b / var(--bg-opacity, 1));
    }
    .bg-warning-light {
        background: rgb(from var(--warning-light) r g b / var(--bg-opacity, 1));
    }
    .bg-error {
        background: rgb(from var(--error) r g b / var(--bg-opacity, 1));
    }
    .bg-error-light {
        background: rgb(from var(--error-light) r g b / var(--bg-opacity, 1));
    }
    .bg-link {
        background: rgb(from var(--link) r g b / var(--bg-opacity, 1));
    }
    .bg-highlight {
        background: rgb(from var(--highlight) r g b / var(--bg-opacity, 1));
    }

    /* Background Repeat */
    .bg-repeat {
        background-repeat: repeat;
    }
    .bg-repeat-x {
        background-repeat: repeat-x;
    }
    .bg-repeat-y {
        background-repeat: repeat-y;
    }
    .bg-no-repeat {
        background-repeat: no-repeat;
    }

    /* Background Size */
    .bg-cover {
        background-size: cover;
    }
    .bg-contain {
        background-size: contain;
    }
    .bg-auto {
        background-size: auto;
    }

    /* Background Position */
    .bg-center {
        background-position: center;
    }
    .bg-top {
        background-position: top;
    }
    .bg-bottom {
        background-position: bottom;
    }
    .bg-left {
        background-position: left;
    }
    .bg-right {
        background-position: right;
    }
    .bg-left-top {
        background-position: left top;
    }
    .bg-left-bottom {
        background-position: left bottom;
    }
    .bg-right-top {
        background-position: right top;
    }
    .bg-right-bottom {
        background-position: right bottom;
    }

    /* Background Attachment */
    .bg-fixed {
        background-attachment: fixed;
    }
    .bg-local {
        background-attachment: local;
    }
    .bg-scroll {
        background-attachment: scroll;
    }

    /* Background Clip */
    .bg-clip-text {
        -webkit-background-clip: text;
        background-clip: text;
    }

    /* Colors - Text */
    .text-brand-1 {
        color: var(--brand-1);
    }
    .text-brand-1-light {
        color: var(--brand-1-light);
    }
    .text-brand-2 {
        color: var(--brand-2);
    }
    .text-brand-2-light {
        color: var(--brand-2-light);
    }
    .text-brand-3 {
        color: var(--brand-3);
    }
    .text-brand-3-light {
        color: var(--brand-3-light);
    }
    .text-brand-4 {
        color: var(--brand-4);
    }
    .text-brand-4-light {
        color: var(--brand-4-light);
    }
    .text-black {
        color: var(--black);
    }
    .text-darker {
        color: var(--darker);
    }
    .text-dark {
        color: var(--dark);
    }
    .text-midtone {
        color: var(--midtone);
    }
    .text-light {
        color: var(--light);
    }
    .text-lighter {
        color: var(--lighter);
    }
    .text-white {
        color: var(--white);
    }
    .text-success {
        color: var(--success);
    }
    .text-success-light {
        color: var(--success-light);
    }
    .text-info {
        color: var(--info);
    }
    .text-info-light {
        color: var(--info-light);
    }
    .text-warning {
        color: var(--warning);
    }
    .text-warning-light {
        color: var(--warning-light);
    }
    .text-error {
        color: var(--error);
    }
    .text-error-light {
        color: var(--error-light);
    }
    .text-link {
        color: var(--link);
    }
    .text-highlight {
        color: var(--highlight);
    }

    /* Cursor */
    .cursor-auto {
        cursor: auto;
    }
    .cursor-default {
        cursor: default;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    .cursor-wait {
        cursor: wait;
    }
    .cursor-text {
        cursor: text;
    }
    .cursor-move {
        cursor: move;
    }
    .cursor-not-allowed {
        cursor: not-allowed;
    }
    .cursor-grab {
        cursor: grab;
    }
    .cursor-grabbing {
        cursor: grabbing;
    }

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

    /* Flexbox - Container */
    .flex-row {
        flex-direction: row;
    }
    .flex-col {
        flex-direction: column;
    }
    .flex-row-reverse {
        flex-direction: row-reverse;
    }
    .flex-col-reverse {
        flex-direction: column-reverse;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .flex-nowrap {
        flex-wrap: nowrap;
    }
    .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;
    }
    .items-start {
        align-items: flex-start;
    }
    .items-center {
        align-items: center;
    }
    .items-end {
        align-items: flex-end;
    }
    .items-stretch {
        align-items: stretch;
    }

    /* Flexbox - Item */
    .self-start {
        align-self: flex-start;
    }
    .self-center {
        align-self: center;
    }
    .self-end {
        align-self: flex-end;
    }
    .self-stretch {
        align-self: stretch;
    }
    .flex-1 {
        flex: 1 1 0%;
    }
    .flex-auto {
        flex: 1 1 auto;
    }
    .flex-none {
        flex: none;
    }
    .flex-grow {
        flex-grow: 1;
    }
    .flex-grow-0 {
        flex-grow: 0;
    }
    .flex-shrink {
        flex-shrink: 1;
    }
    .flex-shrink-0 {
        flex-shrink: 0;
    }

    /* Gap */
    .gap-0 {
        gap: 0;
    }
    .gap-3xs {
        gap: var(--space-3xs);
    }
    .gap-2xs {
        gap: var(--space-2xs);
    }
    .gap-xs {
        gap: var(--space-xs);
    }
    .gap-sm {
        gap: var(--space-sm);
    }
    .gap-md {
        gap: var(--space-md);
    }
    .gap-lg {
        gap: var(--space-lg);
    }
    .gap-xl {
        gap: var(--space-xl);
    }
    .gap-2xl {
        gap: var(--space-2xl);
    }
    .gap-3xl {
        gap: var(--space-3xl);
    }
    .gap-4xl {
        gap: var(--space-4xl);
    }
    .gap-x-0 {
        column-gap: 0;
    }
    .gap-x-3xs {
        column-gap: var(--space-3xs);
    }
    .gap-x-2xs {
        column-gap: var(--space-2xs);
    }
    .gap-x-xs {
        column-gap: var(--space-xs);
    }
    .gap-x-sm {
        column-gap: var(--space-sm);
    }
    .gap-x-md {
        column-gap: var(--space-md);
    }
    .gap-x-lg {
        column-gap: var(--space-lg);
    }
    .gap-x-xl {
        column-gap: var(--space-xl);
    }
    .gap-x-2xl {
        column-gap: var(--space-2xl);
    }
    .gap-x-3xl {
        column-gap: var(--space-3xl);
    }
    .gap-x-4xl {
        column-gap: var(--space-4xl);
    }
    .gap-y-0 {
        row-gap: 0;
    }
    .gap-y-3xs {
        row-gap: var(--space-3xs);
    }
    .gap-y-2xs {
        row-gap: var(--space-2xs);
    }
    .gap-y-xs {
        row-gap: var(--space-xs);
    }
    .gap-y-sm {
        row-gap: var(--space-sm);
    }
    .gap-y-md {
        row-gap: var(--space-md);
    }
    .gap-y-lg {
        row-gap: var(--space-lg);
    }
    .gap-y-xl {
        row-gap: var(--space-xl);
    }
    .gap-y-2xl {
        row-gap: var(--space-2xl);
    }
    .gap-y-3xl {
        row-gap: var(--space-3xl);
    }
    .gap-y-4xl {
        row-gap: var(--space-4xl);
    }

    /* Height */
    .h-0 {
        height: 0;
    }
    .h-auto {
        height: auto;
    }
    .h-full {
        height: 100%;
    }
    .h-screen {
        height: 100vh;
        height: 100dvh;
    }

    /* Lists */
    .list-none {
        list-style-type: none;
    }
    .list-disc {
        list-style-type: disc;
    }
    .list-decimal {
        list-style-type: decimal;
    }
    .list-inside {
        list-style-position: inside;
    }
    .list-outside {
        list-style-position: outside;
    }

    /* Margin */
    .m-0 {
        margin: 0;
    }
    .m-3xs {
        margin: var(--space-3xs);
    }
    .m-2xs {
        margin: var(--space-2xs);
    }
    .m-xs {
        margin: var(--space-xs);
    }
    .m-sm {
        margin: var(--space-sm);
    }
    .m-md {
        margin: var(--space-md);
    }
    .m-lg {
        margin: var(--space-lg);
    }
    .m-xl {
        margin: var(--space-xl);
    }
    .m-2xl {
        margin: var(--space-2xl);
    }
    .m-3xl {
        margin: var(--space-3xl);
    }
    .m-4xl {
        margin: var(--space-4xl);
    }
    .m-full {
        margin: 100%;
    }
    .mt-0 {
        margin-top: 0;
    }
    .mt-3xs {
        margin-top: var(--space-3xs);
    }
    .mt-2xs {
        margin-top: var(--space-2xs);
    }
    .mt-xs {
        margin-top: var(--space-xs);
    }
    .mt-sm {
        margin-top: var(--space-sm);
    }
    .mt-md {
        margin-top: var(--space-md);
    }
    .mt-lg {
        margin-top: var(--space-lg);
    }
    .mt-xl {
        margin-top: var(--space-xl);
    }
    .mt-2xl {
        margin-top: var(--space-2xl);
    }
    .mt-3xl {
        margin-top: var(--space-3xl);
    }
    .mt-4xl {
        margin-top: var(--space-4xl);
    }
    .mt-full {
        margin-top: 100%;
    }
    .-mt-3xs {
        margin-top: calc(var(--space-3xs) * -1);
    }
    .-mt-2xs {
        margin-top: calc(var(--space-2xs) * -1);
    }
    .-mt-xs {
        margin-top: calc(var(--space-xs) * -1);
    }
    .-mt-sm {
        margin-top: calc(var(--space-sm) * -1);
    }
    .-mt-md {
        margin-top: calc(var(--space-md) * -1);
    }
    .-mt-lg {
        margin-top: calc(var(--space-lg) * -1);
    }
    .-mt-xl {
        margin-top: calc(var(--space-xl) * -1);
    }
    .-mt-2xl {
        margin-top: calc(var(--space-2xl) * -1);
    }
    .-mt-3xl {
        margin-top: calc(var(--space-3xl) * -1);
    }
    .-mt-4xl {
        margin-top: calc(var(--space-4xl) * -1);
    }
    .mr-0 {
        margin-right: 0;
    }
    .mr-3xs {
        margin-right: var(--space-3xs);
    }
    .mr-2xs {
        margin-right: var(--space-2xs);
    }
    .mr-xs {
        margin-right: var(--space-xs);
    }
    .mr-sm {
        margin-right: var(--space-sm);
    }
    .mr-md {
        margin-right: var(--space-md);
    }
    .mr-lg {
        margin-right: var(--space-lg);
    }
    .mr-xl {
        margin-right: var(--space-xl);
    }
    .mr-2xl {
        margin-right: var(--space-2xl);
    }
    .mr-3xl {
        margin-right: var(--space-3xl);
    }
    .mr-4xl {
        margin-right: var(--space-4xl);
    }
    .mr-full {
        margin-right: 100%;
    }
    .-mr-3xs {
        margin-right: calc(var(--space-3xs) * -1);
    }
    .-mr-2xs {
        margin-right: calc(var(--space-2xs) * -1);
    }
    .-mr-xs {
        margin-right: calc(var(--space-xs) * -1);
    }
    .-mr-sm {
        margin-right: calc(var(--space-sm) * -1);
    }
    .-mr-md {
        margin-right: calc(var(--space-md) * -1);
    }
    .-mr-lg {
        margin-right: calc(var(--space-lg) * -1);
    }
    .-mr-xl {
        margin-right: calc(var(--space-xl) * -1);
    }
    .-mr-2xl {
        margin-right: calc(var(--space-2xl) * -1);
    }
    .-mr-3xl {
        margin-right: calc(var(--space-3xl) * -1);
    }
    .-mr-4xl {
        margin-right: calc(var(--space-4xl) * -1);
    }
    .mb-0 {
        margin-bottom: 0;
    }
    .mb-3xs {
        margin-bottom: var(--space-3xs);
    }
    .mb-2xs {
        margin-bottom: var(--space-2xs);
    }
    .mb-xs {
        margin-bottom: var(--space-xs);
    }
    .mb-sm {
        margin-bottom: var(--space-sm);
    }
    .mb-md {
        margin-bottom: var(--space-md);
    }
    .mb-lg {
        margin-bottom: var(--space-lg);
    }
    .mb-xl {
        margin-bottom: var(--space-xl);
    }
    .mb-2xl {
        margin-bottom: var(--space-2xl);
    }
    .mb-3xl {
        margin-bottom: var(--space-3xl);
    }
    .mb-4xl {
        margin-bottom: var(--space-4xl);
    }
    .mb-full {
        margin-bottom: 100%;
    }
    .-mb-3xs {
        margin-bottom: calc(var(--space-3xs) * -1);
    }
    .-mb-2xs {
        margin-bottom: calc(var(--space-2xs) * -1);
    }
    .-mb-xs {
        margin-bottom: calc(var(--space-xs) * -1);
    }
    .-mb-sm {
        margin-bottom: calc(var(--space-sm) * -1);
    }
    .-mb-md {
        margin-bottom: calc(var(--space-md) * -1);
    }
    .-mb-lg {
        margin-bottom: calc(var(--space-lg) * -1);
    }
    .-mb-xl {
        margin-bottom: calc(var(--space-xl) * -1);
    }
    .-mb-2xl {
        margin-bottom: calc(var(--space-2xl) * -1);
    }
    .-mb-3xl {
        margin-bottom: calc(var(--space-3xl) * -1);
    }
    .-mb-4xl {
        margin-bottom: calc(var(--space-4xl) * -1);
    }
    .ml-0 {
        margin-left: 0;
    }
    .ml-3xs {
        margin-left: var(--space-3xs);
    }
    .ml-2xs {
        margin-left: var(--space-2xs);
    }
    .ml-xs {
        margin-left: var(--space-xs);
    }
    .ml-sm {
        margin-left: var(--space-sm);
    }
    .ml-md {
        margin-left: var(--space-md);
    }
    .ml-lg {
        margin-left: var(--space-lg);
    }
    .ml-xl {
        margin-left: var(--space-xl);
    }
    .ml-2xl {
        margin-left: var(--space-2xl);
    }
    .ml-3xl {
        margin-left: var(--space-3xl);
    }
    .ml-4xl {
        margin-left: var(--space-4xl);
    }
    .ml-full {
        margin-left: 100%;
    }
    .-ml-3xs {
        margin-left: calc(var(--space-3xs) * -1);
    }
    .-ml-2xs {
        margin-left: calc(var(--space-2xs) * -1);
    }
    .-ml-xs {
        margin-left: calc(var(--space-xs) * -1);
    }
    .-ml-sm {
        margin-left: calc(var(--space-sm) * -1);
    }
    .-ml-md {
        margin-left: calc(var(--space-md) * -1);
    }
    .-ml-lg {
        margin-left: calc(var(--space-lg) * -1);
    }
    .-ml-xl {
        margin-left: calc(var(--space-xl) * -1);
    }
    .-ml-2xl {
        margin-left: calc(var(--space-2xl) * -1);
    }
    .-ml-3xl {
        margin-left: calc(var(--space-3xl) * -1);
    }
    .-ml-4xl {
        margin-left: calc(var(--space-4xl) * -1);
    }
    .mx-0 {
        margin-left: 0;
        margin-right: 0;
    }
    .mx-3xs {
        margin-left: var(--space-3xs);
        margin-right: var(--space-3xs);
    }
    .mx-2xs {
        margin-left: var(--space-2xs);
        margin-right: var(--space-2xs);
    }
    .mx-xs {
        margin-left: var(--space-xs);
        margin-right: var(--space-xs);
    }
    .mx-sm {
        margin-left: var(--space-sm);
        margin-right: var(--space-sm);
    }
    .mx-md {
        margin-left: var(--space-md);
        margin-right: var(--space-md);
    }
    .mx-lg {
        margin-left: var(--space-lg);
        margin-right: var(--space-lg);
    }
    .mx-xl {
        margin-left: var(--space-xl);
        margin-right: var(--space-xl);
    }
    .mx-2xl {
        margin-left: var(--space-2xl);
        margin-right: var(--space-2xl);
    }
    .mx-3xl {
        margin-left: var(--space-3xl);
        margin-right: var(--space-3xl);
    }
    .mx-4xl {
        margin-left: var(--space-4xl);
        margin-right: var(--space-4xl);
    }
    .mx-full {
        margin-left: 100%;
        margin-right: 100%;
    }
    .my-0 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .my-3xs {
        margin-top: var(--space-3xs);
        margin-bottom: var(--space-3xs);
    }
    .my-2xs {
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-2xs);
    }
    .my-xs {
        margin-top: var(--space-xs);
        margin-bottom: var(--space-xs);
    }
    .my-sm {
        margin-top: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    .my-md {
        margin-top: var(--space-md);
        margin-bottom: var(--space-md);
    }
    .my-lg {
        margin-top: var(--space-lg);
        margin-bottom: var(--space-lg);
    }
    .my-xl {
        margin-top: var(--space-xl);
        margin-bottom: var(--space-xl);
    }
    .my-2xl {
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-2xl);
    }
    .my-3xl {
        margin-top: var(--space-3xl);
        margin-bottom: var(--space-3xl);
    }
    .my-4xl {
        margin-top: var(--space-4xl);
        margin-bottom: var(--space-4xl);
    }
    .my-full {
        margin-top: 100%;
        margin-bottom: 100%;
    }
    .m-auto {
        margin: auto;
    }
    .mt-auto {
        margin-top: auto;
    }
    .mr-auto {
        margin-right: auto;
    }
    .mb-auto {
        margin-bottom: auto;
    }
    .ml-auto {
        margin-left: auto;
    }
    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }
    .my-auto {
        margin-top: auto;
        margin-bottom: auto;
    }

    /* Max Height */
    .max-h-0 {
        max-height: 0;
    }
    .max-h-full {
        max-height: 100%;
    }
    .max-h-screen {
        max-height: 100vh;
        max-height: 100dvh;
    }

    /* Max Width */
    .max-w-0 {
        max-width: 0;
    }
    .max-w-full {
        max-width: 100%;
    }
    .max-w-screen {
        max-width: 100vw;
    }
    .max-w-form {
        max-width: var(--max-w-form);
    }
    .max-w-text {
        max-width: var(--max-w-text);
    }

    /* Min Height */
    .min-h-0 {
        min-height: 0;
    }
    .min-h-full {
        min-height: 100%;
    }
    .min-h-screen {
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* Min Width */
    .min-w-0 {
        min-width: 0;
    }
    .min-w-full {
        min-width: 100%;
    }
    .min-w-screen {
        min-width: 100vw;
    }

    /* Object Fit */
    .object-contain {
        object-fit: contain;
    }
    .object-cover {
        object-fit: cover;
    }
    .object-fill {
        object-fit: fill;
    }
    .object-0 {
        object-fit: none;
    }
    .object-scale-down {
        object-fit: scale-down;
    }

    /* Opacity */
    .opacity-0 {
        opacity: 0;
    }
    .opacity-10 {
        opacity: 0.1;
    }
    .opacity-20 {
        opacity: 0.2;
    }
    .opacity-30 {
        opacity: 0.3;
    }
    .opacity-40 {
        opacity: 0.4;
    }
    .opacity-50 {
        opacity: 0.5;
    }
    .opacity-60 {
        opacity: 0.6;
    }
    .opacity-70 {
        opacity: 0.7;
    }
    .opacity-80 {
        opacity: 0.8;
    }
    .opacity-90 {
        opacity: 0.9;
    }
    .opacity-100 {
        opacity: 1;
    }

    /* Outline Color */
    .outline-brand-1 {
        outline-color: var(--brand-1);
    }
    .outline-brand-1-light {
        outline-color: var(--brand-1-light);
    }
    .outline-brand-2 {
        outline-color: var(--brand-2);
    }
    .outline-brand-2-light {
        outline-color: var(--brand-2-light);
    }
    .outline-brand-3 {
        outline-color: var(--brand-3);
    }
    .outline-brand-3-light {
        outline-color: var(--brand-3-light);
    }
    .outline-brand-4 {
        outline-color: var(--brand-4);
    }
    .outline-brand-4-light {
        outline-color: var(--brand-4-light);
    }
    .outline-black {
        outline-color: var(--black);
    }
    .outline-darker {
        outline-color: var(--darker);
    }
    .outline-dark {
        outline-color: var(--dark);
    }
    .outline-midtone {
        outline-color: var(--midtone);
    }
    .outline-light {
        outline-color: var(--light);
    }
    .outline-lighter {
        outline-color: var(--lighter);
    }
    .outline-white {
        outline-color: var(--white);
    }
    .outline-success {
        outline-color: var(--success);
    }
    .outline-success-light {
        outline-color: var(--success-light);
    }
    .outline-info {
        outline-color: var(--info);
    }
    .outline-info-light {
        outline-color: var(--info-light);
    }
    .outline-warning {
        outline-color: var(--warning);
    }
    .outline-warning-light {
        outline-color: var(--warning-light);
    }
    .outline-error {
        outline-color: var(--error);
    }
    .outline-error-light {
        outline-color: var(--error-light);
    }
    .outline-link {
        outline-color: var(--link);
    }
    .outline-highlight {
        outline-color: var(--highlight);
    }

    /* Outline Style */
    .outline-solid {
        outline-style: solid;
    }
    .outline-dashed {
        outline-style: dashed;
    }
    .outline-dotted {
        outline-style: dotted;
    }
    .outline-0 {
        outline-style: none;
    }

    /* Outline Width */
    .outline {
        outline-width: var(--border);
        outline-style: solid;
    }
    .outline-sm {
        outline-width: var(--border-sm);
        outline-style: solid;
    }
    .outline-lg {
        outline-width: var(--border-lg);
        outline-style: solid;
    }

    /* Debug */
    .debug {
        outline: 2px dashed lime !important;
        outline-offset: -2px !important;
        background: rgba(0, 255, 0, 0.05) !important;
    }

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

    /* Padding */
    .p-0 {
        padding: 0;
    }
    .p-3xs {
        padding: var(--space-3xs);
    }
    .p-2xs {
        padding: var(--space-2xs);
    }
    .p-xs {
        padding: var(--space-xs);
    }
    .p-sm {
        padding: var(--space-sm);
    }
    .p-md {
        padding: var(--space-md);
    }
    .p-lg {
        padding: var(--space-lg);
    }
    .p-xl {
        padding: var(--space-xl);
    }
    .p-2xl {
        padding: var(--space-2xl);
    }
    .p-3xl {
        padding: var(--space-3xl);
    }
    .p-4xl {
        padding: var(--space-4xl);
    }
    .p-full {
        padding: 100%;
    }
    .pt-0 {
        padding-top: 0;
    }
    .pt-3xs {
        padding-top: var(--space-3xs);
    }
    .pt-2xs {
        padding-top: var(--space-2xs);
    }
    .pt-xs {
        padding-top: var(--space-xs);
    }
    .pt-sm {
        padding-top: var(--space-sm);
    }
    .pt-md {
        padding-top: var(--space-md);
    }
    .pt-lg {
        padding-top: var(--space-lg);
    }
    .pt-xl {
        padding-top: var(--space-xl);
    }
    .pt-2xl {
        padding-top: var(--space-2xl);
    }
    .pt-3xl {
        padding-top: var(--space-3xl);
    }
    .pt-4xl {
        padding-top: var(--space-4xl);
    }
    .pt-full {
        padding-top: 100%;
    }
    .pr-0 {
        padding-right: 0;
    }
    .pr-3xs {
        padding-right: var(--space-3xs);
    }
    .pr-2xs {
        padding-right: var(--space-2xs);
    }
    .pr-xs {
        padding-right: var(--space-xs);
    }
    .pr-sm {
        padding-right: var(--space-sm);
    }
    .pr-md {
        padding-right: var(--space-md);
    }
    .pr-lg {
        padding-right: var(--space-lg);
    }
    .pr-xl {
        padding-right: var(--space-xl);
    }
    .pr-2xl {
        padding-right: var(--space-2xl);
    }
    .pr-3xl {
        padding-right: var(--space-3xl);
    }
    .pr-4xl {
        padding-right: var(--space-4xl);
    }
    .pr-full {
        padding-right: 100%;
    }
    .pb-0 {
        padding-bottom: 0;
    }
    .pb-3xs {
        padding-bottom: var(--space-3xs);
    }
    .pb-2xs {
        padding-bottom: var(--space-2xs);
    }
    .pb-xs {
        padding-bottom: var(--space-xs);
    }
    .pb-sm {
        padding-bottom: var(--space-sm);
    }
    .pb-md {
        padding-bottom: var(--space-md);
    }
    .pb-lg {
        padding-bottom: var(--space-lg);
    }
    .pb-xl {
        padding-bottom: var(--space-xl);
    }
    .pb-2xl {
        padding-bottom: var(--space-2xl);
    }
    .pb-3xl {
        padding-bottom: var(--space-3xl);
    }
    .pb-4xl {
        padding-bottom: var(--space-4xl);
    }
    .pb-full {
        padding-bottom: 100%;
    }
    .pl-0 {
        padding-left: 0;
    }
    .pl-3xs {
        padding-left: var(--space-3xs);
    }
    .pl-2xs {
        padding-left: var(--space-2xs);
    }
    .pl-xs {
        padding-left: var(--space-xs);
    }
    .pl-sm {
        padding-left: var(--space-sm);
    }
    .pl-md {
        padding-left: var(--space-md);
    }
    .pl-lg {
        padding-left: var(--space-lg);
    }
    .pl-xl {
        padding-left: var(--space-xl);
    }
    .pl-2xl {
        padding-left: var(--space-2xl);
    }
    .pl-3xl {
        padding-left: var(--space-3xl);
    }
    .pl-4xl {
        padding-left: var(--space-4xl);
    }
    .pl-full {
        padding-left: 100%;
    }
    .px-0 {
        padding-left: 0;
        padding-right: 0;
    }
    .px-3xs {
        padding-left: var(--space-3xs);
        padding-right: var(--space-3xs);
    }
    .px-2xs {
        padding-left: var(--space-2xs);
        padding-right: var(--space-2xs);
    }
    .px-xs {
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }
    .px-sm {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
    .px-md {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    .px-lg {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
    .px-xl {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
    .px-2xl {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }
    .px-3xl {
        padding-left: var(--space-3xl);
        padding-right: var(--space-3xl);
    }
    .px-4xl {
        padding-left: var(--space-4xl);
        padding-right: var(--space-4xl);
    }
    .px-full {
        padding-left: 100%;
        padding-right: 100%;
    }
    .py-0 {
        padding-top: 0;
        padding-bottom: 0;
    }
    .py-3xs {
        padding-top: var(--space-3xs);
        padding-bottom: var(--space-3xs);
    }
    .py-2xs {
        padding-top: var(--space-2xs);
        padding-bottom: var(--space-2xs);
    }
    .py-xs {
        padding-top: var(--space-xs);
        padding-bottom: var(--space-xs);
    }
    .py-sm {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }
    .py-md {
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
    }
    .py-lg {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }
    .py-xl {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
    .py-2xl {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
    .py-3xl {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }
    .py-4xl {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }
    .py-full {
        padding-top: 100%;
        padding-bottom: 100%;
    }

    /* Pointer Events */
    .pointer-events-none {
        pointer-events: none;
    }
    .pointer-events-auto {
        pointer-events: auto;
    }

    /* Position */
    .static {
        position: static;
    }
    .relative {
        position: relative;
    }
    .absolute {
        position: absolute;
    }
    .fixed {
        position: fixed;
    }
    .sticky {
        position: sticky;
    }

    /* Position Insets */
    .inset-0 {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .top-0 {
        top: 0;
    }
    .right-0 {
        right: 0;
    }
    .bottom-0 {
        bottom: 0;
    }
    .left-0 {
        left: 0;
    }

    /* Resize */
    .resize-none {
        resize: none;
    }
    .resize {
        resize: both;
    }
    .resize-y {
        resize: vertical;
    }
    .resize-x {
        resize: horizontal;
    }

    /* Backdrop Blur */
    .backdrop-blur-sm {
        backdrop-filter: blur(4px);
    }
    .backdrop-blur {
        backdrop-filter: blur(8px);
    }
    .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }
    .backdrop-blur-none {
        backdrop-filter: none;
    }

    /* Background Opacity */
    .bg-opacity-0 {
        --bg-opacity: 0;
    }
    .bg-opacity-10 {
        --bg-opacity: 0.1;
    }
    .bg-opacity-20 {
        --bg-opacity: 0.2;
    }
    .bg-opacity-30 {
        --bg-opacity: 0.3;
    }
    .bg-opacity-40 {
        --bg-opacity: 0.4;
    }
    .bg-opacity-50 {
        --bg-opacity: 0.5;
    }
    .bg-opacity-60 {
        --bg-opacity: 0.6;
    }
    .bg-opacity-70 {
        --bg-opacity: 0.7;
    }
    .bg-opacity-80 {
        --bg-opacity: 0.8;
    }
    .bg-opacity-90 {
        --bg-opacity: 0.9;
    }
    .bg-opacity-100 {
        --bg-opacity: 1;
    }

    /* Shadow */
    .shadow-sm {
        box-shadow: var(--shadow-sm);
    }
    .shadow {
        box-shadow: var(--shadow);
    }
    .shadow-lg {
        box-shadow: var(--shadow-lg);
    }
    .shadow-none {
        box-shadow: none;
    }

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

    /* Font Style */
    .italic {
        font-style: italic;
    }
    .not-italic {
        font-style: normal;
    }

    /* Text Decoration */
    .underline {
        text-decoration-line: underline;
    }
    .line-through {
        text-decoration-line: line-through;
    }
    .no-underline {
        text-decoration-line: none;
    }

    /* Text Size */
    .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);
    }

    /* Line Height (Leading) */
    .leading-tight {
        line-height: 1.25;
    }
    .leading-snug {
        line-height: 1.375;
    }
    .leading-normal {
        line-height: 1.5;
    }
    .leading-relaxed {
        line-height: 1.625;
    }

    /* Letter Spacing (Tracking) */
    .tracking-tight {
        letter-spacing: -0.025em;
    }
    .tracking-normal {
        letter-spacing: 0;
    }
    .tracking-wide {
        letter-spacing: 0.025em;
    }

    /* Text Transform */
    .uppercase {
        text-transform: uppercase;
    }
    .lowercase {
        text-transform: lowercase;
    }
    .capitalize {
        text-transform: capitalize;
    }
    .normal-case {
        text-transform: none;
    }

    /* Font Family */
    .font-body {
        font-family: var(--font-body);
    }
    .font-heading {
        font-family: var(--font-heading);
    }

    /* Font Weight */
    .font-thin {
        font-weight: var(--font-thin);
    }
    .font-normal {
        font-weight: var(--font-normal);
    }
    .font-semibold {
        font-weight: var(--font-semibold);
    }
    .font-bold {
        font-weight: var(--font-bold);
    }
    .font-heavy {
        font-weight: var(--font-heavy);
    }

    /* User Select */
    .select-none {
        user-select: none;
    }
    .select-text {
        user-select: text;
    }
    .select-all {
        user-select: all;
    }
    .select-auto {
        user-select: auto;
    }

    /* Vertical Align */
    .align-baseline {
        vertical-align: baseline;
    }
    .align-top {
        vertical-align: top;
    }
    .align-middle {
        vertical-align: middle;
    }
    .align-bottom {
        vertical-align: bottom;
    }
    .align-text-top {
        vertical-align: text-top;
    }
    .align-text-bottom {
        vertical-align: text-bottom;
    }

    /* Visibility */
    .visible {
        visibility: visible;
    }
    .invisible {
        visibility: hidden;
    }

    /* White Space */
    .whitespace-normal {
        white-space: normal;
    }
    .whitespace-nowrap {
        white-space: nowrap;
    }
    .whitespace-pre {
        white-space: pre;
    }
    .whitespace-pre-wrap {
        white-space: pre-wrap;
    }

    /* Width */
    .w-0 {
        width: 0;
    }
    .w-auto {
        width: auto;
    }
    .w-full {
        width: 100%;
    }
    .w-screen {
        width: 100vw;
    }

    /* Word Break */
    .break-normal {
        overflow-wrap: normal;
        word-break: normal;
    }
    .break-words {
        overflow-wrap: break-word;
    }
    .break-all {
        word-break: break-all;
    }
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Z-Index */
    .z-0 {
        z-index: 0;
    }
    .z-10 {
        z-index: 10;
    }
    .z-20 {
        z-index: 20;
    }
    .z-30 {
        z-index: 30;
    }
    .z-40 {
        z-index: 40;
    }
    .z-50 {
        z-index: 50;
    }
    .z-60 {
        z-index: 60;
    }
    .z-70 {
        z-index: 70;
    }
    .z-80 {
        z-index: 80;
    }
    .z-90 {
        z-index: 90;
    }
    .z-100 {
        z-index: 100;
    }

    /* Revert */
    .revert {
        all: revert;
    }

    /* HOVER VARIANTS
---------------------------------- */

    /* Hover Variants - Text Colors */
    .hover\:text-brand-1:hover {
        color: var(--brand-1);
    }
    .hover\:text-brand-1-light:hover {
        color: var(--brand-1-light);
    }
    .hover\:text-brand-2:hover {
        color: var(--brand-2);
    }
    .hover\:text-brand-2-light:hover {
        color: var(--brand-2-light);
    }
    .hover\:text-brand-3:hover {
        color: var(--brand-3);
    }
    .hover\:text-brand-3-light:hover {
        color: var(--brand-3-light);
    }
    .hover\:text-brand-4:hover {
        color: var(--brand-4);
    }
    .hover\:text-brand-4-light:hover {
        color: var(--brand-4-light);
    }
    .hover\:text-black:hover {
        color: var(--black);
    }
    .hover\:text-darker:hover {
        color: var(--darker);
    }
    .hover\:text-dark:hover {
        color: var(--dark);
    }
    .hover\:text-midtone:hover {
        color: var(--midtone);
    }
    .hover\:text-light:hover {
        color: var(--light);
    }
    .hover\:text-lighter:hover {
        color: var(--lighter);
    }
    .hover\:text-white:hover {
        color: var(--white);
    }
    .hover\:text-success:hover {
        color: var(--success);
    }
    .hover\:text-success-light:hover {
        color: var(--success-light);
    }
    .hover\:text-info:hover {
        color: var(--info);
    }
    .hover\:text-info-light:hover {
        color: var(--info-light);
    }
    .hover\:text-warning:hover {
        color: var(--warning);
    }
    .hover\:text-warning-light:hover {
        color: var(--warning-light);
    }
    .hover\:text-error:hover {
        color: var(--error);
    }
    .hover\:text-error-light:hover {
        color: var(--error-light);
    }
    .hover\:text-link:hover {
        color: var(--link);
    }

    /* Hover Variants - Background Colors */
    .hover\:bg-brand-1:hover {
        background: rgb(from var(--brand-1) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-brand-1-light:hover {
        background: rgb(from var(--brand-1-light) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-brand-2:hover {
        background: rgb(from var(--brand-2) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-brand-2-light:hover {
        background: rgb(from var(--brand-2-light) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-brand-3:hover {
        background: rgb(from var(--brand-3) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-brand-3-light:hover {
        background: rgb(from var(--brand-3-light) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-brand-4:hover {
        background: rgb(from var(--brand-4) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-brand-4-light:hover {
        background: rgb(from var(--brand-4-light) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-black:hover {
        background: rgb(from var(--black) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-darker:hover {
        background: rgb(from var(--darker) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-dark:hover {
        background: rgb(from var(--dark) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-midtone:hover {
        background: rgb(from var(--midtone) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-light:hover {
        background: rgb(from var(--light) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-lighter:hover {
        background: rgb(from var(--lighter) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-white:hover {
        background: rgb(from var(--white) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-success:hover {
        background: rgb(from var(--success) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-success-light:hover {
        background: rgb(from var(--success-light) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-info:hover {
        background: rgb(from var(--info) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-info-light:hover {
        background: rgb(from var(--info-light) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-warning:hover {
        background: rgb(from var(--warning) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-warning-light:hover {
        background: rgb(from var(--warning-light) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-error:hover {
        background: rgb(from var(--error) r g b / var(--bg-opacity, 1));
    }
    .hover\:bg-error-light:hover {
        background: rgb(from var(--error-light) r g b / var(--bg-opacity, 1));
    }

    /* Hover Variants - Opacity */
    .hover\:opacity-0:hover {
        opacity: 0;
    }
    .hover\:opacity-10:hover {
        opacity: 0.1;
    }
    .hover\:opacity-20:hover {
        opacity: 0.2;
    }
    .hover\:opacity-30:hover {
        opacity: 0.3;
    }
    .hover\:opacity-40:hover {
        opacity: 0.4;
    }
    .hover\:opacity-50:hover {
        opacity: 0.5;
    }
    .hover\:opacity-60:hover {
        opacity: 0.6;
    }
    .hover\:opacity-70:hover {
        opacity: 0.7;
    }
    .hover\:opacity-80:hover {
        opacity: 0.8;
    }
    .hover\:opacity-90:hover {
        opacity: 0.9;
    }
    .hover\:opacity-100:hover {
        opacity: 1;
    }

    /* Hover Variants - Background Opacity */
    .hover\:bg-opacity-0:hover {
        --bg-opacity: 0;
    }
    .hover\:bg-opacity-10:hover {
        --bg-opacity: 0.1;
    }
    .hover\:bg-opacity-20:hover {
        --bg-opacity: 0.2;
    }
    .hover\:bg-opacity-30:hover {
        --bg-opacity: 0.3;
    }
    .hover\:bg-opacity-40:hover {
        --bg-opacity: 0.4;
    }
    .hover\:bg-opacity-50:hover {
        --bg-opacity: 0.5;
    }
    .hover\:bg-opacity-60:hover {
        --bg-opacity: 0.6;
    }
    .hover\:bg-opacity-70:hover {
        --bg-opacity: 0.7;
    }
    .hover\:bg-opacity-80:hover {
        --bg-opacity: 0.8;
    }
    .hover\:bg-opacity-90:hover {
        --bg-opacity: 0.9;
    }
    .hover\:bg-opacity-100:hover {
        --bg-opacity: 1;
    }

    /* Hover Variants - Cursor */
    .hover\:cursor-auto:hover {
        cursor: auto;
    }
    .hover\:cursor-default:hover {
        cursor: default;
    }
    .hover\:cursor-pointer:hover {
        cursor: pointer;
    }
    .hover\:cursor-wait:hover {
        cursor: wait;
    }
    .hover\:cursor-text:hover {
        cursor: text;
    }
    .hover\:cursor-move:hover {
        cursor: move;
    }
    .hover\:cursor-not-allowed:hover {
        cursor: not-allowed;
    }
    .hover\:cursor-grab:hover {
        cursor: grab;
    }
    .hover\:cursor-grabbing:hover {
        cursor: grabbing;
    }

    /* RESPONSIVE BREAKPOINT VARIANTS
---------------------------------- */

    /* sm: 640px */
    @media (min-width: 640px) {
        .sm\:hidden {
            display: none;
        }
        .sm\:block {
            display: block;
        }
        .sm\:inline-block {
            display: inline-block;
        }
        .sm\:inline {
            display: inline;
        }
        .sm\:flex {
            display: flex;
        }
        .sm\:inline-flex {
            display: inline-flex;
        }

        .sm\:flex-row {
            flex-direction: row;
        }
        .sm\:flex-col {
            flex-direction: column;
        }
        .sm\:flex-row-reverse {
            flex-direction: row-reverse;
        }
        .sm\:flex-col-reverse {
            flex-direction: column-reverse;
        }
        .sm\:flex-wrap {
            flex-wrap: wrap;
        }
        .sm\:flex-nowrap {
            flex-wrap: nowrap;
        }

        .sm\:justify-start {
            justify-content: flex-start;
        }
        .sm\:justify-center {
            justify-content: center;
        }
        .sm\:justify-end {
            justify-content: flex-end;
        }
        .sm\:justify-between {
            justify-content: space-between;
        }
        .sm\:justify-around {
            justify-content: space-around;
        }

        .sm\:items-start {
            align-items: flex-start;
        }
        .sm\:items-center {
            align-items: center;
        }
        .sm\:items-end {
            align-items: flex-end;
        }
        .sm\:items-stretch {
            align-items: stretch;
        }

        .sm\:text-left {
            text-align: left;
        }
        .sm\:text-center {
            text-align: center;
        }
        .sm\:text-right {
            text-align: right;
        }
        .sm\:text-justify {
            text-align: justify;
        }
    }

    /* md: 768px */
    @media (min-width: 768px) {
        .md\:hidden {
            display: none;
        }
        .md\:block {
            display: block;
        }
        .md\:inline-block {
            display: inline-block;
        }
        .md\:inline {
            display: inline;
        }
        .md\:flex {
            display: flex;
        }
        .md\:inline-flex {
            display: inline-flex;
        }

        .md\:flex-row {
            flex-direction: row;
        }
        .md\:flex-col {
            flex-direction: column;
        }
        .md\:flex-row-reverse {
            flex-direction: row-reverse;
        }
        .md\:flex-col-reverse {
            flex-direction: column-reverse;
        }
        .md\:flex-wrap {
            flex-wrap: wrap;
        }
        .md\:flex-nowrap {
            flex-wrap: nowrap;
        }

        .md\:justify-start {
            justify-content: flex-start;
        }
        .md\:justify-center {
            justify-content: center;
        }
        .md\:justify-end {
            justify-content: flex-end;
        }
        .md\:justify-between {
            justify-content: space-between;
        }
        .md\:justify-around {
            justify-content: space-around;
        }

        .md\:items-start {
            align-items: flex-start;
        }
        .md\:items-center {
            align-items: center;
        }
        .md\:items-end {
            align-items: flex-end;
        }
        .md\:items-stretch {
            align-items: stretch;
        }

        .md\:text-left {
            text-align: left;
        }
        .md\:text-center {
            text-align: center;
        }
        .md\:text-right {
            text-align: right;
        }
        .md\:text-justify {
            text-align: justify;
        }
    }

    /* lg: 1024px */
    @media (min-width: 1024px) {
        .lg\:hidden {
            display: none;
        }
        .lg\:block {
            display: block;
        }
        .lg\:inline-block {
            display: inline-block;
        }
        .lg\:inline {
            display: inline;
        }
        .lg\:flex {
            display: flex;
        }
        .lg\:inline-flex {
            display: inline-flex;
        }

        .lg\:flex-row {
            flex-direction: row;
        }
        .lg\:flex-col {
            flex-direction: column;
        }
        .lg\:flex-row-reverse {
            flex-direction: row-reverse;
        }
        .lg\:flex-col-reverse {
            flex-direction: column-reverse;
        }
        .lg\:flex-wrap {
            flex-wrap: wrap;
        }
        .lg\:flex-nowrap {
            flex-wrap: nowrap;
        }

        .lg\:justify-start {
            justify-content: flex-start;
        }
        .lg\:justify-center {
            justify-content: center;
        }
        .lg\:justify-end {
            justify-content: flex-end;
        }
        .lg\:justify-between {
            justify-content: space-between;
        }
        .lg\:justify-around {
            justify-content: space-around;
        }

        .lg\:items-start {
            align-items: flex-start;
        }
        .lg\:items-center {
            align-items: center;
        }
        .lg\:items-end {
            align-items: flex-end;
        }
        .lg\:items-stretch {
            align-items: stretch;
        }

        .lg\:text-left {
            text-align: left;
        }
        .lg\:text-center {
            text-align: center;
        }
        .lg\:text-right {
            text-align: right;
        }
        .lg\:text-justify {
            text-align: justify;
        }
    }

    /* xl: 1280px */
    @media (min-width: 1280px) {
        .xl\:hidden {
            display: none;
        }
        .xl\:block {
            display: block;
        }
        .xl\:inline-block {
            display: inline-block;
        }
        .xl\:inline {
            display: inline;
        }
        .xl\:flex {
            display: flex;
        }
        .xl\:inline-flex {
            display: inline-flex;
        }

        .xl\:flex-row {
            flex-direction: row;
        }
        .xl\:flex-col {
            flex-direction: column;
        }
        .xl\:flex-row-reverse {
            flex-direction: row-reverse;
        }
        .xl\:flex-col-reverse {
            flex-direction: column-reverse;
        }
        .xl\:flex-wrap {
            flex-wrap: wrap;
        }
        .xl\:flex-nowrap {
            flex-wrap: nowrap;
        }

        .xl\:justify-start {
            justify-content: flex-start;
        }
        .xl\:justify-center {
            justify-content: center;
        }
        .xl\:justify-end {
            justify-content: flex-end;
        }
        .xl\:justify-between {
            justify-content: space-between;
        }
        .xl\:justify-around {
            justify-content: space-around;
        }

        .xl\:items-start {
            align-items: flex-start;
        }
        .xl\:items-center {
            align-items: center;
        }
        .xl\:items-end {
            align-items: flex-end;
        }
        .xl\:items-stretch {
            align-items: stretch;
        }

        .xl\:text-left {
            text-align: left;
        }
        .xl\:text-center {
            text-align: center;
        }
        .xl\:text-right {
            text-align: right;
        }
        .xl\:text-justify {
            text-align: justify;
        }
    }
}