#site-controls {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  gap: 0.5rem;

  button {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--base-gray-300);
    background-color: var(--base-gray-200);
    color: var(--base-gray-600);
    font: var(--text-sm);
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease,
                background-color 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      border-color: var(--principal-red);
    }
  }
}

body,
header,
main,
section {
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="light"] {
  --base-gray-100: #E8EAEE;
  --base-gray-200: #F1F3F6;
  --base-gray-300: #FFFFFF;

  --base-gray-400: #6B7079;
  --base-gray-500: #3C414A;
  --base-gray-600: #16181D;

  --principal-red:    #D24C5A;
  --principal-purple: #7C3AED;
  --principal-blue:   #2C7FC4;
  --principal-green:  #6FAE3E;
  --principal-yellow: #D29A33;

  --light-border: #E3E5EA;
}

[data-theme="light"] body {
  background-color: var(--base-gray-200);
}

[data-theme="light"] header {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F1F3F6 100%);
}

[data-theme="light"] #contacts {
  background-image: linear-gradient(180deg, #F1F3F6 0%, #E8EAEE 100%);
}

[data-theme="light"] #site-controls button {
  background-color: #FFFFFF;
  border-color: var(--light-border);
  color: var(--base-gray-500);
  box-shadow: 0 1px 3px rgba(20, 22, 27, 0.06);
}

[data-theme="light"] #tags .tag {
  box-shadow: 0 1px 3px rgba(20, 22, 27, 0.06);
}

[data-theme="light"] .tag:hover {
  background-color: var(--base-gray-100);
}

[data-theme="light"] #links .link img {
  filter: brightness(0.25);
}

[data-theme="light"] #links .link:hover img:nth-child(1) {
  filter: invert(45%) sepia(65%) saturate(625%) hue-rotate(176deg) brightness(80%) contrast(90%);
}

[data-theme="light"] .arrow img {
  filter: brightness(0.35);
}

[data-theme="light"] #projects .project-card {
  box-shadow: 0 1px 3px rgba(20, 22, 27, 0.06);
}

[data-theme="light"] #projects .project-card.animate-project-card:hover {
  box-shadow: 0 10px 28px rgba(20, 22, 27, 0.12);
}

[data-theme="light"] #links .link {
  box-shadow: 0 1px 3px rgba(20, 22, 27, 0.06);
}

[data-theme="light"] .link:hover {
  box-shadow: 0 4px 14px rgba(44, 127, 196, 0.25);
}

[data-theme="light"] #services .card {
  background-color: #FFFFFF;
  border-color: var(--light-border);
  box-shadow: 0 1px 3px rgba(20, 22, 27, 0.05);
}

[data-theme="light"] .card:hover {
  box-shadow: 0 8px 22px rgba(210, 76, 90, 0.18);
}

[data-theme="light"] .toggle-button {
  background-color: var(--base-gray-200);
  color: #C2434E;
  border-color: #C2434E;
}

[data-theme="light"] .toggle-button:hover {
  background-color: #C2434E;
  color: #FFFFFF;
  box-shadow: 0 5px 15px rgba(194, 67, 78, 0.25);
}

[data-theme="light"] #project-filters .filter-button {
  border-color: var(--light-border);
}

[data-theme="light"] #contact-form input,
[data-theme="light"] #contact-form textarea {
  border-color: var(--light-border);
}

[data-theme="light"] #contact-form input:focus,
[data-theme="light"] #contact-form textarea:focus {
  border-color: var(--principal-blue);
}