/* ═══════════════════════════════════════════════════════════════════
   HostelCrew — tokens.css
   Transcripción literal de blueprint_diseño.md v3 (§3–§6, §10) + primitivas.
   Regla: cero hex fuera de este archivo. Si un valor no está aquí,
   se deriva de estas escalas — nunca se inventa.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── §3.1 Rampa de grises fríos (antigravity.google) ── */
  --grey-0:    #FFFFFF;
  --grey-10:   #F8F9FC;
  --grey-15:   #F0F1F5;
  --grey-20:   #EFF2F7;
  --grey-50:   #E6EAF0;
  --grey-100:  #E1E6EC;
  --grey-200:  #CDD4DC;
  --grey-300:  #B2BBC5;
  --grey-400:  #B7BFD9;
  --grey-800:  #45474D;
  --grey-900:  #2F3034;
  --grey-1000: #212226;
  --grey-1100: #18191D;
  --grey-1200: #121317;
  --blue-600:  #3279F9;

  /* ── §3.2 Paleta HeyParker ── */
  --cream:      #FCF5E2;
  --cream-soft: #FEF7F7;
  --black:      #000000;
  --red:        #F42615;
  --salmon:     #FFB4AF;
  /* v3.2 — extraídos de heyparker.ai vía Firecrawl (2026-07-13): pasteles de
     cards de marketing + sus tintas oscuras pareja. Solo registro marketing. */
  --violet:      #7F78C5;
  --violet-deep: #645F96;
  --mint:        #72D184;
  --green-deep:  #194D15;
  --mustard:     #EEBF12;
  --sky:         #0099FF;

  /* ── §3.3 Roles semánticos ── */
  --mk-surface:      var(--cream);
  --mk-on-surface:   var(--grey-1200);
  --mk-accent:       var(--red);
  --surface:                    var(--grey-10);
  --surface-container:          var(--grey-0);
  --surface-container-high:     var(--grey-20);
  --surface-container-highest:  var(--grey-50);
  --on-surface:                 var(--grey-1200);
  --on-surface-variant:         var(--grey-800);
  --inverse-surface:            var(--grey-1200);
  --inverse-on-surface:         var(--grey-10);
  --overlay:                    rgba(255, 255, 255, 0.95);
  --accent:                     var(--red);
  --info:                       var(--blue-600);
  --outline:                    rgba(18, 19, 23, 0.12);
  --outline-strong:             rgba(0, 0, 0, 0.5);

  /* ── §3.4 Paleta del producto real (SOLO recreaciones del dashboard) ── */
  --aq-navy:       #0C1926;
  --aq-navy-mid:   #102233;
  --aq-navy-light: #162E44;
  --aq-navy-bd:    #1C3D58;
  --aq-white:      #EEF5FC;
  --aq-dim:        #4A6E8A;
  --aq-dim2:       #253D52;
  --aq-coral: #E05038;
  --aq-gold:  #F2BF1E;
  --aq-teal:  #19A0B8;
  --aq-green: #1C5C32;
  --aq-green-text: #8FE0AE;

  /* ── §4.1 Familias (v3.1: registro sans puro — Onest para TODO el sitio;
        decisión del 2026-07-13 sobre el preview de 6 parejas) ── */
  --font-display: "Onest", "Google Sans Flex", "Segoe UI", system-ui, sans-serif;
  --font-body: "Onest", "Google Sans Flex", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Courier New", monospace;
  --font-aq-display: "Cormorant Garamond", Georgia, serif;
  --font-aq-body: "Barlow", system-ui, sans-serif;
  --font-aq-label: "Barlow Condensed", system-ui, sans-serif;

  /* ── §5.1 Escala de espaciado (Antigravity) ── */
  --space-xs: 4px;   --space-sm: 8px;   --space-md: 16px;
  --space-lg: 24px;  --space-xl: 36px;  --space-2xl: 48px;
  --space-3xl: 60px; --space-4xl: 80px; --space-5xl: 88px;
  --space-6xl: 120px; --space-7xl: 180px;

  /* ── §5.2 Radios ── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* ── §5.3 Sombras ── */
  --shadow-ambient: 0 1px 2px rgba(18, 19, 23, 0.06), 0 8px 24px rgba(18, 19, 23, 0.08);
  --shadow-lifted:  0 2px 4px rgba(18, 19, 23, 0.08), 0 16px 48px rgba(18, 19, 23, 0.12);
  --glow-feature: 0 0 0 1px var(--outline), 0 0 80px -20px rgba(50, 121, 249, 0.35);
  --shadow-hard:    4px 4px 0 0 var(--black);
  --shadow-hard-lg: 8px 8px 0 0 var(--black);

  /* ── §10.1 Movimiento ── */
  --motion-micro:  150ms;
  --motion-small:  250ms;
  --motion-medium: 400ms;
  --motion-large:  700ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit:   cubic-bezier(0.7, 0, 0.84, 0);
}

