@layer bricks {
    /* ================================================
     SECTION THEME MODES
     Usage: data-theme-mode="light|mid|dark|branded"
     Apply to .brxe-section or any .color-theme element
     ================================================ */

    /* -- Light ---------------------------------------- */
    :is(.brxe-section, .color-theme)[data-theme-mode='light'] {
        background-color: var(--color-base-l-4);
        --section-bg: var(--color-base-l-4);
        --section-title-color: var(--color-brand-primary);
        --section-heading-color: var(--color-base-d-4);
        --section-text-color: var(--color-base-d-3);
        --section-highlight-color: var(--color-brand-primary);
        --section-card-bg: var(--color-base-l-3);
        --section-card-border: var(--color-base-l-2);
        --divider: var(--color-base-d-4)
    }

    /* -- Mid ------------------------------------------ */
    :is(.brxe-section, .color-theme)[data-theme-mode='mid'] {
        background-color: var(--color-base-l-3);
        --section-bg: var(--color-base-l-3);
        --section-title-color: var(--color-base-d-4);
        --section-heading-color: var(--color-base-d-4);
        --section-text-color: var(--color-base-d-3);
        --section-highlight-color: var(--color-brand-primary);
        --section-card-bg: var(--color-base-l-4);
        --section-card-border: var(--color-base-l-2);
        --divider: var(--color-base-d-4)
    }

    /* -- Dark ----------------------------------------- */
    :is(.brxe-section, .color-theme)[data-theme-mode='dark'] {
        background-color: var(--color-base-d-4);
        --section-bg: var(--color-brand-primary-d-4);
        --section-title-color: var(--color-brand-primary-l-2);
        --section-heading-color: var(--color-base-l-4);
        --section-text-color: var(--color-base-l-3);
        --section-highlight-color: var(--color-brand-primary-l-2);
        --section-card-bg: var(--color-base-d-3);
        --section-card-border: var(--color-base-d-2);
        --divider: var(--color-base-l-4)
    }

    /* -- Branded ----------------------- */
    :is(.brxe-section, .color-theme)[data-theme-mode='branded'] {
        background-color: var(--color-brand-primary);
        --section-bg: var(--color-brand-primary);
        --section-title-color: var(--color-base-l-4);
        --section-heading-color: var(--color-base-l-4);
        --section-text-color: var(--color-brand-primary-l-3);
        --section-highlight-color: var(--color-brand-primary-l-3);
        --section-card-bg: var(--color-brand-primary-d-4);
        --section-card-border: var(--color-brand-primary-d-3);
    }

    /* ================================================
     APPLY TOKENS TO ELEMENTS
     ================================================ */

    /* Section title (eyebrow / label above headline) */
    :is(.brxe-section, .color-theme) :is(h1, h2, h3, h4, h5, h6).section_title,
    :is(.brxe-section, .color-theme) .section_title,
    :is(.brxe-section, .color-theme) .hero_title {
        color: var(--section-title-color) !important;
    }

    /* Headings */
    :is(.brxe-section, .color-theme)
        :is(h1, h2, h3, h4, h5, h6, .section_headline) {
        color: var(--section-heading-color) !important;
    }

    /* Body text */
    :is(.brxe-section, .color-theme) p {
        color: var(--section-text-color);
    }

    /* Highlight text */
    :is(.brxe-section, .color-theme) .text-highlight {
        color: var(--section-highlight-color);
    }

    /* Cards */
    .brxe-section .card_wrapper {
        background-color: var(--section-card-bg);
        border-color: var(--section-card-border);
    }

    /* Card text inherits section tokens */
    :is(.brxe-section, .color-theme) .card_wrapper :is(h1, h2, h3, h4, h5, h6) {
        color: var(--section-heading-color);
    }

    :is(.brxe-section, .color-theme) .card_wrapper p {
        color: var(--section-text-color);
    }

    :is(.brxe-section, .color-theme)[data-theme-mode='dark'] .card_wrapper p,
    :is(.brxe-section, .color-theme)[data-theme-mode='branded'] .card_wrapper p,
    .color-theme[data-theme-mode='dark'] p,
    .color-theme[data-theme-mode='branded'] p {
        color: var(--color-base-l-4) !important;
    }

    /* Button text — overrides Bricks inline text-link color */
    :is(.brxe-section, .color-theme) .btn_primary.brxe-text-link {
        color: var(--btn-text) !important;
    }

    /* -- Slider theme tokens -------------------------- */
    :is(.brxe-section, .color-theme)[data-theme-mode='light'] {
    --slider-nav-bg: var(--color-base-l-3);
    --slider-nav-arrow-color: var(--color-base-d-4);
    --slider-pagination-bg: var(--color-base-l-3);
    }

    :is(.brxe-section, .color-theme)[data-theme-mode='mid'] {
    --slider-nav-bg: var(--color-base-l-4);
    --slider-nav-arrow-color: var(--color-base-d-4);
    --slider-pagination-bg: var(--color-base-l-4);
    }

    :is(.brxe-section, .color-theme)[data-theme-mode='dark'] {
    --slider-nav-bg: var(--color-base-l-4);
    --slider-nav-arrow-color: var(--color-base-d-4);
    --slider-pagination-bg: var(--color-base-d-3);
    }
}