/* ============================================
   THEMES.CSS — Per-section color palettes
   ============================================ */

/* Each section overrides --accent and --accent-glow */

#section-hero    { --accent: var(--c1); --accent-glow: rgba(0,255,65,0.35); }
#section-about   { --accent: var(--c2); --accent-glow: rgba(0,229,255,0.35); }
#section-css     { --accent: var(--c3); --accent-glow: rgba(180,79,255,0.35); }
#section-sims    { --accent: var(--c4); --accent-glow: rgba(255,179,0,0.35); }
#section-hackathons { --accent: var(--c5); --accent-glow: rgba(255,215,0,0.35); }
#section-gokart  { --accent: var(--c6); --accent-glow: rgba(255,51,51,0.35); }
#section-skills  { --accent: var(--c7); --accent-glow: rgba(68,136,255,0.35); }
#section-contact { --accent: var(--c8); --accent-glow: rgba(0,255,65,0.35); }

/* Apply accent glow to section headings automatically */
.section-wrapper h2 {
  color: var(--accent, var(--green));
  text-shadow: 0 0 14px var(--accent-glow, var(--green-glow));
}

.section-wrapper .section-tag {
  color: var(--accent, var(--green));
  border-color: var(--accent, var(--green));
  text-shadow: 0 0 8px var(--accent-glow, var(--green-glow));
}

/* Divider line per section */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--green)), transparent);
  margin: 2.5rem 0;
  opacity: 0.5;
}

/* Section border accent left strip */
.accent-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, var(--green));
  box-shadow: 0 0 12px var(--accent-glow, var(--green-glow));
}

/* Nav active states per section */
body.in-hero     #nav-hero     { color: var(--c1) !important; }
body.in-about    #nav-about    { color: var(--c2) !important; }
body.in-css      #nav-css      { color: var(--c3) !important; }
body.in-sims     #nav-sims     { color: var(--c4) !important; }
body.in-hackathons #nav-hackathons { color: var(--c5) !important; }
body.in-gokart   #nav-gokart   { color: var(--c6) !important; }
body.in-skills   #nav-skills   { color: var(--c7) !important; }
body.in-contact  #nav-contact  { color: var(--c8) !important; }