/* ═══ Reset mínimo ═══ */
*, *::before, *::after { margin: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.18px;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 4px; border-radius: 2px; }

/* ═══ §4.2 Escala tipográfica con tracking acoplado ═══
   v3.1 (sans puro): el display sans corre óptico ~8% más grande que la serif,
   así que los tamaños display bajan un paso (×0.92) y el tracking se aprieta
   a -0.042em — la jerarquía la hacen tamaño + tracking, no el cambio de familia. */
.display-2xl { font: 600 4.5rem/1.1 var(--font-display);  letter-spacing: -3px; }
.display-xl  { font: 600 3.25rem/1.1 var(--font-display); letter-spacing: -2.2px; }
.display-lg  { font: 600 2.25rem/1.2 var(--font-display); letter-spacing: -1.5px; }
.display-2xl, .display-xl, .display-lg { text-wrap: balance; }
.heading     { font: 600 1.5rem/1.3 var(--font-body);    letter-spacing: -0.15px; }
.subheading  { font: 500 1.25rem/1.3 var(--font-body);   letter-spacing: -0.1px; }
.body        { font: 400 1rem/1.5 var(--font-body);      letter-spacing: 0.18px; }
.small       { font: 400 0.875rem/1.5 var(--font-body);  letter-spacing: 0.16px; }
.caption     { font: 500 0.75rem/1.4 var(--font-body);   letter-spacing: 0.11px; }
.eyebrow {
  font: 700 0.75rem/1 var(--font-body);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--grey-800);
}
.measure { max-width: 65ch; }

/* Responsive del display (mobile-first: el 2xl de 80px baja a 40 en móvil) */
@media (max-width: 767px) {
  .display-2xl { font-size: 2.375rem; letter-spacing: -1.6px; line-height: 1.12; }
  .display-xl  { font-size: 2.125rem; letter-spacing: -1.4px; }
  .display-lg  { font-size: 1.625rem; letter-spacing: -1px; }
}

/* ═══ §6 Fondos ═══ */
.bg-app       { background: var(--grey-10); }
.bg-marketing { background: var(--cream); }
.bg-glow {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(50, 121, 249, 0.05), transparent 70%),
    var(--grey-10);
}

/* ═══ Botones ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: none;
  border-radius: var(--radius-pill);
  font: 600 1rem/1 var(--font-body);
  letter-spacing: 0.18px;
  text-decoration: none;
  transition: transform var(--motion-micro) var(--ease-out),
              box-shadow var(--motion-micro) var(--ease-out),
              background-color var(--motion-micro) var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Acción primaria: EL rojo (máx. uno por vista) */
.btn-primary {
  background: var(--red);
  color: var(--grey-0);
  box-shadow: var(--shadow-ambient);
}
.btn-primary:hover { box-shadow: var(--shadow-lifted); }

