/* Theme Switcher Styles */
.theme-switcher {
  margin-top: 10px;
}

.theme-switcher .contact-title {
  color: var(--light-gray-70);
  font-size: var(--fs-8);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.theme-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid var(--jet);
  background: var(--eerie-black-1);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-btn:hover {
  border-color: var(--orange-yellow-crayola);
  transform: scale(1.05);
}

.theme-btn.active {
  border-color: var(--orange-yellow-crayola);
  background: var(--orange-yellow-crayola);
  box-shadow: 0 0 10px rgba(242, 201, 76, 0.3);
}

.theme-name {
  font-size: var(--fs-8);
  color: var(--light-gray-70);
  text-align: center;
  font-weight: var(--fw-400);
}

/* Skills Section Styles */
.skills-section {
  margin-bottom: 30px;
}

.skills-section .title-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.skill-card {
  background: var(--border-gradient-onyx);
  padding: 25px;
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.skill-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}

.skill-card:hover {
  transform: translateY(-5px);
}

.skill-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.skill-title {
  color: var(--white-2);
  font-size: var(--fs-4);
  font-weight: var(--fw-500);
  margin-bottom: 15px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  background: var(--orange-yellow-crayola);
  color: var(--smoky-black);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
  transition: all 0.3s ease;
}

.skill-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(242, 201, 76, 0.3);
}

/* Theme Variables */
:root {
  /* Default Dark Theme */
  --bg-gradient-onyx: linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
  --bg-gradient-jet: linear-gradient(to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
  --bg-gradient-yellow-1: linear-gradient(to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50%);
  --bg-gradient-yellow-2: linear-gradient(135deg, hsla(45, 100%, 71%, 0.251) 0%, hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%);
  --border-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);
  --text-gradient-yellow: linear-gradient(to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%));
  --jet: hsl(0, 0%, 22%);
  --onyx: hsl(240, 1%, 17%);
  --eerie-black-1: hsl(240, 2%, 13%);
  --eerie-black-2: hsl(240, 2%, 12%);
  --smoky-black: hsl(0, 0%, 7%);
  --white-1: hsl(0, 0%, 100%);
  --white-2: hsl(0, 0%, 98%);
  --orange-yellow-crayola: hsl(45, 100%, 72%);
  --vegas-gold: hsl(45, 54%, 58%);
  --light-gray: hsl(0, 0%, 84%);
  --light-gray-70: hsla(0, 0%, 84%, 0.7);
  --bittersweet-shimmer: hsl(0, 43%, 51%);
  /* Blog-specific variables */
  --bg-dark: hsl(0, 0%, 7%);
  --bg-card: hsl(240, 2%, 12%);
  --bg-secondary: hsl(240, 2%, 13%);
  --text-primary: hsl(0, 0%, 98%);
  --text-secondary: hsl(0, 0%, 84%);
  --text-muted: hsl(0, 0%, 70%);
  --border-color: hsl(0, 0%, 22%);
  --primary-color: hsl(45, 100%, 72%);
  --primary-dark: hsl(45, 90%, 62%);
  --success-color: hsl(142, 71%, 45%);
  --danger-color: hsl(0, 84%, 60%);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Light Theme */
