/* ============================================================================
   TOKENS — única fuente de verdad de la identidad visual.

   Regla del proyecto: cero literales hexadecimales fuera de este archivo. El sitio
   anterior tenía la paleta repartida por cuatro hojas, así que cambiar la marca era
   una cacería. Aquí cambiar la marca es editar el bloque MARCA de abajo.

   Dos capas a propósito:
     1. Primitivas  --brand-*, --neutral-*   valores crudos, sin significado
     2. Semánticas  --color-*, --text-*      qué papel cumple cada valor

   Los componentes solo consumen la capa semántica. Cambiar de dirección de marca es
   reasignar las semánticas, no buscar y reemplazar por todo el CSS.

   Dirección activa: paleta del sitio histórico plandeprotecciondealquiler.com (cian de
   marca), con las formas, tipografía y componentes de este rebrand. El cliente pidió el
   color del viejo, no su maquetación: Raleway y el resto del sistema (radios, motion,
   componentes) se conservan tal cual.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------- MARCA -- */
  /* Cian del sitio histórico (--ppab-cyan #4cc1d3 en su CSS). Ese valor exacto es
     demasiado claro para pasar AA como texto o como fondo con texto blanco (el sitio
     viejo no lo comprobaba; este proyecto sí lo exige, check-contrast.php). Se conserva
     como -500 para superficies grandes/decorativas y se añade un paso -700 más oscuro
     —dentro de la misma familia cian, sin inventar otro color— para todo texto, enlace
     y botón sólido. */
  --brand-900: #14646f;  /* banda de cierre / activo */
  --brand-800: #17707c;  /* hover */
  --brand-700: #1a7784;  /* texto, enlace, botón sólido — AA sobre blanco (5.2:1) */
  --brand-600: #3aaebd;  /* hover del cian viejo (--ppab-cyan-hover), decorativo */
  --brand-500: #4cc1d3;  /* cian de marca del viejo (--ppab-cyan): superficies grandes, bordes, iconos */
  --brand-400: #7ad3e0;
  --brand-200: #c8e8ee;  /* tinte claro del viejo (inputs, gradiente de sección alterna) */
  --brand-100: #e8f4f7;  /* tinte claro del viejo */
  --brand-050: #f0fbfd;  /* tinte claro del viejo */

  /* El sitio viejo no tenía una segunda familia de acento: el cian cubre marca Y acento.
     Se mapea la capa accent a la misma familia, con su paso AA-seguro para superficies con
     texto blanco (kicker, CTA) y uno más oscuro para texto/eyebrow. */
  --accent-700: #14646f;
  --accent-500: #1a7784;
  --accent-400: #4cc1d3;
  --accent-050: #f0fbfd;

  /* Tinta gris cálida de cabecera/hero/bandas oscuras. El viejo no tenía una banda oscura
     de marca (su footer es gris #222 neutro, ver NEUTRALES); se deriva de --ink-strong
     para mantener la coherencia donde este rebrand ya usa fondo oscuro (hero, cabecera). */
  --ink-950: #1c1e21;
  --ink-900: #222325;  /* footer del sitio viejo */
  --ink-800: #2b2e33;  /* --ppab-ink-strong: títulos fuertes del viejo */
  --ink-700: #3a3d42;

  /* Naranja de OMNIA. Marca externa, no nuestra: se respeta tal cual y solo se usa
     en el botón «Siniestros Omnia». Convive con el rojo (misma familia cálida). */
  --omnia-500: #fd4f00;
  --omnia-600: #e04500;

  /* ------------------------------------------------------------- NEUTRALES -- */
  /* Eje gris cálido del sitio viejo (--ppab-ink/-strong/-muted), no azulado. */
  --neutral-950: #2b2e33;  /* texto principal — --ppab-ink-strong */
  --neutral-900: #35383d;
  --neutral-700: #4b4e53;  /* --ppab-ink: cuerpo de texto del viejo */
  --neutral-600: #5c5f65;  /* texto secundario */
  /* Los dos siguientes están fijados por contraste, no por gusto: son los valores
     más claros que siguen pasando AA sobre blanco. Aclararlos rompe check-contrast.php. */
  --neutral-500: #6c7077;  /* --ppab-muted: texto atenuado, 4.5:1 sobre blanco */
  --neutral-400: #8b8f95;  /* bordes de control: 3:1 sobre blanco (WCAG 1.4.11) */
  --neutral-300: #c7cbd0;
  --neutral-200: #e2e6ea;  /* --ppab-line: bordes/líneas del viejo */
  --neutral-100: #f0f1f2;  /* fondo alterno */
  --neutral-050: #f7f8f9;  /* base — fondo de página del sitio viejo */
  --neutral-000: #ffffff;  /* tarjetas: blanco puro */

  /* ---------------------------------------------------------------- ESTADO -- */
  --success-600: #1e7a5a;
  --success-050: #e6f5ef;
  --warning-600: #8c5308;
  --warning-050: #fbf1e0;
  --danger-600: #b3261e;
  --danger-050: #fbe9e7;

  /* ================================================================ SEMÁNTICO */

  --color-primary: var(--brand-700);
  --color-primary-hover: var(--brand-800);
  --color-primary-active: var(--brand-900);
  --color-primary-soft: var(--brand-100);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-700);

  /* Página = blanco frío del sitio viejo; tarjetas y cabecera van sobre tinta o blanco
     según zona; bandas de cierre = tinta oscura (el footer del viejo es gris #222). */
  --color-page: var(--neutral-050);
  --color-surface: var(--neutral-000);
  --color-surface-alt: var(--neutral-100);
  --color-surface-sunken: var(--neutral-200);
  --color-surface-inverse: var(--ink-900);

  /* Chispa cian: CTA y acentos de acción, el cian del logo/marca histórica. */
  --color-spark: var(--accent-500);
  --color-spark-strong: var(--accent-700);

  --color-border: var(--neutral-200);
  /* Los bordes de controles interactivos necesitan 3:1 contra el fondo (WCAG 1.4.11).
     El borde claro decorativo no llega, por eso son tokens distintos: --color-border
     separa cajas, --color-border-strong delimita controles. */
  --color-border-strong: var(--neutral-400);
  /* brand-600 no llega a 3:1 (WCAG 1.4.11); brand-700 sí, con buen margen. */
  --color-border-focus: var(--brand-700);

  --text-primary: var(--neutral-950);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-000);
  --text-link: var(--brand-700);
  /* El enlace se oscurece en hover, como en el sitio viejo (cyan → cyan-dark). */
  --text-link-hover: var(--accent-700);

  /* =============================================================== TIPOGRAFÍA */
  /* Autohospedadas en assets/fonts/ como WOFF2. Nada de Google Fonts: cada host
     externo hay que meterlo en la CSP, y un fallo ahí se bloquea en silencio.
     Autohospedar también quita el preconnect y una petición de terceros del LCP. */
  /* Raleway en todo. El cliente pidió el color de marca del sitio viejo, no su
     tipografía (Lato/Open Sans): se mantiene Raleway, la que ya llevaba este rebrand.
     El contraste lo da el PESO (titulares 700/800 vs texto 400/500), no dos familias.
     Las otras cinco familias se han quitado del repositorio: ningún token las aplicaba. */
  --font-sans: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Raleway", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Escala fluida. El mínimo es el valor a 375px y el máximo a 1440px, así que no
     hacen falta media queries para el tamaño de letra. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem);
  --text-2xl: clamp(1.4375rem, 1.27rem + 0.71vw, 1.875rem);
  --text-3xl: clamp(1.75rem, 1.47rem + 1.19vw, 2.5rem);
  --text-4xl: clamp(2.125rem, 1.66rem + 1.98vw, 3.375rem);
  --text-5xl: clamp(2.5rem, 1.79rem + 3.02vw, 4.375rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Raleway aguanta un tracking ligeramente negativo en titulares grandes. */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* Medida de línea. 65ch en cuerpo de texto: por encima, el ojo pierde el renglón
     al saltar. El artículo del blog lo tenía acotado a 780px por lo mismo. */
  --measure: 65ch;
  --measure-narrow: 46ch;

  /* ================================================================= ESPACIO */
  /* Escala de 4px. Los saltos son deliberadamente no lineales arriba: entre 64 y
     96px la diferencia se percibe, entre 64 y 72 no. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Ritmo vertical entre secciones, fluido. */
  --section-y: clamp(3rem, 2rem + 4.3vw, 6rem);
  --section-y-lg: clamp(4rem, 2.5rem + 6.4vw, 8rem);

  --container: 74rem;
  --container-wide: 90rem;
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 0.6rem + 1.7vw, 2rem);

  /* ================================================================= FORMA */
  /* Radios moderados, corporativos (7–24px como la referencia). Nada de píldoras
     enteras salvo chips y el avatar de foco. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --border-width: 1px;

  /* Sombras teñidas con la tinta (--ink-800) en lugar de negro puro: el negro sobre
     fondos de color se ve gris sucio. Contenidas y nítidas. */
  --shadow-xs: 0 1px 2px rgb(43 46 51 / 0.06);
  --shadow-sm: 0 1px 3px rgb(43 46 51 / 0.08), 0 1px 2px rgb(43 46 51 / 0.05);
  --shadow-md: 0 6px 16px rgb(43 46 51 / 0.10), 0 2px 5px rgb(43 46 51 / 0.06);
  --shadow-lg: 0 16px 40px rgb(43 46 51 / 0.14), 0 5px 12px rgb(43 46 51 / 0.08);
  --shadow-focus: 0 0 0 3px rgb(76 193 211 / 0.35);

  /* ============================================================== MOVIMIENTO */
  /* Principios Emil: toda animación da feedback, ninguna decora. */
  --duration-instant: 100ms;
  --duration-fast: 150ms;   /* hover, focus */
  --duration-base: 200ms;   /* transiciones de estado */
  --duration-slow: 300ms;   /* modales, paneles */
  --duration-slower: 450ms; /* entradas por scroll */
  --duration-carousel: 600ms; /* transición de diapositiva */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* =================================================================== CAPAS */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* Preferencia del sistema respetada de raíz. No se elimina la transición del todo
   (`none` rompe librerías que esperan un evento transitionend), se reduce a un
   valor imperceptible. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-slower: 0.01ms;
    --duration-carousel: 0.01ms;
  }
}