/**
 * VibeLocal — Design tokens
 * ============================================================================
 *
 * Fuente única de verdad del sistema de diseño. Ningún fichero del rediseño
 * escribe un color, un tamaño o un radio a pelo: todo sale de aquí.
 *
 * REGLA DE CONTRASTE
 * Todos los pares texto/fondo de este fichero están calculados, no estimados.
 * El ratio real va anotado en cada token que se usa como texto. Mínimos:
 *   - texto normal (<18.66px o <24px sin negrita) ..... 4.5:1
 *   - texto grande (>=18.66px negrita o >=24px) ....... 3.0:1
 *   - iconos y bordes con significado ................. 3.0:1
 * La página /styleguide/ recalcula estos ratios en vivo: si alguien cambia un
 * valor aquí y baja del mínimo, la styleguide lo marca en rojo.
 *
 * POR QUÉ EL TEAL DE MARCA NO ES EL TEAL DE BOTÓN
 * #38B5BD sobre blanco da 2.47:1. No puede llevar texto ni ser un icono suelto.
 * Vive en el escalón 400 y se usa en superficies, fondos y acentos. La acción
 * interactiva usa 500-700. Es la misma conclusión a la que ya había llegado el
 * código antiguo (style.css:1267), pero resuelta con una escala en vez de
 * abandonando el color de marca.
 */

