/* CSS Utility Classes */
/* Uses design tokens for consistent styling */
/* Mobile-first approach with responsive variants */

/* Text Color Utilities */
.text-primary { color: var(--color-primary); }
.text-primary-light { color: var(--color-primary-light); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-deep-dark { color: var(--color-deep-dark); }
.text-glow { color: var(--color-glow); }
.text-accent-gold { color: var(--color-accent-gold-default); }
.text-white { color: var(--color-base-white); }
.text-ghost-white { color: var(--color-base-ghost-white); }
.text-light-gray { color: var(--color-base-light-gray); }
.text-mid-gray { color: var(--color-base-mid-gray); }
.text-dark { color: var(--color-base-dark); }
.text-default { color: var(--color-default-text); }
.text-default-light { color: var(--color-default-text-light); }
.text-success { color: var(--color-semantic-success); }
.text-warning { color: var(--color-semantic-warning); }
.text-error { color: var(--color-semantic-error); }

/* Background Color Utilities */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-deep-dark { background-color: var(--color-deep-dark); }
.bg-glow { background-color: var(--color-glow); }
.bg-accent-gold { background-color: var(--color-accent-gold-default); }
.bg-white { background-color: var(--color-base-white); }
.bg-ghost-white { background-color: var(--color-base-ghost-white); }
.bg-light-gray { background-color: var(--color-base-light-gray); }
.bg-mid-gray { background-color: var(--color-base-mid-gray); }
.bg-dark { background-color: var(--color-base-dark); }
.bg-success { background-color: var(--color-semantic-success); }
.bg-warning { background-color: var(--color-semantic-warning); }
.bg-error { background-color: var(--color-semantic-error); }

/* Gradient Background Utilities */
.bg-gradient-default { background: var(--gradient-default); }
.bg-gradient-button { background: var(--gradient-button-default); }
.bg-gradient-deep { background: var(--gradient-deep); }
.bg-gradient-radial-primary { background: var(--gradient-radial-primary); }
.bg-gradient-radial-dark { background: var(--gradient-radial-dark); }
.bg-gradient-accent-gold { background: var(--gradient-accent-gold); }

/* Typography Size Utilities */
.text-h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
}
.text-h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
}
.text-h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
}
.text-h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}
.text-h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
}
.text-h6 {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
}
.text-h7 {
    font-size: var(--font-size-h7);
    line-height: var(--line-height-h7);
}
.text-large {
    font-size: var(--font-size-p1-large);
    line-height: var(--line-height-p1-large);
}
.text-base {
    font-size: var(--font-size-p2-base);
    line-height: var(--line-height-p2-base);
}
.text-caption {
    font-size: var(--font-size-p3-caption);
    line-height: var(--line-height-p3-caption);
}
.text-button {
    font-size: var(--font-size-button);
    line-height: var(--line-height-button);
}

/* Font Weight Utilities */
.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* Font Family Utilities */
.font-header { font-family: var(--font-family-header); }
.font-paragraph { font-family: var(--font-family-paragraph); }
.font-caption { font-family: var(--font-family-caption); }

/* Margin Utilities */
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }
.m-10 { margin: var(--spacing-10); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }

