/* DEFAULT = DARK MODE */
:root {
  --skill-bg: rgba(255, 255, 255, 0.07);
  --skill-card-bg: rgba(255, 255, 255, 0.10);
  --skill-progress-bg: rgba(255, 255, 255, 0.20);
}

/* LIGHT MODE OVERRIDES */
:root.light {
  --skill-bg: rgba(0, 0, 0, 0.04);
  --skill-card-bg: rgba(0, 0, 0, 0.06);
  --skill-progress-bg: rgba(0, 0, 0, 0.15);
}

:root:not(.light) .skill-category {
  background: var(--skill-card-bg) !important;
  color: #ffffff !important;
}

:root:not(.light) .skill-cat-header,
:root:not(.light) .skill-title,
:root:not(.light) .skill-icon,
:root:not(.light) .left-side {
  color: #ffffff !important;
}

:root:not(.light) .arrow {
  color: #ffffff !important;
  stroke: #ffffff !important;
}


/* ==========================
   BASE SKILLS SECTION
   ========================== */
.skills-wrapper {
  margin-top: 40px;
}

.skill-category {
  background: var(--skill-bg);
  border: var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.skill-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.left-side {
  display: flex;
  align-items: center;
  gap: 15px;
}

.skill-icon {
  font-size: 28px;
}

.skill-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.skill-category.open .skill-items {
  max-height: 500px;
}

/* Progress bars */
.skill-bar {
  margin-bottom: 18px;
}

.skill-title {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 14px;
}

.progress {
  height: 6px;
  background: var(--skill-progress-bg);
  border-radius: 50px;
  overflow: hidden;
  margin-top: 6px;
}

.progress-fill {
  height: 100%;
  background: #7b61ff;
  border-radius: 50px;
}

.skill-category.open .arrow {
  transform: rotate(180deg);
}

.arrow {
  font-size: 40px;
}