/* Botón fantasma */
.btn-ghost {
  background: transparent;
  color: var(--on-surface);
  box-shadow: inset 0 0 0 1px var(--outline);
}
.btn-ghost:hover { background: var(--surface-container-high); }

/* Icono anidado (button-in-button) */
.btn .btn-orb {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-right: -12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.875rem;
  transition: transform var(--motion-micro) var(--ease-out);
}
.btn-ghost .btn-orb { background: var(--surface-container-highest); }
.btn:hover .btn-orb { transform: translate(2px, -1px); }

/* ═══ §7 Botón iridiscente (máx. UNO por página) ═══ */
.btn-iridescent {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--grey-1100);
  color: var(--grey-0);
  font: 500 1rem/1 var(--font-body);
  letter-spacing: 0.18px;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--motion-micro) var(--ease-out);
}
/* El barrido gira un cuadrado con conic-gradient vía transform (compositor):
   animar @property dentro de un gradiente no repinta en todos los motores.
   Requiere dos spans decorativos dentro del botón:
   <span class="iri-glow"></span><span class="iri-ring"></span> */
.btn-iridescent .iri-ring,
.btn-iridescent .iri-glow {
  position: absolute;
  border-radius: var(--radius-pill);
  overflow: hidden;
  pointer-events: none;
}
.btn-iridescent .iri-ring::before,
.btn-iridescent .iri-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0turn);
  animation: iri-spin 5s linear infinite;
}
.btn-iridescent .iri-ring {
  inset: -2px;
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: saturate(1.4);
}
.btn-iridescent .iri-ring::before {
  background: conic-gradient(
    from 0deg,
    transparent 0%, #FF9A3D 8%, #FFE43D 14%, #FF4FA0 20%,
    #7A5CFF 28%, #35A0FF 36%, #7DEBFF 44%, transparent 58%
  );
}
.btn-iridescent .iri-glow {
  inset: -12px;
  z-index: -1;
  filter: blur(16px);
}
.btn-iridescent .iri-glow::before {
  background: conic-gradient(
    from 0deg,
    transparent 0%, #FF9A3D55 10%, #FF4FA066 22%,
    #35A0FF66 36%, #7DEBFF55 46%, transparent 60%
  );
}
@keyframes iri-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }
.btn-iridescent:hover  { transform: translateY(-1px); }
.btn-iridescent:active { transform: translateY(0) scale(0.98); }
.btn-iridescent:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 4px; }

/* ═══ §10.2 Reveal de scroll (una sola vez, stagger 60ms) ═══ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-medium) var(--ease-out),
              transform var(--motion-medium) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 60ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Cursor espectral del texto tipeado (§10.2: cursor arcoíris Antigravity) */
.typed-cursor {
  flex-shrink: 0;
  align-self: baseline;
  width: 0.09em;
  height: 0.78em;
  margin-left: 0.06em;
  border-radius: 2px;
  background: linear-gradient(180deg, #FF9A3D, #FF4FA0 45%, #35A0FF 80%, #7DEBFF);
  animation: cursor-blink 1s steps(2, jump-none) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Zona en construcción (borde dashed HeyParker) */
.wip {
  border: 2px dashed var(--outline-strong);
  border-radius: var(--radius-md);
}

/* ═══ prefers-reduced-motion: sin excepciones ═══ */
@media (prefers-reduced-motion: reduce) {
  .btn-iridescent .iri-ring::before,
  .btn-iridescent .iri-glow::before,
  .typed-cursor { animation: none; }
  /* sin barrido, el anillo se muestra completo y quieto (no un arco a medias) */
  .btn-iridescent .iri-ring::before {
    background: linear-gradient(115deg,
      #FF9A3D 0%, #FFE43D 18%, #FF4FA0 38%, #35A0FF 68%, #7DEBFF 100%);
  }
  .btn-iridescent .iri-glow { opacity: 0.5; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}