/* =========================================================
   Theme variables + overrides
   3 themes cycle on mobile double-tap (see theme-switcher.js)
   ========================================================= */

/* --- Theme 1: Default (original purple/pink) --- */
:root {
  --color-skills-bg:      #200042;
  --color-footer-bg:      #291C5D;
  --color-footer-links-bg:#332471;
  --color-footer-links-hover: #38A8F9;
  --color-footer-text:    #6F60AA;
  --color-hero-border:    #694095;
  --color-neon-rule:      #EEFF88;
  --color-form-bg:        #4D3E87;
  --color-form-text:      #6F60AA;
  --color-form-focus-bg:  #38A8F9;
  --color-icon-hover:     #38A8F9;
  --color-accent-pink:    #F53F89;
  --color-accent-blue:    #38A8F9;
  --font-display:         'Bungee', cursive, Helvetica, sans-serif;
  --font-body:            'Roboto', sans-serif, Helvetica, Arial;
  --theme-name:           'Original';
}

/* --- Theme 2: Light/Minimal --- */
body.theme-light {
  --color-skills-bg:      #f0eff5;
  --color-footer-bg:      #e4e1f0;
  --color-footer-links-bg:#c9c2e8;
  --color-footer-links-hover: #1779ba;
  --color-footer-text:    #555;
  --color-hero-border:    #c9c2e8;
  --color-neon-rule:      #F53F89;
  --color-form-bg:        #fff;
  --color-form-text:      #444;
  --color-form-focus-bg:  #e8f4ff;
  --color-icon-hover:     #F53F89;
  --color-accent-pink:    #F53F89;
  --color-accent-blue:    #1779ba;
  --theme-name:           'Light';
}

/* --- Theme 3: Dark Neon --- */
body.theme-neon {
  --color-skills-bg:      #07010f;
  --color-footer-bg:      #0a0012;
  --color-footer-links-bg:#1a002e;
  --color-footer-links-hover: #3adb76;
  --color-footer-text:    #3adb76;
  --color-hero-border:    #3adb76;
  --color-neon-rule:      #3adb76;
  --color-form-bg:        #130022;
  --color-form-text:      #3adb76;
  --color-form-focus-bg:  #1a003a;
  --color-icon-hover:     #ffae00;
  --color-accent-pink:    #3adb76;
  --color-accent-blue:    #ffae00;
  --theme-name:           'Neon';
}

/* =========================================================
   Apply variables to components
   ========================================================= */

.blurb-skills {
  background-color: var(--color-skills-bg);
}

.hero-wrapper {
  border-bottom-color: var(--color-hero-border);
}

.neon-rule {
  border-bottom-color: var(--color-neon-rule);
}

.footer {
  background-color: var(--color-footer-bg);
}

.footer-links-container {
  color: var(--color-footer-text);
}

.footer-links-container li {
  background-color: var(--color-footer-links-bg);
}

.footer-links-container li:hover {
  background-color: var(--color-footer-links-hover);
}

.form-text-input {
  background-color: var(--color-form-bg);
  color: var(--color-form-text);
}

.form-text-input:focus,
form .form-text-input:hover {
  background-color: var(--color-form-focus-bg);
}

.icon-social:hover {
  background-color: var(--color-icon-hover);
}

/* Light theme: skills section needs dark text */
body.theme-light .blurb-skills h3,
body.theme-light .blurb-skills p,
body.theme-light .blurb-skills h2 {
  color: #1a1a2e;
}

body.theme-light .blurb-skills .button {
  background-color: var(--color-accent-pink);
  color: #fff;
}

body.theme-light .footer h3,
body.theme-light .footer p,
body.theme-light .footer a {
  color: #333;
}

/* Neon theme: hero header glow */
body.theme-neon .hero-header {
  text-shadow: 0 0 18px var(--color-accent-pink), 0 0 4px #fff;
}

body.theme-neon .footer h3,
body.theme-neon .footer a {
  color: var(--color-footer-text);
}

body.theme-neon .form-text-input::-webkit-input-placeholder { color: var(--color-form-text); opacity: 0.6; }
body.theme-neon .form-text-input::placeholder               { color: var(--color-form-text); opacity: 0.6; }

/* =========================================================
   Theme indicator badge (mobile only)
   ========================================================= */

#theme-badge {
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 2rem;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.05em;
}

#theme-badge.visible {
  opacity: 1;
}

@media (max-width: 640px) {
  #theme-badge {
    display: block;
  }
}