/* Defaults (light) */
:root {
  color-scheme: light;
}

/* Explicit theme via attribute */
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}

/* Back-compat if you ever apply .dark on html/body manually */
html.dark,
body.dark {
  color-scheme: dark;
}

/* Base text/background (Tailwind handles most, these are extras) */
body {
  background-color: #ffffff;
  color: #2b2b2b;
}

/* Dark extra if using plain CSS (Tailwind already covers via classes) */
html.dark body,
body.dark {
  background-color: #181716;
  color: #eae4d9;
}

/* Components */
.paper-shadow {
  box-shadow: 0 14px 28px -24px rgba(42, 49, 37, 0.28);
}
.dark .paper-shadow {
  box-shadow: 0 18px 36px -26px rgba(16, 16, 16, 0.45);
}

.terminal-frame {
  background-color: #ffffff;
  border-radius: 1rem;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.dark .terminal-frame {
  background-color: #1b1a15;
}

.divider {
  border-top: 1px dashed #d9d3c7;
}

/* Cursor blink + reduced motion */
.cursor-blink::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1em;
  background: #b07d3b;
  margin-left: 4px;
  animation: blink 1s step-start infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-blink::after {
    animation: none;
  }
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
[data-skills-track] {
  -webkit-overflow-scrolling: touch;
}