/* Size Tokens */
:root {
    /* Element Sizes */
    --size-xxs: 4px;
    --size-xs: 8px;
    --size-sm: 12px;
    --size-ms: 16px;
    --size-md: 20px;
    --size-lg: 24px;
    --size-xl: 32px;
    --size-xxl: 48px;

    /* Screen Breakpoints */
    --screen-xs: 480px;
    --screen-sm: 576px;
    --screen-md: 768px;
    --screen-lg: 992px;
    --screen-xl: 1200px;
    --screen-xxl: 1600px;

    /* Spacing - Margin */
    --margin-xxs: var(--size-xxs);
    --margin-xs: var(--size-xs);
    --margin-sm: var(--size-sm);
    --margin-ms: var(--size-ms);
    --margin-md: var(--size-md);
    --margin-lg: var(--size-lg);
    --margin-xl: var(--size-xl);
    --margin-xxl: var(--size-xxl);

    /* Spacing - Padding */
    --padding-xxs: var(--size-xxs);
    --padding-xs: var(--size-xs);
    --padding-sm: var(--size-sm);
    --padding-ms: var(--size-ms);
    --padding-md: var(--size-md);
    --padding-lg: var(--size-lg);
    --padding-xl: var(--size-xl);
    --padding-xxl: var(--size-xxl);

    /* Border Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-ms: 6px;
    --radius-lg: 8px;

    /* Shadow Tokens */
    --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    --shadow-sm: box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.08);
    --shadow-md: box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: box-shadow: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-xl: box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
    --shadow-2xl: box-shadow: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
    --shadow-flat: box-shadow: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);

    /* Blur Tokens */
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(20px);
}

/* Utility Classes - Size */
.size-xxs {
    width: var(--size-xxs);
    height: var(--size-xxs);
}

.size-xs {
    width: var(--size-xs);
    height: var(--size-xs);
}

.size-sm {
    width: var(--size-sm);
    height: var(--size-sm);
}

.size-ms {
    width: var(--size-ms);
    height: var(--size-ms);
}

.size-md {
    width: var(--size-md);
    height: var(--size-md);
}

.size-lg {
    width: var(--size-lg);
    height: var(--size-lg);
}

.size-xl {
    width: var(--size-xl);
    height: var(--size-xl);
}

.size-xxl {
    width: var(--size-xxl);
    height: var(--size-xxl);
}

/* Utility Classes - Margin */
.m-xxs {
    margin: var(--margin-xxs);
}

.m-xs {
    margin: var(--margin-xs);
}

.m-sm {
    margin: var(--margin-sm);
}

.m-ms {
    margin: var(--margin-ms);
}

.m-md {
    margin: var(--margin-md);
}

.m-lg {
    margin: var(--margin-lg);
}

.m-xl {
    margin: var(--margin-xl);
}

.m-xxl {
    margin: var(--margin-xxl);
}

/* Utility Classes - Padding */
.p-xxs {
    padding: var(--padding-xxs);
}

.p-xs {
    padding: var(--padding-xs);
}

.p-sm {
    padding: var(--padding-sm);
}

.p-ms {
    padding: var(--padding-ms);
}

.p-md {
    padding: var(--padding-md);
}

.p-lg {
    padding: var(--padding-lg);
}

.p-xl {
    padding: var(--padding-xl);
}

.p-xxl {
    padding: var(--padding-xxl);
}

/* Utility Classes - Border Radius */
.radius-xs {
    border-radius: var(--radius-xs);
}

.radius-sm {
    border-radius: var(--radius-sm);
}

.radius-ms {
    border-radius: var(--radius-ms);
}

.radius-lg {
    border-radius: var(--radius-lg);
}

/* Directional Margin Utilities */
.mt-xxs {
    margin-top: var(--margin-xxs);
}

.mr-xxs {
    margin-right: var(--margin-xxs);
}

.mb-xxs {
    margin-bottom: var(--margin-xxs);
}

.ml-xxs {
    margin-left: var(--margin-xxs);
}

.mt-xs {
    margin-top: var(--margin-xs);
}

.mr-xs {
    margin-right: var(--margin-xs);
}

.mb-xs {
    margin-bottom: var(--margin-xs);
}

.ml-xs {
    margin-left: var(--margin-xs);
}

.mt-sm {
    margin-top: var(--margin-sm);
}

.mr-sm {
    margin-right: var(--margin-sm);
}

.mb-sm {
    margin-bottom: var(--margin-sm);
}

.ml-sm {
    margin-left: var(--margin-sm);
}

.mt-ms {
    margin-top: var(--margin-ms);
}

.mr-ms {
    margin-right: var(--margin-ms);
}

.mb-ms {
    margin-bottom: var(--margin-ms);
}

.ml-ms {
    margin-left: var(--margin-ms);
}

.mt-md {
    margin-top: var(--margin-md);
}

