/* ===============================
   SECTION COLOR SYSTEM

   Theme system for sections using data-theme attributes.
   Usage: <section data-theme="yellow">...</section>
   
   NOTE: These are fallback styles. The JavaScript theme system
   will override these with inline styles when active.
================================ */

/* Base Section Styles */
section {
  position: relative;
}

/* Theme Variants - Only apply if JavaScript theme system hasn't set inline styles */
/* JavaScript will override these with !important inline styles */

section[data-theme="orange-blue"]:not([style*="background-color"]) {
  background: var(--color-light-blue);
  color: var(--color-orange);
}

section[data-theme="teal"]:not([style*="background-color"]) {
  background: var(--color-teal);
  color: var(--color-white);
}

section[data-theme="yellow"]:not([style*="background-color"]) {
  background: var(--color-yellow);
  color: var(--color-green);
}

section[data-theme="red"]:not([style*="background-color"]) {
  background: var(--color-red);
  color: var(--color-white);
}

section[data-theme="coral"]:not([style*="background-color"]) {
  background: var(--color-coral);
  color: var(--color-white);
}

section[data-theme="blue"]:not([style*="background-color"]) {
  background: var(--color-blue);
  color: var(--color-white);
}

section[data-theme="green"]:not([style*="background-color"]) {
  background: var(--color-green);
  color: var(--color-yellow);
}