[data-theme="light"] {
  --bg-gradient-onyx: linear-gradient(to bottom right, hsl(210, 20%, 96%) 3%, hsl(210, 25%, 98%) 97%);
  --bg-gradient-jet: linear-gradient(to bottom right, hsla(210, 15%, 92%, 0.9) 0%, hsla(210, 20%, 95%, 0) 100%), hsl(210, 18%, 94%);
  --border-gradient-onyx: linear-gradient(to bottom right, hsl(210, 15%, 85%) 0%, hsla(210, 15%, 85%, 0) 50%);
  --jet: hsl(210, 12%, 70%);
  --onyx: hsl(210, 15%, 80%);
  --eerie-black-1: hsl(210, 20%, 94%);
  --eerie-black-2: hsl(210, 25%, 97%);
  --smoky-black: hsl(210, 30%, 98%);
  --white-1: hsl(210, 15%, 20%);
  --white-2: hsl(210, 12%, 25%);
  --light-gray: hsl(210, 8%, 45%);
  --light-gray-70: hsla(210, 8%, 45%, 0.8);
  --orange-yellow-crayola: hsl(210, 75%, 55%);
  --vegas-gold: hsl(210, 65%, 50%);
  --text-gradient-yellow: linear-gradient(to right, hsl(210, 75%, 55%), hsl(200, 70%, 50%));
  /* Blog-specific variables */
  --bg-dark: hsl(210, 25%, 98%);
  --bg-card: hsl(210, 20%, 96%);
  --bg-secondary: hsl(210, 15%, 92%);
  --text-primary: hsl(210, 15%, 20%);
  --text-secondary: hsl(210, 12%, 35%);
  --text-muted: hsl(210, 8%, 55%);
  --border-color: hsl(210, 15%, 80%);
  --primary-color: hsl(210, 75%, 55%);
  --primary-dark: hsl(210, 65%, 45%);
  --success-color: hsl(142, 71%, 45%);
  --danger-color: hsl(0, 84%, 60%);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

/* Night Read Theme */
[data-theme="night"] {
  --bg-gradient-onyx: linear-gradient(to bottom right, hsl(25, 35%, 15%) 3%, hsl(20, 40%, 8%) 97%);
  --bg-gradient-jet: linear-gradient(to bottom right, hsla(25, 30%, 12%, 0.8) 0%, hsla(20, 35%, 6%, 0) 100%), hsl(22, 35%, 10%);
  --border-gradient-onyx: linear-gradient(to bottom right, hsl(25, 30%, 20%) 0%, hsla(25, 30%, 20%, 0) 50%);
  --jet: hsl(25, 30%, 18%);
  --onyx: hsl(22, 35%, 12%);
  --eerie-black-1: hsl(20, 35%, 8%);
  --eerie-black-2: hsl(18, 40%, 6%);
  --smoky-black: hsl(15, 45%, 4%);
  --orange-yellow-crayola: hsl(35, 85%, 70%);
  --vegas-gold: hsl(35, 75%, 65%);
  --text-gradient-yellow: linear-gradient(to right, hsl(35, 85%, 70%), hsl(30, 80%, 65%));
  --light-gray: hsl(35, 25%, 80%);
  --light-gray-70: hsla(35, 25%, 80%, 0.7);
  /* Blog-specific variables */
  --bg-dark: hsl(15, 45%, 4%);
  --bg-card: hsl(18, 40%, 6%);
  --bg-secondary: hsl(20, 35%, 8%);
  --text-primary: hsl(35, 25%, 90%);
  --text-secondary: hsl(35, 25%, 80%);
  --text-muted: hsl(35, 25%, 70%);
  --border-color: hsl(25, 30%, 18%);
  --primary-color: hsl(35, 85%, 70%);
  --primary-dark: hsl(35, 75%, 60%);
  --success-color: hsl(142, 71%, 45%);
  --danger-color: hsl(0, 84%, 60%);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Ocean Theme */
[data-theme="ocean"] {
  --bg-gradient-onyx: linear-gradient(to bottom right, hsl(210, 50%, 12%) 3%, hsl(220, 60%, 6%) 97%);
  --bg-gradient-jet: linear-gradient(to bottom right, hsla(210, 45%, 10%, 0.8) 0%, hsla(220, 55%, 4%, 0) 100%), hsl(215, 50%, 8%);
  --border-gradient-onyx: linear-gradient(to bottom right, hsl(210, 45%, 18%) 0%, hsla(210, 45%, 18%, 0) 50%);
  --jet: hsl(210, 45%, 15%);
  --onyx: hsl(215, 50%, 10%);
  --eerie-black-1: hsl(220, 60%, 6%);
  --eerie-black-2: hsl(225, 65%, 4%);
  --smoky-black: hsl(230, 70%, 3%);
  --orange-yellow-crayola: hsl(200, 80%, 60%);
  --vegas-gold: hsl(190, 70%, 55%);
  --text-gradient-yellow: linear-gradient(to right, hsl(200, 80%, 60%), hsl(190, 70%, 55%));
  --light-gray: hsl(200, 15%, 75%);
  --light-gray-70: hsla(200, 15%, 75%, 0.7);
  /* Blog-specific variables */
  --bg-dark: hsl(230, 70%, 3%);
  --bg-card: hsl(225, 65%, 4%);
  --bg-secondary: hsl(220, 60%, 6%);
  --text-primary: hsl(200, 15%, 85%);
  --text-secondary: hsl(200, 15%, 75%);
  --text-muted: hsl(200, 15%, 65%);
  --border-color: hsl(210, 45%, 15%);
  --primary-color: hsl(200, 80%, 60%);
  --primary-dark: hsl(190, 70%, 50%);
  --success-color: hsl(142, 71%, 45%);
  --danger-color: hsl(0, 84%, 60%);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}



/* Responsive Skills Grid */
@media (min-width: 768px) {
  .skills-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
}

@media (min-width: 1024px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}