/* ============================================================================
   Travel Explorer — V6 · TOKENS DE MARCA
   ----------------------------------------------------------------------------
   ÚNICO lugar donde viven los colores de marca. Ningún otro CSS del proyecto
   debe escribir un hex de marca: siempre var(--...).

   PENDIENTES DE MANUAL DE MARCA (reemplazar acá y se propaga a todo el sitio):
   · --brand-orange  → el manual Travel Luxury define #F05A00 (C0 M70 Y100 K0)
                       pero se lo asigna a la submarca "Rental Equipment".
                       CONFIRMAR con el manual definitivo antes de producción.
   · --font-display  → TT Rounds Condensed es comercial (licencia pendiente).
                       Hoy suple Signika Negative de Google Fonts.
   · El logo vive en /assets/brand/ — ver LEEME.txt de esa carpeta.
   ========================================================================== */

:root {
  /* ---- Marca ------------------------------------------------------------ */
  --brand-orange:        #F05A00;   /* naranja de marca puro: barras, iconos, acentos sin texto */
  --brand-orange-hover:  #E85400;
  /* Superficies que llevan TEXTO BLANCO encima. El naranja puro sobre blanco da
     3.4:1 (no llega a AA 4.5:1); esta variante da 4.8:1 y sigue leyéndose naranja.
     Si el manual define un naranja distinto, ajustar las tres variantes juntas. */
  --brand-orange-strong: #C94800;
  --brand-orange-ink:    #C24400;   /* naranja como TEXTO sobre fondo blanco (AA) */
  --brand-orange-soft:   rgba(240, 90, 0, .12);

  /* ---- Precio ------------------------------------------------------------
     El precio va en NEGRO. La variable queda centralizada por si más adelante
     se quiere probar otro color: se cambia acá y se propaga a todo el sitio. */
  --price:        #12211F;
  /* Precio tachado cuando hay oferta (fucsia de marca) */
  --price-offer:  #D6007F;

  /* ---- Superficies: VERDE DE MARCA (teal del manual) → blanco -------------
     Nada de verdes pastel o lavados: se usa el teal institucional saturado
     #2E7A75 y su versión profunda #12302E. El naranja es el contraste.
     Estos son los colores del manual Travel Luxury (brief §2.2).           */
  --surface-950:  #0D2422;   /* el más profundo: overlays y sombras */
  --surface-900:  #12302E;   /* verde profundo: home, navbar, footer, drawer */
  --surface-800:  #2E7A75;   /* Teal Institucional del manual: banda alterna */
  --surface-700:  #3A8F89;   /* hover sobre superficies oscuras */
  --surface-100:  #F3F5F5;   /* fondo claro alterno */
  --surface-50:   #FAFBFB;
  --surface-0:    #FFFFFF;

  /* ---- Texto ------------------------------------------------------------ */
  --ink:          #12211F;
  --ink-soft:     #55635F;
  --ink-faint:    #82918D;
  --on-dark:      #FFFFFF;
  /* Texto secundario sobre verde. Tiene que ser claro: sobre el teal pleno
     (#2E7A75) un gris medio no llega a 4.5:1. Este da 4.6:1. */
  --on-dark-soft: #EDF4F3;
  --line:         #E1E7E6;
  --line-dark:    rgba(255, 255, 255, .16);

  /* ---- Estados ---------------------------------------------------------- */
  --ok:      #1E8E5A;
  --warn:    #B7791F;
  --danger:  #C0392B;

  /* ---- Tipografía ------------------------------------------------------- */
  --font-display: "Signika Negative", "Trebuchet MS", sans-serif; /* placeholder TT Rounds Condensed */
  --font-body:    "Montserrat", "Segoe UI", system-ui, sans-serif;

  /* ---- Forma y profundidad ---------------------------------------------- */
  --radius:     14px;
  --radius-sm:  9px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 3px rgba(14, 16, 19, .10), 0 6px 18px rgba(14, 16, 19, .07);
  --shadow-2: 0 8px 34px rgba(14, 16, 19, .18);
  --shadow-3: 0 20px 60px rgba(14, 16, 19, .30);

  /* ---- Movimiento (Emil: entradas ease-out, hovers 100-160ms) ----------- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --t-fast:    .14s;
  --t-mid:     .24s;
  --t-slow:    .42s;

  /* ---- Capas ------------------------------------------------------------ */
  --z-sticky: 40;
  --z-sheet-backdrop: 60;
  --z-sheet: 70;
  --z-nav: 80;
  --z-fab: 85;
  --z-drawer: 100;
  --z-modal: 120;
}