/**
 * Ibiza Jet Ski Beach — Design Tokens (Brand 2026)
 * Versión: 2026-04-21 (post brief v2)
 *
 * Paleta definida en:
 * .claude/proposals/ibzjsb-home-design-brief-2026-04-21.md §4
 *
 * Decisiones de marca (resumen):
 * - Turquesa primario: mantiene brand equity del logo existente
 * - Navy deep: ancla premium, transmite confianza en pagos
 * - Coral mediterráneo: sustituye el naranja anterior (look menos "tour 2000s")
 * - Dorado: solo SuperPromo y badges comerciales. No abusar.
 * - Neutros cálidos (sand): evita grises fríos de estética IT
 */

:root {
  /* ────────── PRIMARIO ────────── */
  /* Turquesa — brand equity del logo actual */
  --ijs-turquoise-50:  #E6F7F9;
  --ijs-turquoise-400: #5FD3DE;
  --ijs-turquoise-600: #00A3B4;  /* brand principal */
  --ijs-turquoise-900: #00555E;

  /* ────────── OSCURO ────────── */
  /* Navy — profundidad, confianza, lo "premium" de la paleta */
  --ijs-navy-400: #4A6B91;
  --ijs-navy-600: #1C3A5F;
  --ijs-navy-900: #0B2545;  /* texto display, fondos oscuros */

  /* ────────── ACENTO ────────── */
  /* Coral mediterráneo — sustituye el naranja histórico */
  --ijs-coral-50:  #FFEEEB;
  --ijs-coral-500: #FF8A7B;
  --ijs-coral-600: #FF6B5B;  /* CTA primario, italic editorial */
  --ijs-coral-700: #D03B25;  /* CTA + eyebrows sobre fondo claro. AA white 4.84:1. Cálido (rojo-naranja) sin caer en vinoso. */
  --ijs-coral-800: #9A2113;  /* Reserva editorial premium (AAA) */

  /* ────────── COMERCIAL ────────── */
  /* Dorado — solo SuperPromo y badges "Top ventas". No abusar. */
  --ijs-gold-50:  #FFF6E4;
  --ijs-gold-600: #F5B14E;

  /* ────────── NEUTROS CÁLIDOS ────────── */
  /* Sand — backgrounds alternos, evita grises IT fríos */
  --ijs-sand-50:  #FAF8F4;
  --ijs-sand-100: #F5F2EB;

  /* Ink — body text y UI */
  --ijs-ink-500:  #6B7280;  /* secondary text */
  --ijs-ink-900:  #1A1F2E;  /* body text */

  --ijs-white: #FFFFFF;

  /* ────────── TIPOGRAFÍA ────────── */
  --ijs-font-display: "Fraunces", ui-serif, Georgia, serif;
  --ijs-font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

  /* ────────── RADIOS ────────── */
  --ijs-radius-sm:  0.5rem;   /*  8px — elementos pequeños */
  --ijs-radius-md:  0.75rem;  /* 12px — badges pill border */
  --ijs-radius-lg:  1rem;     /* 16px — cards tour */
  --ijs-radius-xl:  1.5rem;   /* 24px — cards ubicación */

  /* ────────── SOMBRAS ────────── */
  --ijs-shadow-sm: 0 1px 2px rgba(11,37,69,0.08);
  --ijs-shadow-md: 0 1px 2px rgba(11,37,69,0.08), 0 8px 20px -8px rgba(11,37,69,0.25);
  --ijs-shadow-lg: 0 2px 4px rgba(11,37,69,0.10), 0 20px 30px -10px rgba(11,37,69,0.35);

  /* ────────── TRACKING ────────── */
  --ijs-tracking-display: -0.025em;
  --ijs-tracking-eyebrow: 0.22em;
}

/* ────────── REGLAS DE USO (comentadas, no imprimibles) ──────────
 *
 * TURQUOISE: logo + iconos clave + un detalle hero. NO en CTAs.
 * NAVY: headings display, fondos footer, texto body sobre claro.
 * CORAL: CTA primario. Hover → coral-500. Badge "Top ventas".
 * GOLD: solo banner SuperPromo + badge dorado. Si aparece 3+ veces, pierde impacto.
 * SAND-50: fondo de secciones alternas (blanco → sand-50).
 * INK-900: body por defecto. INK-500: texto secundario.
 *
 * ANTI-PATRONES:
 * - Gradientes turquesa → coral (infantil, "tour de los 2000s")
 * - Naranja clásico (#FF8C00 o similar) — usar coral-600 en su lugar
 * - Grises fríos (#9CA3AF, neutral-500 de Tailwind) — usar ink-500 cálido
 * - Texto body en turquesa (ilegible, retro)
 */

/* Skip link accesibilidad (WCAG) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--ijs-navy-900,#0B2545);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 6px 0;font:600 .95rem/1 var(--ijs-font-sans,system-ui,sans-serif);text-decoration:none;}
.skip-link:focus{left:0;outline:3px solid #fff;outline-offset:-3px;}