@layer bricks {
  /* ========================================
     THEME MODES - Base styles
     ======================================== */
  
  .brxe-section[data-theme-mode="light"] {
    background-color: var(--color-base-white);
    --section-heading-color: var(--color-base-950);
    --section-text-color: var(--color-base-800);
  }
  
  .brxe-section[data-theme-mode="mid"] {
    background-color: var(--color-base-100);
    --section-heading-color: var(--color-base-950);
    --section-text-color: var(--color-base-800);
  }
  
  .brxe-section[data-theme-mode="dark"] {
    background-color: var(--color-base-950);
    --section-heading-color: var(--color-base-white);
    --section-text-color: var(--color-base-300);
  }
  
  .brxe-section[data-theme-mode="primary"] {
    background-color: var(--color-brand-primary-200);
    --section-heading-color: var(--color-base-950);
    --section-text-color: var(--color-base-950);
  }
  
  .brxe-section[data-theme-mode="secondary"] {
    background-color: var(--color-brand-secondary);
    --section-heading-color: var(--color-base-950);
    --section-text-color: var(--color-base-950);
  }
  
  .brxe-section[data-theme-mode="tertiary"] {
    background-color: var(--color-brand-tertiary);
    --section-heading-color: var(--color-base-950);
    --section-text-color: var(--color-base-950);
  }
  
  .brxe-section[data-theme-mode="accent"] {
    background-color: var(--color-brand-accent);
    --section-heading-color: var(--color-base-950);
    --section-text-color: var(--color-base-950);
  }

  /* ========================================
     ACCENT COLORS - Primary
     ======================================== */
  
  .brxe-section[data-theme-mode="light"][data-accent-color="primary"] {
    --active-accent: var(--color-brand-primary);
  }
  
  .brxe-section[data-theme-mode="mid"][data-accent-color="primary"] {
    --active-accent: var(--color-brand-primary);
  }
  
  .brxe-section[data-theme-mode="dark"][data-accent-color="primary"] {
    --active-accent: var(--color-brand-primary);
  }
  
  .brxe-section[data-theme-mode="primary"][data-accent-color="primary"],
  .brxe-section[data-theme-mode="secondary"][data-accent-color="primary"],
  .brxe-section[data-theme-mode="tertiary"][data-accent-color="primary"],
  .brxe-section[data-theme-mode="accent"][data-accent-color="primary"] {
    --active-accent: var(--color-base-950);
  }

  /* ========================================
     ACCENT COLORS - Secondary
     ======================================== */
  
  .brxe-section[data-theme-mode="light"][data-accent-color="secondary"] {
    --active-accent: var(--color-brand-secondary-800);
  }
  
  .brxe-section[data-theme-mode="mid"][data-accent-color="secondary"] {
    --active-accent: var(--color-brand-secondary-800);
  }
  
  .brxe-section[data-theme-mode="dark"][data-accent-color="secondary"] {
    --active-accent: var(--color-brand-secondary);
  }
  
  .brxe-section[data-theme-mode="primary"][data-accent-color="secondary"],
  .brxe-section[data-theme-mode="secondary"][data-accent-color="secondary"],
  .brxe-section[data-theme-mode="tertiary"][data-accent-color="secondary"],
  .brxe-section[data-theme-mode="accent"][data-accent-color="secondary"] {
    --active-accent: var(--color-base-950);
  }

  /* ========================================
     ACCENT COLORS - Tertiary
     ======================================== */
  
  .brxe-section[data-theme-mode="light"][data-accent-color="tertiary"] {
    --active-accent: var(--color-brand-tertiary-800);
  }
  
  .brxe-section[data-theme-mode="mid"][data-accent-color="tertiary"] {
    --active-accent: var(--color-brand-tertiary-800);
  }
  
  .brxe-section[data-theme-mode="dark"][data-accent-color="tertiary"] {
    --active-accent: var(--color-brand-tertiary);
  }
  
  .brxe-section[data-theme-mode="primary"][data-accent-color="tertiary"],
  .brxe-section[data-theme-mode="secondary"][data-accent-color="tertiary"],
  .brxe-section[data-theme-mode="tertiary"][data-accent-color="tertiary"],
  .brxe-section[data-theme-mode="accent"][data-accent-color="tertiary"] {
    --active-accent: var(--color-base-950);
  }

  /* ========================================
     ACCENT COLORS - Accent
     ======================================== */
  
  .brxe-section[data-theme-mode="light"][data-accent-color="accent"] {
    --active-accent: var(--color-brand-accent);
  }
  
  .brxe-section[data-theme-mode="mid"][data-accent-color="accent"] {
    --active-accent: var(--color-brand-accent);
  }
  
  .brxe-section[data-theme-mode="dark"][data-accent-color="accent"] {
    --active-accent: var(--color-brand-accent);
  }
  
  .brxe-section[data-theme-mode="primary"][data-accent-color="accent"],
  .brxe-section[data-theme-mode="secondary"][data-accent-color="accent"],
  .brxe-section[data-theme-mode="tertiary"][data-accent-color="accent"],
  .brxe-section[data-theme-mode="accent"][data-accent-color="accent"] {
    --active-accent: var(--color-base-950);
  }

  /* ========================================
     ACCENT COLORS - Black & White utilities
     ======================================== */
  
  .brxe-section[data-accent-color="black"] {
    --active-accent: var(--color-base-950);
  }
  
  .brxe-section[data-theme-mode="dark"][data-accent-color="black"] {
    --active-accent: var(--color-base-300);
  }
  
  .brxe-section[data-accent-color="white"] {
    --active-accent: var(--color-base-white);
  }
  
  .brxe-section[data-theme-mode="dark"][data-accent-color="white"] {
    --active-accent: var(--color-base-white);
  }

  /* ========================================
     APPLY COLORS TO ELEMENTS
     ======================================== */
  
  .brxe-section :is(h1, h2, h3, h4, h5, h6, .section_headline) {
    color: var(--section-heading-color);
  }
  
  .brxe-section :is(p) {
    color: var(--section-text-color);
  }
  
  /* Accent color uses --active-accent */
    .brxe-section .section_title::before,
    .brxe-section .page_title::before {
  background-color: var(--active-accent);
}
  
  /* Additional utility classes for accent color */
  .brxe-section .accent-element {
    color: var(--active-accent);
  }
  
  .brxe-section .accent-bg {
    background-color: var(--active-accent);
  }
  
  .brxe-section .accent-border {
    border-color: var(--active-accent);
  }
}