/* Light mode (default) */
:root {
  --background: #fffdfa;
  --foreground: #2c3e50;
  --accent-orange: #d35400;
  --card-bg: #f9f6f0;
  --card-border: #ebdcd0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1a1814;
    --foreground: #f4f0ea;
    --accent-orange: #f39c12;
    --card-bg: #26241e;
    --card-border: #3b362c;
  }
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: var(--background);
  color: var(--foreground);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2000;
  padding: 10px 14px;
  border: 2px solid var(--foreground);
  background-color: var(--card-bg);
  color: var(--foreground);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

a {
  color: var(--accent-orange);
  transition: color 0.2s;
}

a:hover {
  text-decoration: underline;
}

/* High-Contrast Focus Outline for Accessibility */
:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 4px;
}

/* Fallback for browsers that don't support :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .skip-link,
  a,
  button,
  input,
  .desktop-icon,
  .project-card,
  .drawer-card,
  .bento-box,
  .mobile-nav-pill,
  .terminal-window,
  .terminal-close {
    forced-color-adjust: auto;
  }

  :focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 4px;
  }
}