/* ============================================================
   DESIGN TOKENS — generado por skill-fusion-v1
   Color base : #3d7dff
   Estilo     : dark-neon (Dark neón futurista)
   Contraste  : todos los pares de texto verificados WCAG AA (4.5:1)
   NO edites este archivo a mano. Regenéralo:
     node ~/.claude/skills/skill-fusion-v1/scripts/palette.mjs \
       --color "#3d7dff" --estilo dark-neon --out <ruta>/tokens.css
   ============================================================ */

:root {
  /* ---------- Tipografía ---------- */
  --font-display: "Sora", "Outfit", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  /* alias heredado de tourism-web-v4 (no lo borres, styles.css lo usa) */
  --font-editorial: var(--font-display);

  --fs-hero:    clamp(2.9rem, 9vw, 7.5rem);
  --fs-h2:      clamp(2rem, 5.2vw, 3.9rem);
  --fs-h3:      clamp(1.35rem, 2.6vw, 2rem);
  --fs-eyebrow: clamp(.68rem, 1.1vw, .8rem);
  --fs-lead:    clamp(1.02rem, 1.6vw, 1.22rem);
  --fs-body:    clamp(.98rem, 1.25vw, 1.05rem);
  --fs-small:   .86rem;

  --lh-display: .96;
  --lh-body:    1.68;
  --ls-hero:    -.02em;
  --ls-eyebrow: .34em;

  /* ---------- Fondos ---------- */
  /* ⛔ REGLA DURA: el fondo NUNCA es blanco puro salvo en el estilo
     "corporativo". Siempre lleva un tinte del color de marca. */
  --bg:        #090D15;
  --bg-2:      #111722;
  --bg-3:      #19202E;
  --surface:   #19202E;

  --line:      rgba(255,255,255,0.13);
  --line-soft: rgba(255,255,255,0.07);

  /* ---------- Texto (todos verificados AA sobre --bg) ---------- */
  --text:      #F4F4F6;
  --text-soft: #B3BAC6;
  --text-dim:  #818A9C;      /* decorativo — NO lo uses para texto que hay que leer */

  /* ---------- Marca ---------- */
  --brand:       #3D7DFF;      /* fondos, rellenos, iconos */
  --brand-deep:  #4582FF;  /* USA ESTE cuando la marca sea TEXTO sobre --bg */
  --brand-2:     #6E34F4;     /* análogo, para degradados */
  --brand-on:    #0E192F;    /* texto ENCIMA de un botón --brand */

  --accent:      #37C4FF;
  --accent-deep: #37C4FF;
  --accent-on:   #0E262F;

  --ok:     #22C55E;
  --warn:   #F59E0B;
  --danger: #F04B4B;

  /* ---------- Degradados ---------- */
  --grad-brand: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%);
  --grad-accent: linear-gradient(120deg, var(--accent) 0%, var(--brand) 100%);
  /* Anclaje bajo el hero: tinte de marca, NUNCA negro puro */
  --grad-fade:  linear-gradient(180deg, transparent 0%, rgba(9,13,21,0.92) 100%);

  /* ---------- Sombras y glow ---------- */
  --glow-brand:  0 8px 28px -8px rgba(61,125,255,0.55);
  --glow-soft:   0 12px 38px -14px rgba(61,125,255,0.30250000000000005);
  --glow-accent: 0 8px 26px -8px rgba(55,196,255,0.4675);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.35), 0 14px 40px -18px rgba(0,0,0,0.6);

  /* ---------- Glass — sobre foto o video ---------- */
  --glass-bg:       rgba(255,255,255,0.1);
  --glass-bg-hover: rgba(255,255,255,0.18);
  --glass-border:   rgba(255,255,255,0.28);
  --glass-blur:     blur(14px) saturate(160%);
  --glass-shadow:   0 8px 32px -8px rgba(0,0,0,0.35);
  --glass-text:     #FFFFFF;

  /* Tarjeta de reserva / formulario sobre video — smoke glass.
     ⛔ 30-38% de opacidad. Con 60%+ el cliente lo llama "negro y pesado". */
  --booking-bg:     rgba(17,23,34,0.34);
  --booking-text:   #FFFFFF;
  --surface-blur-bg: rgba(9,13,21,0.86);

  /* ---------- Geometría ---------- */
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   24px;
  --r-pill: 999px;
  --border-w: 1px;

  --pad-x:     clamp(1.15rem, 5vw, 5rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --maxw:      1240px;

  /* ---------- Movimiento ---------- */
  --ease:          cubic-bezier(.22,.61,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t:      .32s;
  --t-slow: .7s;

  /* ---------- Móvil ---------- */
  --tap: 48px;   /* área mínima de toque */
}

/* Compatibilidad con styles.css heredado (alias de la paleta vieja) */
:root {
  --aqua:      var(--brand);
  --aqua-deep: var(--brand-deep);
  --sky:       var(--brand-2);
  --gold:      var(--accent);
  --sun:       var(--accent);
  --coral:     var(--accent);
  --sand:      var(--bg-2);
  --palm:      var(--brand-2);
  --grad-sun:  var(--grad-accent);
  --grad-gold: var(--grad-accent);
  --glow-gold: var(--glow-accent);
}

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

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