/*
 * Autos Valls · Theme v2 — tokens de marca
 * ----------------------------------------
 * Fuente de verdad: la marca REAL de Autos Valls.
 *   - Opcion Redux `WPR` del tema en produccion (de donde salen los hex).
 *   - clientes/autosvalls/02-brand-guide/brand-guide-autosvalls.md
 * Jira: AUTOVA-66 (AV-T-062), epica AUTOVA-65 (EP-9 · Theme v2).
 *
 * Este archivo SOLO declara variables. No pinta nada.
 * Se carga en los 7 subsitios de la red; la maquetacion vive en theme-v2-home.css.
 *
 * POR QUE CAMBIARON LOS VALORES (2026-08-06)
 * ------------------------------------------
 * La primera version de este archivo decia seguir la "Guia de Marca Autos Valls
 * v1.0". Esa guia la habia GENERADO Claude Design, no es la marca de la empresa:
 * proponia Montserrat y #3498DB, que es el azul por defecto de Flat UI. Los
 * valores de abajo son los que usa el tema en produccion desde hace anos.
 *
 *   Titulares ... Montserrat -> Sora
 *   Cuerpo ...... Open Sans  -> Manrope
 *   Marino ...... #1A3A5C    -> #003069
 *   Cielo ....... #3498DB    -> #00a6e2
 *
 * CONSECUENCIA QUE NO ES OBVIA: el cian nuevo es mas claro que el viejo y sobre
 * blanco da 2.78:1. NO puede llevar texto blanco encima. Por eso:
 *   - Los botones son MARINO con texto blanco (12.9:1). La guia de marca ya lo
 *     dice: "Azul Valls · barra superior, BOTONES, y el color del texto".
 *   - El cian queda para lo que confirma o esta activo: subrayado del menu,
 *     chip pulsado, anillo de foco, el check del logo. Cuando hace de fondo,
 *     el texto encima va en MARINO (4.64:1), nunca en blanco.
 *
 * NO "simplificar" --av-enlace a --av-cielo: #00a6e2 sobre blanco no llega al
 * minimo WCAG AA de 4.5:1 para texto de cuerpo. Por eso existe #00789f.
 */

:root {
    /* --- Color de marca ------------------------------------------------ */
    --av-cielo: #00a6e2;        /* Cian Valls. ACENTO: activo, confirmado, foco. Nunca bajo texto blanco */
    --av-cielo-hover: #33bbeb;  /* Hover del cian. Aclara, no oscurece: asi el texto marino mantiene contraste */
    --av-marino: #003069;       /* Azul Valls. Titulares, cuerpo, botones, footer, fondos oscuros */
    --av-marino-900: #00224b;   /* Hover de boton, franjas */
    --av-marino-950: #001a3a;   /* Topbar */
    --av-arena: #F5F0E6;        /* Arena Cala. Secciones calidas, barra de ventajas */
    --av-verde: #1E8449;        /* Disponible, confirmado */
    --av-coral: #E74C3C;        /* Ofertas y errores. Maximo 5% de la pieza */
    --av-enlace: #00789f;       /* Enlace sobre blanco. NO usar --av-cielo aqui */

    /* --- Neutros (rederivados del marino real) -------------------------- */
    --av-texto-2: #003069;      /* Cuerpo. NO es gris: la guia insiste en que el texto es azul marino */
    --av-texto-3: #4a6b8f;      /* Texto terciario, etiquetas de campo */
    --av-borde: #dfe6ef;        /* Bordes de tarjeta e input */
    --av-fondo-suave: #f1f5fa;  /* Fondo de seccion suave */
    --av-sobre-marino: #b8d4ea; /* Texto secundario sobre fondo marino */
    --av-eyebrow: #7fb3d9;      /* Eyebrows y etiquetas sobre marino */

    /* --- Forma --------------------------------------------------------- */
    --av-r-boton: 8px;
    --av-r-tarjeta: 14px;
    --av-r-bloque: 16px;
    --av-r-pill: 999px;

    --av-sombra-suave: 0 14px 32px rgba(0, 48, 105, .14);
    --av-sombra-fuerte: 0 20px 50px rgba(0, 48, 105, .18);
    --av-focus: 0 0 0 3px rgba(0, 166, 226, .28);

    /* --- Movimiento ---------------------------------------------------- */
    /* Transiciones de 0.2-0.25s ease. Sin rebotes ni parallax. */
    --av-transicion: .2s ease;

    /* --- Tipografia ---------------------------------------------------- */
    --av-fuente-titulo: 'Sora', system-ui, sans-serif;
    --av-fuente-texto: 'Manrope', system-ui, sans-serif;
}

/*
 * ESCALA TIPOGRAFICA (ratio 1.25, base 16px).
 * Se documenta aqui como referencia; la aplican las hojas de maquetacion.
 *
 *   Estilo       Desktop        Movil          Peso / familia
 *   ----------   ------------   ------------   ----------------------------
 *   H1           48px / 1.1     32px / 1.15    Sora 800
 *   H2           36px / 1.15    26px / 1.2     Sora 800
 *   H3           26px / 1.25    21px / 1.3     Sora 600
 *   H4           20px / 1.3     18px / 1.35    Sora 600
 *   Body         16px / 1.5     16px / 1.55    Manrope 400
 *   Body small   14px / 1.55    14px / 1.6     Manrope 400
 *   Caption      12px / 1.4     12px / 1.4     Manrope 400
 *   Boton        16px +0.5px    16px           Sora 700
 *   Eyebrow      12px +1.8px    11px           Sora 700 caps
 *
 * Reglas:
 *   - Maximo dos pesos por pieza.
 *   - Nunca cursivas en Sora.
 *   - Medida de linea: 60-75 caracteres.
 *   - Los numeros de precio SIEMPRE en Sora 800.
 *
 * CONTRASTES RECALCULADOS (WCAG 2.1, 2026-08-06):
 *   Marino sobre blanco ......... 12.9:1  AAA
 *   Blanco sobre marino ......... 12.9:1  AAA
 *   Marino sobre arena .......... 11.5:1  AAA
 *   Marino sobre cielo ..........  4.6:1  AA  <- asi va el texto sobre cian
 *   Blanco sobre cielo ..........  2.8:1  PROHIBIDO
 *   Cielo sobre blanco ..........  2.8:1  INSUFICIENTE en cuerpo -> usar --av-enlace
 *   Enlace sobre blanco .........  5.0:1  AA
 *   Texto-3 sobre blanco ........  5.5:1  AA
 *   Sobre-marino sobre marino ...  8.4:1  AAA
 *   Eyebrow sobre marino ........  5.8:1  AA
 *
 * PROHIBIDO:
 *   - Texto blanco sobre cian (2.8:1)
 *   - Cian como fondo de grandes superficies: satura
 *   - Coral y verde juntos como pareja principal
 *   - Texto sobre foto sin velo ni sombra
 *   - Transmitir estado solo con color, sin icono ni etiqueta
 */