/* QrLink — estilos compartilhados (neobrutalista / flat) */

:root {
  --bg-dark: #121316;
  --surface-dark: #1a1c20;
  --border-dark: #2e3036;
  --accent-cyan: #06d6f2;
  --accent-orange: #ff6a3d;
}

body {
  background-color: var(--bg-dark);
}

/* Grid sutil de fundo, usado nas seções escuras */
.bg-grid {
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: -1px -1px;
}

.bg-grid-surface {
  background-color: var(--surface-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* Sombras sólidas (hard shadow), sem desfoque */
.shadow-hard {
  box-shadow: 8px 8px 0 0 #000000;
}
.shadow-hard-sm {
  box-shadow: 4px 4px 0 0 #000000;
}
.shadow-hard-cyan {
  box-shadow: 6px 6px 0 0 var(--accent-cyan);
}

/* Micro-interação instantânea de "pressionar" — sem animações lentas */
.btn-brutal {
  transition: transform 0.06s linear, box-shadow 0.06s linear;
}
.btn-brutal:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 #000000 !important;
}

.tab-btn {
  transition: none;
}

::selection {
  background: var(--accent-cyan);
  color: #000;
}

/* Foco visível, sem box-shadow esfumaçado */
input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: 3px solid var(--accent-cyan);
  outline-offset: 1px;
}