/* ============================================================
   Senior Rides Mobile — Design Tokens
   Paleta de marca (derivada de las tarjetas de la clienta) + tipografía.
   Copia este archivo al proyecto y usa las variables en todo el CSS.
   ============================================================ */

:root {
  /* ---------- COLORES DE MARCA ---------- */
  --navy:        #17284B;  /* Azul marino. Texto principal, encabezados, footer, líneas. */
  --navy-2:      #0F1D3A;  /* Navy más oscuro (hover de botones oscuros, gradientes). */
  --royal:       #2C5AA6;  /* Azul royal. Botones, enlaces, acentos. */
  --royal-2:     #234A8C;  /* Royal más oscuro (hover de botón primario). */
  --sun:         #2E6FD0;  /* Azul del sol. Destacados brillantes, íconos activos. */
  --sky:         #EAF2FB;  /* Celeste muy claro. Fondos de secciones suaves. */
  --hill-light:  #B7D2EF;  /* Celeste claro (ola de atrás del logo). Detalles/divisores. */
  --hill-med:    #7FAAD9;  /* Azul medio (ola de adelante). Detalles/ilustración. */

  /* ---------- NEUTROS ---------- */
  --white:       #FFFFFF;
  --bg:          #FFFFFF;  /* Fondo base de la página. */
  --bg-alt:      #F5F8FC;  /* Fondo alterno (secciones intercaladas). */
  --ink:         #17284B;  /* Texto principal (= navy). */
  --ink-soft:    #4A5B78;  /* Texto secundario / párrafos largos. */
  --muted:       #7A879C;  /* Texto tenue, leyendas, placeholders. */
  --line:        #E2E8F2;  /* Bordes y separadores sutiles. */

  /* ---------- SEMÁNTICOS ---------- */
  --focus:       #2E6FD0;  /* Anillo de foco accesible. */
  --success:     #2E7D5B;
  --warning:     #C9862B;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-head: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Base grande y legible: público adulto mayor + hijos que deciden. */
  --fs-base: 18px;         /* nunca menos de 16px en body */
  --lh-body: 1.65;
  --lh-head: 1.12;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* Escala tipográfica (fluida) */
  --h1: clamp(2.2rem, 5vw, 3.6rem);
  --h2: clamp(1.7rem, 3.5vw, 2.6rem);
  --h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --lead: clamp(1.1rem, 1.6vw, 1.35rem);

  /* ---------- FORMA Y PROFUNDIDAD ---------- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(23,40,75,.06);
  --shadow: 0 10px 30px rgba(23,40,75,.10);
  --shadow-lg: 0 22px 60px rgba(23,40,75,.16);

  /* ---------- ESPACIADO / LAYOUT ---------- */
  --maxw: 1160px;          /* ancho de contenido */
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(56px, 9vw, 120px);
  --gap: clamp(16px, 3vw, 28px);

  /* ---------- MOVIMIENTO ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .45s;
}

/* Botones de referencia (ajústalos a tu framework) */
.btn-primary{
  background: var(--royal); color: #fff; font-family: var(--font-head);
  font-weight: var(--fw-semi); border-radius: var(--radius-pill);
  padding: 14px 26px; border: 0; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover{ background: var(--royal-2); transform: translateY(-2px); }

.btn-ghost{
  background: transparent; color: var(--navy); border: 2px solid var(--navy);
  border-radius: var(--radius-pill); padding: 12px 24px; font-weight: var(--fw-semi);
}

/* Accesibilidad: foco visible siempre */
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}