.mr-md {
    margin-right: var(--margin-md);
}

.mb-md {
    margin-bottom: var(--margin-md);
}

.ml-md {
    margin-left: var(--margin-md);
}

.mt-lg {
    margin-top: var(--margin-lg);
}

.mr-lg {
    margin-right: var(--margin-lg);
}

.mb-lg {
    margin-bottom: var(--margin-lg);
}

.ml-lg {
    margin-left: var(--margin-lg);
}

.mt-xl {
    margin-top: var(--margin-xl);
}

.mr-xl {
    margin-right: var(--margin-xl);
}

.mb-xl {
    margin-bottom: var(--margin-xl);
}

.ml-xl {
    margin-left: var(--margin-xl);
}

.mt-xxl {
    margin-top: var(--margin-xxl);
}

.mr-xxl {
    margin-right: var(--margin-xxl);
}

.mb-xxl {
    margin-bottom: var(--margin-xxl);
}

.ml-xxl {
    margin-left: var(--margin-xxl);
}

/* Directional Padding Utilities */
.pt-xxs {
    padding-top: var(--padding-xxs);
}

.pr-xxs {
    padding-right: var(--padding-xxs);
}

.pb-xxs {
    padding-bottom: var(--padding-xxs);
}

.pl-xxs {
    padding-left: var(--padding-xxs);
}

.pt-xs {
    padding-top: var(--padding-xs);
}

.pr-xs {
    padding-right: var(--padding-xs);
}

.pb-xs {
    padding-bottom: var(--padding-xs);
}

.pl-xs {
    padding-left: var(--padding-xs);
}

.pt-sm {
    padding-top: var(--padding-sm);
}

.pr-sm {
    padding-right: var(--padding-sm);
}

.pb-sm {
    padding-bottom: var(--padding-sm);
}

.pl-sm {
    padding-left: var(--padding-sm);
}

.pt-ms {
    padding-top: var(--padding-ms);
}

.pr-ms {
    padding-right: var(--padding-ms);
}

.pb-ms {
    padding-bottom: var(--padding-ms);
}

.pl-ms {
    padding-left: var(--padding-ms);
}

.pt-md {
    padding-top: var(--padding-md);
}

.pr-md {
    padding-right: var(--padding-md);
}

.pb-md {
    padding-bottom: var(--padding-md);
}

.pl-md {
    padding-left: var(--padding-md);
}

.pt-lg {
    padding-top: var(--padding-lg);
}

.pr-lg {
    padding-right: var(--padding-lg);
}

.pb-lg {
    padding-bottom: var(--padding-lg);
}

.pl-lg {
    padding-left: var(--padding-lg);
}

.pt-xl {
    padding-top: var(--padding-xl);
}

.pr-xl {
    padding-right: var(--padding-xl);
}

.pb-xl {
    padding-bottom: var(--padding-xl);
}

.pl-xl {
    padding-left: var(--padding-xl);
}

.pt-xxl {
    padding-top: var(--padding-xxl);
}

.pr-xxl {
    padding-right: var(--padding-xxl);
}

.pb-xxl {
    padding-bottom: var(--padding-xxl);
}

.pl-xxl {
    padding-left: var(--padding-xxl);
}

/* Responsive Utilities */
@media (min-width: var(--screen-xs)) {
    .d-xs-none {
        display: none;
    }

    .d-xs-block {
        display: block;
    }

    .d-xs-flex {
        display: flex;
    }
}

@media (min-width: var(--screen-sm)) {
    .d-sm-none {
        display: none;
    }

    .d-sm-block {
        display: block;
    }

    .d-sm-flex {
        display: flex;
    }
}

@media (min-width: var(--screen-md)) {
    .d-md-none {
        display: none;
    }

    .d-md-block {
        display: block;
    }

    .d-md-flex {
        display: flex;
    }
}

@media (min-width: var(--screen-lg)) {
    .d-lg-none {
        display: none;
    }

    .d-lg-block {
        display: block;
    }

    .d-lg-flex {
        display: flex;
    }
}

@media (min-width: var(--screen-xl)) {
    .d-xl-none {
        display: none;
    }

    .d-xl-block {
        display: block;
    }

    .d-xl-flex {
        display: flex;
    }
}

@media (min-width: var(--screen-xxl)) {
    .d-xxl-none {
        display: none;
    }

    .d-xxl-block {
        display: block;
    }

    .d-xxl-flex {
        display: flex;
    }
}

/* Shadow Utility Classes */
.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

.shadow-flat {
    box-shadow: var(--shadow-flat);
}

/* Blur Utility Classes */
.blur-sm {
    backdrop-filter: var(--blur-sm);
}

.blur-md {
    backdrop-filter: var(--blur-md);
}

.blur-lg {
    backdrop-filter: var(--blur-lg);
}

.blur-xl {
    backdrop-filter: var(--blur-xl);
}