/* Enix 3.0 Design Tokens — Stage 1
   --------------------------------------------------------------
   Source of truth: Enix3Proto (1).html at the project root.
   Load order: this file MUST be the first stylesheet in index.html
   so every other CSS (Bootstrap, Telerik/Kendo, Syncfusion, app
   CSS) can resolve var(--token) references against it.

   Do NOT add component-specific rules to this file. Only token
   declarations live here. Component styling will be layered in
   later stages on top of these variables.
   -------------------------------------------------------------- */

:root {
  /* ── Brand / palette ──────────────────────────────────────── */
  --navy:        #0d2240;
  --navy2:       #1a3a5c;
  --blue:        #1e5fa8;
  --blue-lt:     #eff6ff;
  --blue-md:     #dbeafe;
  /* Mismos colores en "r, g, b" para transparencias: rgba(var(--navy-rgb), .5) */
  --navy-rgb:    13, 34, 64;
  --blue-rgb:    30, 95, 168;
  /* Variantes de marca: tonos que la UI ya usaba sueltos (valores exactos, no cambian nada).
     Una marca blanca los remapea a su paleta desde su index_<X>.html. */
  --navy-deep:   #0e1836;   /* login, loader de prebooking */
  --navy-ink:    #0f2038;   /* texto de filtros de hoteles */
  --navy-soft:   #1e3a5f;   /* pagos */
  --navy-mid:    #2c5078;   /* tabs de producto, iconos */
  --blue-legacy: #124c81;   /* primario Cartzilla viejo, spinners */
  --blue-legacy-rgb: 18, 76, 129;
  --blue-bright: #4f8ef7;   /* focos/acentos de pagos, comisiones, cotizador */
  --blue-bright-rgb: 79, 142, 247;
  --blue-vivid:  #2a7de1;   /* selector de fotos */
  --blue-login:  #1763ac;   /* login */
  --blue-login-rgb: 23, 99, 172;
  --blue-login2: #2e86c9;   /* login: pareja del gradiente */
  --navy-hero-mid:    #122c50;   /* gradiente del banner del buscador (.enix-hero) */
  --navy-hero-end:    #143258;
  --navy-summary-end: #16335a;   /* gradiente de la barra de resumen (.dhr-summary) */
  --blue-sky:    #7eb6f0;   /* iconos claros sobre fondo oscuro */
  --blue-muted:  #5b7da8;   /* boton buscar en estado "buscando" */
  --blue-muted2: #4a7aaa;   /* hover del boton volver arriba */
  --accent:      #f97316;
  --gold:        #f59e0b;
  --purple:      #7c3aed;
  --purple-lt:   #f5f3ff;
  --teal:        #0ea5e9;
  --green:       #16a34a;
  --green-lt:    #dcfce7;
  --amber:       #d97706;
  --amber-lt:    #fef3c7;
  --indigo:      #4f46e5;
  --indigo-lt:   #eef2ff;
  --rose:        #e11d48;
  --rose-lt:     #fff1f2;
  --emerald:     #059669;
  --emerald-lt:  #d1fae5;
  --red:         #bd5656;
  --red-lt:      #fee2e2;
  --yellow-lt:   #fef9c3;
  --yellow:      #854d0e;
  --white:       #ffffff;
  --gray50:      #f8fafc;
  --gray100:     #f1f5f9;
  --gray200:     #e2e8f0;
  --gray400:     #94a3b8;
  --gray500:     #64748b;
  --gray600:     #475569;
  --gray700:     #334155;
  --gray800:     #1e293b;

  /* ── Radius & shadow ──────────────────────────────────────── */
  --r:           12px;     /* default border-radius */
  --r-sm:        8px;
  --r-lg:        18px;
  --r-full:      9999px;
  --sh:          0 2px 12px rgba(0, 0, 0, .08);
  --sh-lg:       0 8px 40px rgba(0, 0, 0, .16);
  --sh-sm:       0 1px 4px  rgba(0, 0, 0, .06);

  /* ── Typography ───────────────────────────────────────────── */
  --font-base:   'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-nav:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:     10.5px;
  --text-sm:     12px;
  --text-md:     13.5px;
  --text-base:   14px;
  --text-lg:     15px;
  --text-xl:     17px;
  --text-2xl:    20px;
  --text-3xl:    24px;
  --fw-normal:   400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ══════════════════════════════════════════════════════════
     SEMANTIC TOKENS  —  derived from the palette above.
     Use these in component CSS instead of the raw palette
     values whenever the role is meaningful (surface, badge…).
     ══════════════════════════════════════════════════════════ */

  /* Surfaces */
  --surface-page:        var(--gray50);
  --surface-card:        var(--white);
  --surface-border:      var(--gray200);

  /* Navigation */
  --nav-topbar-bg:       var(--navy);
  --nav-topbar-text:     rgba(255, 255, 255, .7);
  --nav-navbar-bg:       var(--white);
  --nav-navbar-height:   60px;
  --nav-navbar-border:   var(--gray200);
  --nav-modulebar-bg:    var(--white);
  /* Duplica --nav-navbar-height (la module bar arranca donde termina el navbar): los dos se
     cambian JUNTOS o la barra queda pisada / con un hueco. */
  --nav-modulebar-top:   60px;
  /* Eliminada; el token se mantiene en 0 para que los calc(... + modulebar + N)
     existentes colapsen al valor correcto sin tocar cada archivo. */
  --nav-modulebar-height: 0px;
  --nav-product-tabs-height: 60px;
  --nav-subtabs-height:  38px;
  --nav-summary-height:  46px;
  --nav-active-color:    var(--blue);

  /* Interactive */
  --btn-primary-bg:      var(--blue);
  --btn-primary-hover:   var(--blue-hover);
  --btn-primary-text:    #ffffff;
  --input-height:        42px;
  --input-border:        var(--gray200);
  --input-border-focus:  var(--blue);
  --input-radius:        var(--r-sm);
  --input-focus-ring:    0 0 0 3px rgba(var(--blue-rgb), .10);

  /* Status badges */
  --badge-success-bg:    var(--green-lt);
  --badge-success-text:  var(--green);
  --badge-warning-bg:    var(--amber-lt);
  --badge-warning-text:  var(--amber);
  --badge-error-bg:      var(--red-lt);
  --badge-error-text:    var(--red);
  --badge-info-bg:       var(--blue-md);
  --badge-info-text:     var(--blue);
  --badge-neutral-bg:    var(--gray100);
  --badge-neutral-text:  var(--gray600);
}