/* =========================================================
   Needle Syndicate · Design tokens
   Un solo sistema para las dos capas: marca (hero) y tienda.
   Lo que cambia entre capas es la DOSIS de rojo, no la paleta.
   ========================================================= */
:root {
  /* Paleta */
  --ns-black: #0e0b0a;        /* fondo global (negro cálido) */
  --ns-surface: #161010;      /* tarjetas, paneles */
  --ns-surface-2: #1f1615;    /* hover de tarjeta */
  --ns-bone: #efe6d8;         /* texto principal */
  --ns-bone-60: rgba(239, 230, 216, 0.6);
  --ns-bone-30: rgba(239, 230, 216, 0.3);
  --ns-line: rgba(239, 230, 216, 0.12);
  --ns-red: #c8102e;          /* acento: CTA, precio oferta, badges */
  --ns-red-hover: #e0173a;
  --ns-neon: #ff1f4a;         /* aristas de neón del hero */
  --ns-wall: #7a0a1c;         /* paredes del hero: rojo un paso más profundo que el Coming Soon */
  --ns-wall-deep: #4d0611;
  --ns-ok: #8fe3a3;

  /* Tipografía */
  --ns-font-display: 'Bebas Neue', 'Archivo Narrow', Impact, sans-serif;
  --ns-font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida (mismo ritmo en móvil y PC) */
  --ns-text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --ns-text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --ns-text-md: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --ns-text-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --ns-display-xl: clamp(2.4rem, 1.4rem + 5vw, 5.5rem);
  --ns-display-lg: clamp(2rem, 1.4rem + 3vw, 3.75rem);

  /* Espaciado y radios */
  --ns-space-1: 0.25rem;
  --ns-space-2: 0.5rem;
  --ns-space-3: 0.75rem;
  --ns-space-4: 1rem;
  --ns-space-6: 1.5rem;
  --ns-space-8: 2rem;
  --ns-space-12: 3rem;
  --ns-radius: 4px;
  --ns-gutter: clamp(16px, 4vw, 48px);
  --ns-max: 1320px;

  /* Movimiento */
  --ns-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ns-dur-fast: 160ms;
  --ns-dur: 320ms;
  --ns-dur-slow: 700ms;

  color-scheme: dark;
}

html { background: var(--ns-black); }
body {
  margin: 0;
  background: var(--ns-black);
  color: var(--ns-bone);
  font-family: var(--ns-font-body);
  font-size: var(--ns-text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ns-neon); outline-offset: 3px; }

.ns-container { width: 100%; max-width: var(--ns-max); margin-inline: auto; padding-inline: var(--ns-gutter); }
.ns-display { font-family: var(--ns-font-display); font-weight: 400; letter-spacing: 0.02em; line-height: 0.95; text-transform: uppercase; }
.ns-eyebrow { font-size: var(--ns-text-xs); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ns-bone-60); }

/* Botones (una sola familia para toda la tienda) */
.ns-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.5rem;
  font: 700 var(--ns-text-sm) var(--ns-font-body); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--ns-radius); cursor: pointer;
  transition: transform var(--ns-dur-fast) var(--ns-ease), background var(--ns-dur-fast), border-color var(--ns-dur-fast), box-shadow var(--ns-dur-fast);
}
.ns-btn--primary { background: var(--ns-red); color: #fff; box-shadow: 0 0 0 0 rgba(255, 31, 74, 0); }
.ns-btn--primary:hover { background: var(--ns-red-hover); box-shadow: 0 0 24px rgba(255, 31, 74, 0.35); transform: translateY(-1px); }
.ns-btn--ghost { background: rgba(14, 11, 10, 0.55); color: var(--ns-bone); border-color: var(--ns-bone-30); backdrop-filter: blur(6px); }
.ns-btn--ghost:hover { border-color: var(--ns-bone); transform: translateY(-1px); }
.ns-btn:active { transform: translateY(0); }

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