:root {
  /* ══ COLOR: primitivas ═══════════════════════════════════════════════════ */

  /* Teal — color primario. 400 es el teal de marca. */
  --vl-teal-50:  #EFF9FA;
  --vl-teal-100: #D3EFF2;
  --vl-teal-200: #A8DFE4;
  --vl-teal-300: #6FCAD2;
  --vl-teal-400: #38B5BD;  /* marca · 2.47:1 · superficies e iconos sobre tinte */
  --vl-teal-500: #1E9BA4;  /* 3.34:1 · medallones, iconos, texto >=24px */
  --vl-teal-600: #137E88;  /* 4.81:1 · botón primario y enlaces */
  --vl-teal-700: #0F646D;  /* 6.85:1 · texto de dato destacado */
  --vl-teal-800: #0E5058;  /* 9.10:1 · texto sobre tinte teal */
  --vl-teal-900: #0B3B41;  /* 12.24:1 */

  /* Naranja — acento. 500 es el naranja de marca. */
  --vl-orange-50:  #FEF4EA;
  --vl-orange-100: #FCE3C8;
  --vl-orange-200: #F9C692;
  --vl-orange-300: #F7A455;
  --vl-orange-400: #F58C2C;
  --vl-orange-500: #EE7411;  /* marca · 2.94:1 · superficies y degradados */
  --vl-orange-600: #CE5B08;  /* 4.10:1 · CTA grande (>=18px/700) y medallones */
  --vl-orange-700: #A5460B;  /* 6.03:1 · texto y botones pequeños */
  --vl-orange-800: #82380F;  /* 8.33:1 · texto sobre tinte naranja */
  --vl-orange-900: #5B2708;  /* 12.08:1 */

  /* Ink — neutros con una gota de teal, para que no choquen con el primario. */
  --vl-ink-50:  #F6F8F9;
  --vl-ink-100: #ECEFF1;
  --vl-ink-200: #DCE2E6;
  --vl-ink-300: #BAC5CC;   /* separadores decorativos */
  --vl-ink-400: #8B9AA4;   /* 2.89:1 · SOLO iconos decorativos, nunca texto */
  --vl-ink-500: #657782;   /* 4.65:1 · mínimo absoluto para texto */
  --vl-ink-600: #4C5C66;   /* 6.93:1 · texto secundario */
  --vl-ink-700: #38454D;   /* 9.88:1 · cuerpo */
  --vl-ink-800: #263137;   /* 13.32:1 */
  --vl-ink-900: #131C21;   /* 17.27:1 · titulares */

  --vl-white: #FFFFFF;

  /* Estado. Verde y rojo ya corregidos para pasar AA sobre blanco. */
  --vl-open:    #17803F;   /* 5.00:1 · "Open now" */
  --vl-closed:  #C4341C;   /* 5.45:1 · cerrado y errores */
  --vl-fav:     #E23D5B;   /* 4.16:1 · favorito activo (icono) */
  --vl-gold:    #E8A317;   /* fondo del badge Featured; su texto va en ink-900, 7.96:1 */

  /* Categorías. Cuatro tonos para las tarjetas de la landing de zona.
     Son fondos de imagen con degradado encima: el texto siempre va blanco
     sobre el extremo oscuro, nunca sobre el claro. */
  --vl-cat-food:  #C2410C;
  --vl-cat-see:   #0E5058;
  --vl-cat-do:    #6D28D9;
  --vl-cat-deals: #BE185D;

  /* ══ COLOR: semántica ════════════════════════════════════════════════════ */
  /* Las plantillas usan ESTOS, no las primitivas de arriba. */

  --vl-bg:              var(--vl-white);
  --vl-bg-sunken:       var(--vl-ink-50);
  --vl-bg-raised:       var(--vl-white);
  --vl-bg-tint:         var(--vl-teal-50);
  --vl-bg-tint-accent:  var(--vl-orange-50);

  --vl-text:            var(--vl-ink-900);
  --vl-text-body:       var(--vl-ink-700);
  --vl-text-muted:      var(--vl-ink-600);
  --vl-text-faint:      var(--vl-ink-500);   /* el más claro permitido para texto */
  --vl-text-on-dark:    var(--vl-white);

  --vl-border:          var(--vl-ink-200);   /* decorativo */
  --vl-border-strong:   var(--vl-ink-500);   /* campos de formulario, 4.65:1 */

  --vl-action:          var(--vl-teal-600);
  --vl-action-hover:    var(--vl-teal-700);
  --vl-action-tint:     var(--vl-teal-50);
  --vl-accent:          var(--vl-orange-600); /* solo con texto >=18px/700 */
  --vl-accent-strong:   var(--vl-orange-700); /* obligatorio por debajo de eso */
  --vl-accent-tint:     var(--vl-orange-50);

  --vl-focus:           var(--vl-teal-700);

  /* ══ TIPOGRAFÍA ══════════════════════════════════════════════════════════ */
  /*
   * Tres roles, tres familias, cada una con un trabajo:
   *   display  Plus Jakarta Sans — titulares y nombres de negocio. Tiene
   *            personalidad en 700/800 sin caer en el geométrico de catálogo.
   *   ui       Inter — datos densos del directorio (horarios, distancias,
   *            precios, contadores). Sus cifras tabulares son la razón de que
   *            esté aquí: una columna de horarios con Jakarta baila.
   *   script   Yellowtail — UNA palabra por página, en el hero. Nada más.
   *            Es el acento; en cuanto se usa dos veces deja de serlo.
   */
  --vl-font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vl-font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vl-font-script:  'Yellowtail', 'Brush Script MT', cursive;
  /* Sólo el titular del hero. Ver el @font-face en base.css. */
  --vl-font-hero:    'League Spartan', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  --vl-fw-regular:  400;
  --vl-fw-medium:   500;
  --vl-fw-semibold: 600;
  --vl-fw-bold:     700;
  --vl-fw-black:    800;

  /* Escala fluida. El mínimo es el valor en móvil, el máximo en escritorio. */
  --vl-text-2xs:  0.6875rem;                          /* 11px · overline */
  --vl-text-xs:   0.75rem;                            /* 12px · meta */
  --vl-text-sm:   0.875rem;                           /* 14px */
  --vl-text-base: 1rem;                               /* 16px · cuerpo */
  --vl-text-lg:   clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
  --vl-text-xl:   clamp(1.1875rem, 0.6vw + 1.06rem, 1.375rem);
  --vl-text-2xl:  clamp(1.375rem, 1.1vw + 1.13rem, 1.75rem);
  --vl-text-3xl:  clamp(1.75rem, 2vw + 1.31rem, 2.5rem);    /* nombre de negocio */
  --vl-text-4xl:  clamp(2.125rem, 3.2vw + 1.4rem, 3.25rem);
  --vl-text-5xl:  clamp(2.5rem, 5vw + 1.4rem, 4.5rem);      /* hero */
  --vl-text-script: clamp(3.25rem, 9vw + 1rem, 7rem);       /* la palabra del hero */

  --vl-leading-tight:  1.1;
  --vl-leading-snug:   1.28;
  --vl-leading-normal: 1.5;
  --vl-leading-relaxed: 1.65;

  --vl-tracking-tight: -0.02em;   /* titulares grandes */
  --vl-tracking-normal: 0;
  --vl-tracking-wide:  0.06em;    /* overlines en mayúsculas */

  /* ══ ESPACIADO ═══════════════════════════════════════════════════════════ */
  /* Base 4px. Sin valores intermedios: si hace falta uno, es que el layout
     está mal resuelto. */
  --vl-space-1:  0.25rem;
  --vl-space-2:  0.5rem;
  --vl-space-3:  0.75rem;
  --vl-space-4:  1rem;
  --vl-space-5:  1.25rem;
  --vl-space-6:  1.5rem;
  --vl-space-8:  2rem;
  --vl-space-10: 2.5rem;
  --vl-space-12: 3rem;
  --vl-space-16: 4rem;
  --vl-space-20: 5rem;

  /* ══ FORMA ═══════════════════════════════════════════════════════════════ */
  --vl-radius-sm:   0.5rem;
  --vl-radius-md:   0.75rem;
  --vl-radius-lg:   1rem;      /* tarjetas */
  --vl-radius-xl:   1.25rem;   /* tarjetas grandes y hero */
  --vl-radius-2xl:  1.75rem;
  --vl-radius-pill: 999px;     /* chips y botones */

  /* Sombras discretas: el mockup es claro y aireado, no material design. */
  --vl-shadow-sm: 0 1px 2px rgba(19, 28, 33, 0.06);
  --vl-shadow-md: 0 2px 8px rgba(19, 28, 33, 0.08);
  --vl-shadow-lg: 0 8px 24px rgba(19, 28, 33, 0.10);
  --vl-shadow-nav: 0 -2px 12px rgba(19, 28, 33, 0.08);

  /* ══ MOVIMIENTO ══════════════════════════════════════════════════════════ */
  --vl-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --vl-duration-fast: 120ms;
  --vl-duration:      200ms;
  --vl-duration-slow: 320ms;

  /* ══ LAYOUT ══════════════════════════════════════════════════════════════ */
  --vl-container:      1200px;
  /* Listado y búsqueda: lista y mapa en paralelo piden casi toda la pantalla.
     El tope sólo existe para que en un monitor ultrapanorámico el mapa no se
     estire hasta lo absurdo; por debajo de 2400px es ancho completo. */
  --vl-container-wide: 2400px;
  --vl-container-text: 68ch;    /* medida de lectura para descripciones */
  --vl-gutter:         var(--vl-space-4);

  /* Heredados del sistema antiguo: mismos nombres y mismos valores, para no
     romper las reglas de style.css que ya los consumen. */
  --vl-bottom-nav-h:   70px;
  --vl-bottom-nav-gap: 24px;

  --vl-header-h: 60px;
  --vl-tap-min:  44px;   /* objetivo táctil mínimo */

  /* ══ CAPAS ═══════════════════════════════════════════════════════════════ */
  --vl-z-base:     1;
  --vl-z-sticky:   100;
  --vl-z-header:   200;
  --vl-z-bottomnav: 300;
  --vl-z-backdrop: 400;
  --vl-z-drawer:   500;
  --vl-z-modal:    600;
}

/*
 * BREAKPOINTS — no son custom properties porque @media no las acepta.
 * Se documentan aquí para que haya un único sitio donde consultarlos.
 * Sustituyen a los nueve valores ad-hoc que hay hoy repartidos por el CSS.
 *
 *   sm    480px    móvil grande
 *   md    768px    tablet vertical · la grid pasa a 2 columnas
 *   lg   1024px    tablet apaisada · desaparece la bottom-nav, aparece el nav
 *   xl   1280px    escritorio · la ficha pasa a dos columnas
 */

@media (prefers-reduced-motion: reduce) {
  :root {
    --vl-duration-fast: 0ms;
    --vl-duration:      0ms;
    --vl-duration-slow: 0ms;
  }
}