/* ======================================= */
/* 1. BASE UTILITIES (from _color.scss, _button.scss, _custom.scss, etc.) */
/* (You should insert the full content of your original color.css, button.css, etc., here) */
/* ======================================= */

/* --- Example: CSS Variables from _color.scss (ROOT) --- */
:root {
    --white: #ffffff;
    --black-100: #e0e0e0;
    --red-200: #ef9a9a;
    --red-500: #f44336;
    --blue: #2196f3;
    /* ... all your other color variables ... */

    /* Example Theme Variables from _custom.scss */
    --s-background-color: #161616;
    --s-text-color: #B59847;
}

/* --- Example: Non-Responsive Utilities --- */
.s-flex {
    display: flex;
}

.w-25 {
    width: 25%;
}

.s-bold {
    font-weight: bold;
}

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

/* Assuming s-flex is active */

/* Example: s-bg-red-200 from _color.scss */
.s-bg-red-200 {
    background-color: var(--red-200) !important;
}

/* Example: s-bg-blue */
.s-bg-blue {
    background-color: var(--blue) !important;
}


/* ========================================================================= */
/* 2. FIXED RESPONSIVE UTILITIES (Generated by _responsive.scss loops) */
/* This fixes the issue by targeting specific colors at each breakpoint.  */
/* ========================================================================= */

/* --- sm: ≥ 640px --- */
@media (min-width: 640px) {

    /* Generated Backgrounds (sm:s-bg-*) */
    .sm\:s-bg-white {
        background-color: var(--white) !important;
    }

    .sm\:s-bg-black-100 {
        background-color: var(--black-100) !important;
    }

    .sm\:s-bg-red-200 {
        background-color: var(--red-200) !important;
    }

    .sm\:s-bg-red-500 {
        background-color: var(--red-500) !important;
    }

    .sm\:s-bg-blue {
        background-color: var(--blue) !important;
    }

    /* ... all other sm:s-bg-* rules are generated here ... */

    /* Generated Text Colors (sm:s-text-*) */
    .sm\:s-text-white {
        color: var(--white) !important;
    }

    .sm\:s-text-black-100 {
        color: var(--black-100) !important;
    }

    .sm\:s-text-red-200 {
        color: var(--red-200) !important;
    }

    /* ... all other sm:s-text-* rules are generated here ... */

    /* Generated Border Colors (sm:s-border-color-*) */
    .sm\:s-border-color-white {
        border-color: var(--white) !important;
    }

    .sm\:s-border-color-red-500 {
        border-color: var(--red-500) !important;
    }

    /* ... all other sm:s-border-color-* rules are generated here ... */
}

/* --- md: ≥ 768px --- */
@media (min-width: 768px) {

    /* Generated Backgrounds (md:s-bg-*) */
    .md\:s-bg-white {
        background-color: var(--white) !important;
    }

    .md\:s-bg-black-100 {
        background-color: var(--black-100) !important;
    }

    .md\:s-bg-red-200 {
        background-color: var(--red-200) !important;
    }

    .md\:s-bg-red-500 {
        background-color: var(--red-500) !important;
    }

    .md\:s-bg-blue {
        background-color: var(--blue) !important;
    }

    /* ... all other md:s-bg-*, md:s-text-*, and md:s-border-color-* rules are generated here ... */
}

/* ... This generation logic repeats for lg, xl, and 2xl ... */


/* ======================================= */
/* 3. GENERIC MEDIA RULES (from _media.scss) */
/* These use generic variables for layout/table components. */
/* ======================================= */

/* --- sm: ≥ 640px --- */
@media (min-width: 640px) {

    [class^="sm\:s-table-border-"],
    [class*=" sm\:s-table-border-"] {
        border-collapse: collapse;
    }

    [class^="sm\:s-table-border-"] th,
    [class*=" sm\:s-table-border-"] th,
    [class^="sm\:s-table-border-"] td,
    [class*=" sm\:s-table-border-"] td {
        border: 1px solid var(--table-border-color) !important;
    }
}

/* --- md: ≥ 768px --- */
@media (min-width: 768px) {

    [class^="md\:s-table-border-"],
    [class*=" md\:s-table-border-"] {
        border-collapse: collapse;
    }

    [class^="md\:s-table-border-"] th,
    [class*=" md\:s-table-border-"] th,
    [class^="md\:s-table-border-"] td,
    [class*=" md\:s-table-border-"] td {
        border: 1px solid var(--table-border-color) !important;
    }
}