/* ============================================================================
   Drolosoft - Contextual Backgrounds
   Naming: bg-{section} — named by identity, not by visual effect
   Each class is theme-aware (light + dark + auto)

   Palette (top → bottom on homepage):
   1. Drolosoft  — Emerald green  rgb(55,185,65) / rgb(30,140,40)
   2. Slogan     — Warm gold      rgb(190,165,50) / rgb(150,125,25)
   3. Tools      — Burnt orange   rgb(210,120,40) / rgb(170,85,20)
   4. Apps       — Teal           rgb(0,180,170) / rgb(0,140,130)
   5. Web        — Ocean blue     rgb(50,110,190) / rgb(30,80,150)
   ============================================================================ */

/* --------------------------------------------------------------------------
   bg-drolosoft — Section: Drolosoft
   Visual: emerald green sunrise glow (nearly transparent)
   Used by: homepage hero + footer (always tied), about, contact, legal headers
   -------------------------------------------------------------------------- */
:root .bg-drolosoft,
[data-theme="light"] .bg-drolosoft {
  background-image:
    linear-gradient(180deg,
      rgba(190, 240, 195, 0.15) 0%,
      rgba(120, 210, 130, 0.12) 25%,
      rgba(60, 190, 70, 0.08) 50%,
      rgba(40, 160, 50, 0.06) 75%,
      rgba(30, 140, 40, 0.04) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(80, 200, 90, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(40, 160, 50, 0.05) 0%, transparent 45%);
}

[data-theme="dark"] .bg-drolosoft {
  background-image:
    linear-gradient(180deg,
      rgba(30, 140, 40, 0.1) 0%,
      rgba(40, 160, 50, 0.08) 25%,
      rgba(30, 120, 35, 0.06) 50%,
      rgba(20, 80, 25, 0.04) 75%,
      rgba(10, 50, 15, 0.03) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(55, 185, 65, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(40, 160, 50, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(30, 140, 40, 0.04) 0%, transparent 45%);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .bg-drolosoft {
    background-image:
      linear-gradient(180deg,
        rgba(190, 240, 195, 0.15) 0%,
        rgba(120, 210, 130, 0.12) 25%,
        rgba(60, 190, 70, 0.08) 50%,
        rgba(40, 160, 50, 0.06) 75%,
        rgba(30, 140, 40, 0.04) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(80, 200, 90, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(40, 160, 50, 0.05) 0%, transparent 45%);
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .bg-drolosoft {
    background-image:
      linear-gradient(180deg,
        rgba(30, 140, 40, 0.1) 0%,
        rgba(40, 160, 50, 0.08) 25%,
        rgba(30, 120, 35, 0.06) 50%,
        rgba(20, 80, 25, 0.04) 75%,
        rgba(10, 50, 15, 0.03) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(55, 185, 65, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(40, 160, 50, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(30, 140, 40, 0.04) 0%, transparent 45%);
  }
}

/* --------------------------------------------------------------------------
   bg-slogan — Section: Slogan
   Visual: warm gold sunrise glow (nearly transparent)
   Used by: homepage manifesto strip
   -------------------------------------------------------------------------- */
:root .bg-slogan,
[data-theme="light"] .bg-slogan {
  background-image:
    linear-gradient(180deg,
      rgba(245, 235, 190, 0.15) 0%,
      rgba(220, 200, 120, 0.12) 25%,
      rgba(195, 170, 60, 0.08) 50%,
      rgba(170, 145, 40, 0.06) 75%,
      rgba(150, 125, 25, 0.04) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(200, 180, 70, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(170, 145, 40, 0.05) 0%, transparent 45%);
}

[data-theme="dark"] .bg-slogan {
  background-image:
    linear-gradient(180deg,
      rgba(150, 125, 25, 0.1) 0%,
      rgba(170, 145, 40, 0.08) 25%,
      rgba(130, 110, 20, 0.06) 50%,
      rgba(90, 75, 15, 0.04) 75%,
      rgba(60, 50, 10, 0.03) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(190, 165, 50, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(170, 145, 40, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(150, 125, 25, 0.04) 0%, transparent 45%);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .bg-slogan {
    background-image:
      linear-gradient(180deg,
        rgba(245, 235, 190, 0.15) 0%,
        rgba(220, 200, 120, 0.12) 25%,
        rgba(195, 170, 60, 0.08) 50%,
        rgba(170, 145, 40, 0.06) 75%,
        rgba(150, 125, 25, 0.04) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(200, 180, 70, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(170, 145, 40, 0.05) 0%, transparent 45%);
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .bg-slogan {
    background-image:
      linear-gradient(180deg,
        rgba(150, 125, 25, 0.1) 0%,
        rgba(170, 145, 40, 0.08) 25%,
        rgba(130, 110, 20, 0.06) 50%,
        rgba(90, 75, 15, 0.04) 75%,
        rgba(60, 50, 10, 0.03) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(190, 165, 50, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(170, 145, 40, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(150, 125, 25, 0.04) 0%, transparent 45%);
  }
}

/* --------------------------------------------------------------------------
   bg-tools — Section: Tools
   Visual: burnt orange sunrise glow (nearly transparent)
   Base colors: rgb(210,120,40) / rgb(170,85,20)
   Used by: homepage #developer-tools section, cmux-resurrect, immich-photo-manager
   -------------------------------------------------------------------------- */
:root .bg-tools,
[data-theme="light"] .bg-tools {
  background-image:
    linear-gradient(180deg,
      rgba(250, 225, 190, 0.15) 0%,
      rgba(240, 185, 120, 0.12) 25%,
      rgba(220, 145, 60, 0.08) 50%,
      rgba(195, 105, 30, 0.06) 75%,
      rgba(170, 85, 20, 0.04) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(230, 150, 60, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(195, 105, 30, 0.05) 0%, transparent 45%);
}

[data-theme="dark"] .bg-tools {
  background-image:
    linear-gradient(180deg,
      rgba(170, 85, 20, 0.1) 0%,
      rgba(195, 105, 30, 0.08) 25%,
      rgba(150, 75, 15, 0.06) 50%,
      rgba(110, 55, 10, 0.04) 75%,
      rgba(70, 35, 5, 0.03) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(210, 120, 40, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(195, 105, 30, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(170, 85, 20, 0.04) 0%, transparent 45%);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .bg-tools {
    background-image:
      linear-gradient(180deg,
        rgba(250, 225, 190, 0.15) 0%,
        rgba(240, 185, 120, 0.12) 25%,
        rgba(220, 145, 60, 0.08) 50%,
        rgba(195, 105, 30, 0.06) 75%,
        rgba(170, 85, 20, 0.04) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(230, 150, 60, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(195, 105, 30, 0.05) 0%, transparent 45%);
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .bg-tools {
    background-image:
      linear-gradient(180deg,
        rgba(170, 85, 20, 0.1) 0%,
        rgba(195, 105, 30, 0.08) 25%,
        rgba(150, 75, 15, 0.06) 50%,
        rgba(110, 55, 10, 0.04) 75%,
        rgba(70, 35, 5, 0.03) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(210, 120, 40, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(195, 105, 30, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(170, 85, 20, 0.04) 0%, transparent 45%);
  }
}

/* Footer uses bg-drolosoft — hero and footer are always tied (rule #1) */

/* --------------------------------------------------------------------------
   bg-apps — Section: Apps
   Visual: teal sunrise glow (nearly transparent)
   Base colors: rgb(0,180,170) / rgb(0,140,130)
   Used by: homepage #apps section, commando
   -------------------------------------------------------------------------- */
:root .bg-apps,
[data-theme="light"] .bg-apps {
  background-image:
    linear-gradient(180deg,
      rgba(200, 245, 243, 0.15) 0%,
      rgba(130, 220, 215, 0.12) 25%,
      rgba(40, 190, 180, 0.08) 50%,
      rgba(0, 160, 150, 0.06) 75%,
      rgba(0, 140, 130, 0.04) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(60, 200, 190, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(0, 160, 150, 0.05) 0%, transparent 45%);
}

[data-theme="dark"] .bg-apps {
  background-image:
    linear-gradient(180deg,
      rgba(0, 140, 130, 0.1) 0%,
      rgba(0, 160, 150, 0.08) 25%,
      rgba(0, 120, 110, 0.06) 50%,
      rgba(0, 80, 75, 0.04) 75%,
      rgba(0, 50, 45, 0.03) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(0, 180, 170, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0, 160, 150, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(0, 140, 130, 0.04) 0%, transparent 45%);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .bg-apps {
    background-image:
      linear-gradient(180deg,
        rgba(200, 245, 243, 0.15) 0%,
        rgba(130, 220, 215, 0.12) 25%,
        rgba(40, 190, 180, 0.08) 50%,
        rgba(0, 160, 150, 0.06) 75%,
        rgba(0, 140, 130, 0.04) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(60, 200, 190, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(0, 160, 150, 0.05) 0%, transparent 45%);
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .bg-apps {
    background-image:
      linear-gradient(180deg,
        rgba(0, 140, 130, 0.1) 0%,
        rgba(0, 160, 150, 0.08) 25%,
        rgba(0, 120, 110, 0.06) 50%,
        rgba(0, 80, 75, 0.04) 75%,
        rgba(0, 50, 45, 0.03) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(0, 180, 170, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(0, 160, 150, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(0, 140, 130, 0.04) 0%, transparent 45%);
  }
}

/* --------------------------------------------------------------------------
   bg-web — Section: Web
   Visual: ocean blue sunrise glow (nearly transparent)
   Base colors: rgb(50,110,190) / rgb(30,80,150)
   Used by: homepage #web-projects section, laporra, somosunaola, herrumbre, cv-portfolio
   -------------------------------------------------------------------------- */
:root .bg-web,
[data-theme="light"] .bg-web {
  background-image:
    linear-gradient(180deg,
      rgba(200, 220, 250, 0.15) 0%,
      rgba(140, 180, 235, 0.12) 25%,
      rgba(70, 130, 205, 0.08) 50%,
      rgba(40, 95, 170, 0.06) 75%,
      rgba(30, 80, 150, 0.04) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(80, 140, 210, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(40, 95, 170, 0.05) 0%, transparent 45%);
}

[data-theme="dark"] .bg-web {
  background-image:
    linear-gradient(180deg,
      rgba(30, 80, 150, 0.1) 0%,
      rgba(40, 95, 170, 0.08) 25%,
      rgba(25, 65, 120, 0.06) 50%,
      rgba(15, 45, 85, 0.04) 75%,
      rgba(5, 25, 55, 0.03) 100%
    ),
    radial-gradient(circle at 20% 80%, rgba(50, 110, 190, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(40, 95, 170, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(30, 80, 150, 0.04) 0%, transparent 45%);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .bg-web {
    background-image:
      linear-gradient(180deg,
        rgba(200, 220, 250, 0.15) 0%,
        rgba(140, 180, 235, 0.12) 25%,
        rgba(70, 130, 205, 0.08) 50%,
        rgba(40, 95, 170, 0.06) 75%,
        rgba(30, 80, 150, 0.04) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(80, 140, 210, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(40, 95, 170, 0.05) 0%, transparent 45%);
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .bg-web {
    background-image:
      linear-gradient(180deg,
        rgba(30, 80, 150, 0.1) 0%,
        rgba(40, 95, 170, 0.08) 25%,
        rgba(25, 65, 120, 0.06) 50%,
        rgba(15, 45, 85, 0.04) 75%,
        rgba(5, 25, 55, 0.03) 100%
      ),
      radial-gradient(circle at 20% 80%, rgba(50, 110, 190, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(40, 95, 170, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 60% 60%, rgba(30, 80, 150, 0.04) 0%, transparent 45%);
  }
}