/**
 * NineKeys - Base Styles
 *
 * Este arquivo importa o design-base.css e adiciona estilos globais adicionais
 * conforme necessário para o projeto.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Importa tokens de design e componentes base */
@import './design-base.css';

/* ========== ESTILOS GLOBAIS ADICIONAIS ========== */

/* Melhorias de renderização de texto */
body {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

/* Estilo de seleção de texto */
::selection {
  background: var(--color-primary);
  color: #0B0D10;
}

::-moz-selection {
  background: var(--color-primary);
  color: #0B0D10;
}

/* Scrollbar customizada (apenas WebKit browsers) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

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

/* ========== ACCESSIBILITY - FOCUS STATES ========== */

/* Skip to main content link - Accessibility improvement */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top 0.2s ease;
}

.skip-to-main:focus {
  top: 0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Visible focus for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Remove default focus outline on mouse/touch */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for buttons and links */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Focus for form inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* ========== HELPER CLASSES ========== */

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

.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;
}