/* ──────────────────────────────────────────────────────────
   tokens.css — Sistema de diseño "Costa" (claro, papel y mar)
   Única fuente de verdad de color, tipografía, espacio y radios.
   Naranja de La Operadora para actuar, verde mar para lo que informa, rojo coral para el precio.
   ────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Superficies: arena (página) < papel (tarjetas) */
  --bg: #FFFFFF;          /* tarjetas, cabecera */
  --bg-subtle: #F6F1E8;   /* fondo de la página: arena */
  --bg-sunken: #F3EEE5;   /* filas, elementos hundidos */

  /* Texto (contraste AA sobre --bg) */
  --ink: #14262D;
  --ink-2: #3D535C;
  --ink-3: #5E737B;

  /* Líneas */
  --line: #E8E1D5;
  --line-strong: #D2C8B6;

  /* Mar: enlaces, estados activos, autobús */
  --accent: #0B7A75;
  --accent-hover: #095F5B;
  --accent-soft: #DCEFEC;
  --on-accent: #FFFFFF;

  /* Naranja La Operadora: la acción principal (reservar, buscar) */
  --cta: #FF9F1C;
  --cta-hover: #F28C00;
  --on-cta: #2B1700;
  --grad: #FF9F1C;        /* compatibilidad: ya no hay degradados */

  --sol: #C2371B;          /* precios: rojo coral, como en el portal de La Operadora */
  --star: #F2A100;
  --scrim: rgba(20, 38, 45, 0.5);

  /* Estados (siempre con texto, nunca solo color) */
  --ok-bg: #DDF3E6;      --ok-fg: #17693A;
  --warn-bg: #FFF0D1;    --warn-fg: #8A5300;
  --bad-bg: #FDE3DE;     --bad-fg: #A82A14;
  --neutral-bg: #EEE8DC; --neutral-fg: #46585F;

  /* Tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.125rem;

  /* Espacio, radios, sombras */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
  --shadow-sm: 0 1px 0 rgba(20, 38, 45, 0.04), 0 8px 20px -14px rgba(20, 38, 45, 0.35);
  --shadow-pop: 0 24px 60px -16px rgba(20, 38, 45, 0.45), 0 0 0 1px rgba(20, 38, 45, 0.08);

  --header-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}