/**
 * Base Styles & Accessibility Foundations
 * Iron & Smash Co. | Craft Smash Burgers & Truffle Fries
 */

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--transition-base), color var(--transition-base);
  overflow-x: hidden;
}

::selection {
  background-color: var(--color-primary);
  color: hsl(var(--iron-h), var(--iron-s), var(--iron-l));
}

/* Enlace de salto accesible WCAG 2.1 AA */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-secondary);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  z-index: 9999;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Indicador de foco visible universal */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Scrollbar estilizada */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}