.mt-0 { margin-top: var(--spacing-0); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-20 { margin-top: var(--spacing-20); }
.mt-24 { margin-top: var(--spacing-24); }

.mr-0 { margin-right: var(--spacing-0); }
.mr-1 { margin-right: var(--spacing-1); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-3 { margin-right: var(--spacing-3); }
.mr-4 { margin-right: var(--spacing-4); }
.mr-5 { margin-right: var(--spacing-5); }
.mr-6 { margin-right: var(--spacing-6); }
.mr-8 { margin-right: var(--spacing-8); }
.mr-10 { margin-right: var(--spacing-10); }
.mr-12 { margin-right: var(--spacing-12); }
.mr-16 { margin-right: var(--spacing-16); }
.mr-20 { margin-right: var(--spacing-20); }
.mr-24 { margin-right: var(--spacing-24); }

.mb-0 { margin-bottom: var(--spacing-0); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-20 { margin-bottom: var(--spacing-20); }
.mb-24 { margin-bottom: var(--spacing-24); }

.ml-0 { margin-left: var(--spacing-0); }
.ml-1 { margin-left: var(--spacing-1); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-3 { margin-left: var(--spacing-3); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-5 { margin-left: var(--spacing-5); }
.ml-6 { margin-left: var(--spacing-6); }
.ml-8 { margin-left: var(--spacing-8); }
.ml-10 { margin-left: var(--spacing-10); }
.ml-12 { margin-left: var(--spacing-12); }
.ml-16 { margin-left: var(--spacing-16); }
.ml-20 { margin-left: var(--spacing-20); }
.ml-24 { margin-left: var(--spacing-24); }

/* Padding Utilities */
.p-0 { padding: var(--spacing-0); }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }
.p-10 { padding: var(--spacing-10); }
.p-12 { padding: var(--spacing-12); }
.p-16 { padding: var(--spacing-16); }
.p-20 { padding: var(--spacing-20); }
.p-24 { padding: var(--spacing-24); }
.p-card { padding: var(--spacing-card-padding); }
.p-section { padding: var(--spacing-section-padding); }

.pt-0 { padding-top: var(--spacing-0); }
.pt-1 { padding-top: var(--spacing-1); }
.pt-2 { padding-top: var(--spacing-2); }
.pt-3 { padding-top: var(--spacing-3); }
.pt-4 { padding-top: var(--spacing-4); }
.pt-5 { padding-top: var(--spacing-5); }
.pt-6 { padding-top: var(--spacing-6); }
.pt-8 { padding-top: var(--spacing-8); }
.pt-10 { padding-top: var(--spacing-10); }
.pt-12 { padding-top: var(--spacing-12); }
.pt-16 { padding-top: var(--spacing-16); }
.pt-20 { padding-top: var(--spacing-20); }
.pt-24 { padding-top: var(--spacing-24); }

.pr-0 { padding-right: var(--spacing-0); }
.pr-1 { padding-right: var(--spacing-1); }
.pr-2 { padding-right: var(--spacing-2); }
.pr-3 { padding-right: var(--spacing-3); }
.pr-4 { padding-right: var(--spacing-4); }
.pr-5 { padding-right: var(--spacing-5); }
.pr-6 { padding-right: var(--spacing-6); }
.pr-8 { padding-right: var(--spacing-8); }
.pr-10 { padding-right: var(--spacing-10); }
.pr-12 { padding-right: var(--spacing-12); }
.pr-16 { padding-right: var(--spacing-16); }
.pr-20 { padding-right: var(--spacing-20); }
.pr-24 { padding-right: var(--spacing-24); }

.pb-0 { padding-bottom: var(--spacing-0); }
.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-5 { padding-bottom: var(--spacing-5); }
.pb-6 { padding-bottom: var(--spacing-6); }
.pb-8 { padding-bottom: var(--spacing-8); }
.pb-10 { padding-bottom: var(--spacing-10); }
.pb-12 { padding-bottom: var(--spacing-12); }
.pb-16 { padding-bottom: var(--spacing-16); }
.pb-20 { padding-bottom: var(--spacing-20); }
.pb-24 { padding-bottom: var(--spacing-24); }

.pl-0 { padding-left: var(--spacing-0); }
.pl-1 { padding-left: var(--spacing-1); }
.pl-2 { padding-left: var(--spacing-2); }
.pl-3 { padding-left: var(--spacing-3); }
.pl-4 { padding-left: var(--spacing-4); }
.pl-5 { padding-left: var(--spacing-5); }
.pl-6 { padding-left: var(--spacing-6); }
.pl-8 { padding-left: var(--spacing-8); }
.pl-10 { padding-left: var(--spacing-10); }
.pl-12 { padding-left: var(--spacing-12); }
.pl-16 { padding-left: var(--spacing-16); }
.pl-20 { padding-left: var(--spacing-20); }
.pl-24 { padding-left: var(--spacing-24); }

/* Gap Utilities (for flexbox/grid) */
.gap-0 { gap: var(--spacing-0); }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
.gap-10 { gap: var(--spacing-10); }
.gap-12 { gap: var(--spacing-12); }
.gap-16 { gap: var(--spacing-16); }
.gap-20 { gap: var(--spacing-20); }
.gap-24 { gap: var(--spacing-24); }

/* Border Radius Utilities */
.rounded-none { border-radius: var(--radius-none); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Border Width Utilities */
.border-thin { border-width: var(--border-width-thin); }
.border-medium { border-width: var(--border-width-medium); }
.border-thick { border-width: var(--border-width-thick); }
.border-heavy { border-width: var(--border-width-heavy); }

/* Border Width - Top */
.border-t-thin { border-top-width: var(--border-width-thin); }
.border-t-medium { border-top-width: var(--border-width-medium); }
.border-t-thick { border-top-width: var(--border-width-thick); }
.border-t-heavy { border-top-width: var(--border-width-heavy); }

/* Border Width - Right */
.border-r-thin { border-right-width: var(--border-width-thin); }
.border-r-medium { border-right-width: var(--border-width-medium); }
.border-r-thick { border-right-width: var(--border-width-thick); }
.border-r-heavy { border-right-width: var(--border-width-heavy); }

/* Border Width - Bottom */
.border-b-thin { border-bottom-width: var(--border-width-thin); }
.border-b-medium { border-bottom-width: var(--border-width-medium); }
.border-b-thick { border-bottom-width: var(--border-width-thick); }
.border-b-heavy { border-bottom-width: var(--border-width-heavy); }

/* Border Width - Left */
.border-l-thin { border-left-width: var(--border-width-thin); }
.border-l-medium { border-left-width: var(--border-width-medium); }
.border-l-thick { border-left-width: var(--border-width-thick); }
.border-l-heavy { border-left-width: var(--border-width-heavy); }

/* Shadow Utilities */
.shadow-none { box-shadow: var(--shadow-none); }
.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-card { box-shadow: var(--shadow-card); }
.shadow-button { box-shadow: var(--shadow-button); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* Responsive Utility Class Variants */
/* Mobile-first approach with breakpoint-specific utilities */

/* Display utilities with responsive variants */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Tablet variants - 768px+ */
@media (min-width: 768px) {
    .hidden-tablet { display: none; }
    .block-tablet { display: block; }
    .inline-block-tablet { display: inline-block; }
    .flex-tablet { display: flex; }
    .inline-flex-tablet { display: inline-flex; }
    .grid-tablet { display: grid; }

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

    /* Spacing tablet variants */
    .m-0-tablet { margin: var(--spacing-0); }
    .m-2-tablet { margin: var(--spacing-2); }
    .m-4-tablet { margin: var(--spacing-4); }
    .m-6-tablet { margin: var(--spacing-6); }

    .p-0-tablet { padding: var(--spacing-0); }
    .p-2-tablet { padding: var(--spacing-2); }
    .p-4-tablet { padding: var(--spacing-4); }
    .p-6-tablet { padding: var(--spacing-6); }
}

/* Desktop variants - 1280px+ */
@media (min-width: 1280px) {
    .hidden-desktop { display: none; }
    .block-desktop { display: block; }
    .inline-block-desktop { display: inline-block; }
    .flex-desktop { display: flex; }
    .inline-flex-desktop { display: inline-flex; }
    .grid-desktop { display: grid; }

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

    /* Spacing desktop variants */
    .m-0-desktop { margin: var(--spacing-0); }
    .m-2-desktop { margin: var(--spacing-2); }
    .m-4-desktop { margin: var(--spacing-4); }
    .m-6-desktop { margin: var(--spacing-6); }

    .p-0-desktop { padding: var(--spacing-0); }
    .p-2-desktop { padding: var(--spacing-2); }
    .p-4-desktop { padding: var(--spacing-4); }
    .p-6-desktop { padding: var(--spacing-6); }
}

/* Wide variants - 1440px+ */
@media (min-width: 1440px) {
    .hidden-wide { display: none; }
    .block-wide { display: block; }
    .inline-block-wide { display: inline-block; }
    .flex-wide { display: flex; }
    .inline-flex-wide { display: inline-flex; }
    .grid-wide { display: grid; }

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

    /* Spacing wide variants */
    .m-0-wide { margin: var(--spacing-0); }
    .m-2-wide { margin: var(--spacing-2); }
    .m-4-wide { margin: var(--spacing-4); }
    .m-6-wide { margin: var(--spacing-6); }

    .p-0-wide { padding: var(--spacing-0); }
    .p-2-wide { padding: var(--spacing-2); }
    .p-4-wide { padding: var(--spacing-4); }
    .p-6-wide { padding: var(--spacing-6); }
}

/* Mobile-only utilities (max-width: 767px) */
@media (max-width: 767px) {
    .hidden-mobile { display: none; }
    .block-mobile { display: block; }
    .inline-block-mobile { display: inline-block; }
    .flex-mobile { display: flex; }
    .inline-flex-mobile { display: inline-flex; }
    .grid-mobile { display: grid; }

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

    /* Spacing mobile variants */
    .m-0-mobile { margin: var(--spacing-0); }
    .m-2-mobile { margin: var(--spacing-2); }
    .m-4-mobile { margin: var(--spacing-4); }
    .m-6-mobile { margin: var(--spacing-6); }

    .p-0-mobile { padding: var(--spacing-0); }
    .p-2-mobile { padding: var(--spacing-2); }
    .p-4-mobile { padding: var(--spacing-4); }
    .p-6-mobile { padding: var(--spacing-6); }
}