@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

:root {
  --icon-color: #4b5563;
  --bg-light: #f5f5f5;
  --text-light: #000;
  --taskbar-light: rgba(161, 161, 161, 0.9);
  --taskbar-border-light: #e5e7eb;
  --window-bg-light: rgba(249, 250, 251, 0.8);
  --window-border-light: #e5e7eb;
  --window-shadow-light: rgba(0, 0, 0, 0.1);
}
.dark {
  --icon-color: #9ca3af;
  --bg-dark: #1f2937;
  --text-dark: #f3f4f6;
  --taskbar-dark: rgba(29, 29, 29, 0.9);
  --taskbar-border-dark: #575757;
  --window-bg-dark: rgba(55, 65, 81, 0.8);
  --window-border-dark: #374151;
  --window-shadow-dark: rgba(0, 0, 0, 0.2);
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: "Lexend", sans-serif;
}
body {
  font-family: "Inter", sans-serif;
  transition: background-color 0.5s ease;
  font-family: "Lexend", sans-serif;
}
body.light {
  background-color: var(--bg-light);
  color: var(--text-light);
  font-family: "Lexend", sans-serif;
}
body.dark {
  background-color: var(--bg-dark);
  color: var(--text-dark);
  font-family: "Lexend", sans-serif;
}
.theme-taskbar.light {
  background-color: var(--taskbar-light);
  border-top: 1px solid var(--taskbar-border-light);
}
.theme-taskbar.dark {
  background-color: var(--taskbar-dark);
  border-top: 1px solid var(--taskbar-border-dark);
}
.theme-window.light {
  background-color: var(--window-bg-light);
  box-shadow: 0 10px 15px -3px var(--window-shadow-light),
    0 4px 6px -2px var(--window-shadow-light);
}
.theme-window.dark {
  background-color: var(--window-bg-dark);
  box-shadow: 0 10px 15px -3px var(--window-shadow-dark),
    0 4px 6px -2px var(--window-shadow-dark);
}
.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}
.fade-out {
  animation: fadeOut 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(0.95);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.window-close-anim {
  animation: windowClose 0.3s ease-in-out forwards;
}
@keyframes windowClose {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}
.window-drag-handle {
  cursor: grab;
}
.window-resizer {
  position: absolute;
  width: 10px;
  height: 10px;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window-resizer.top-left {
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
}
.window-resizer.top-right {
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
}
.window-resizer.bottom-left {
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
}
.window-resizer.bottom-right {
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
}
.spinning-box {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #3b82f6;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#trashBin.active {
  transform: scale(1.1);
  background-color: rgba(255, 0, 0, 0.2);
  border: 2px dashed #f87171;
}

.app-icon {
  cursor: grab;
  transition: transform 0.1s ease-in-out;
}
.app-icon.dragging {
  opacity: 0.7;
  cursor: grabbing;
  transform: scale(1.1);
}
.context-menu {
  position: absolute;
  background-color: var(--window-bg-light);
  border: 1px solid var(--window-border-light);
  padding: 4px;
  border-radius: 8px;
  z-index: 10000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark .context-menu {
  background-color: var(--window-bg-dark);
  border: 1px solid var(--window-border-dark);
}
.context-menu-item {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.context-menu-item:hover {
  background-color: var(--taskbar-light);
}
.dark .context-menu-item:hover {
  background-color: var(--taskbar-dark);
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #2f2f2f;
  border-radius: 10px;
  border: 3px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
  background: #444;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #2f2f2f #1a1a1a;
}

#intro-screen {
  opacity: 0;
  pointer-events: auto;

  transition: opacity 0.3s ease; 
}

#intro-screen > div:first-child {

  background-color: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
}

#intro-screen.show {
  opacity: 1;
}

#intro-screen.fade-out {
  opacity: 0;
}

#intro-screen.fade-out > div:first-child {

  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
  background-color: rgba(0,0,0,0);
  backdrop-filter: blur(0);
}

#intro-content {
  opacity: 0;
  transform: translateY(20px) scale(0.98);

  transition: opacity 0.3s ease, transform 0.3s ease;
}

#intro-screen.show #intro-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#intro-screen.fade-out #intro-content {
  opacity: 0;
  transform: translateY(-40px) scale(0.95);
}

#intro-screen .animate-bounce {
  animation: bounce 1.2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}