/*
Theme Name: IT-Dimension
Author: Yaroslav de Medichi
Description: A custom theme for IT-Dimension.
Version: 1.0
*/
:root {
  /*
   * 1. DARK THEME — this is the default :root state (unchecked)
   * Slider LEFT (covers Sun), Moon (right) is active
   */
  --color-text: #fff;
  --color-text-reverse: #282828;
  --color-background: #121212;
  --color-switch-bg: #444;
  --color-switch-thumb: #fff;
  --color-sun-icon: #777;
  --color-moon-icon: #fff;
  --color-button-text: #121212;
  --color-button-bg: #fff;
  --arrow-footer-fill: #fff;
  --coppy: #c7c7cc;
  --soc-svg-bg: #fff;
  --link-active: #2a59ff;

  /** **/
  --color-button-text-hover: transparent;
  --color-button-bg-hover: #fff;
  /** **/

  color-scheme: dark;

  /*
   * 2. LIGHT THEME — activated via #theme-toggle:checked
   * Slider RIGHT (covers Moon), Sun (left) is active
   */
  &:has(#theme-toggle:checked) {
    --color-text: #282828;
    --color-text-reverse: #fff;
    --color-background: #f0f0f0;
    --color-switch-bg: #ccc;
    --color-switch-thumb: #fff;
    --color-sun-icon: #222;
    --color-moon-icon: #777;
    --color-button-text: #fff;
    --color-button-bg: #2a59ff;
    --arrow-footer-fill: #2a59ff;
    --coppy: #68686a;
    --soc-svg-bg: #000;
    --link-active: #2a59ff;

    /** **/
    --color-button-text-hover: #fff;
    --color-button-bg-hover: #2a59ff;
    /** **/

    color-scheme: light;
  }
}

.logo-light {
  display: block;
}
.logo-dark {
  display: none;
}

:root:not(:has(#theme-toggle:checked)) .logo-light {
  display: none;
}

:root:not(:has(#theme-toggle:checked)) .logo-dark {
  display: block;
}

:root:has(#theme-toggle:checked) .logo-light {
  display: block;
}

:root:has(#theme-toggle:checked) .logo-dark {
  display: none;
}

.theme-switch {
  position: relative;
  display: inline-flex;
  width: 60px;
  height: 32px;
  border-radius: 16px;
  cursor: pointer;
  background-color: var(--color-switch-bg);
  transition: background-color 0.3s;
  overflow: hidden;
}

.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: color 0.3s;
  z-index: 1;
}

.sun {
  left: 2px;
  color: var(--color-sun-icon);
}

.moon {
  right: 2px;
  color: var(--color-moon-icon);
}

.slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-switch-thumb);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

#theme-toggle:checked ~ .slider {
  transform: translateX(28px);
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s, color 0.3s;
}

.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
  /* Це більш надійний спосіб вимкнути ВСІ переходи */
  transition: none !important;
  animation: none !important;
}