/* ==========================================================================
   WowCita · Tokens del sistema de diseño "Laca" (Módulo 13A)

   Un "token" es un valor con nombre (un color, un tamaño, un espacio). TODO el diseño sale de aquí:
   si mañana cambia el frambuesa, se cambia en UNA línea y cambia en todas las pantallas.

   Inspiración: los frascos de esmalte. Fondo de porcelana fría, texto ciruela y UN color fuerte
   (frambuesa) reservado para la acción principal. Lo memorable son las "muestras de esmalte"
   con forma de uña (ver --forma-una); todo lo demás se mantiene tranquilo.
   ========================================================================== */

/* Tipografías alojadas en WowCita (no en Google): más rápido, respeta la CSP y no avisa a terceros
   quién visita la página. Licencia SIL Open Font License (ver assets/fonts/OFL-*.txt).
   font-display: swap → mientras carga, el texto se ve con la letra del sistema (nunca invisible). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ---------- Color: la paleta Laca ---------- */
  --porcelana: #fbf9fa;          /* fondo de la página */
  --superficie: #ffffff;         /* tarjetas, campos y ventanas */
  --ciruela: #2a1730;            /* texto principal */
  --lila-humo: #6d5a7a;          /* texto secundario (contraste 6.3:1 sobre porcelana) */
  --frambuesa: #c2185b;          /* acción principal (contraste 5.9:1 con blanco) */
  --frambuesa-oscura: #9a1248;   /* frambuesa al pasar el mouse o al tocar */
  --rubor: #eed9d3;              /* seleccionado, resaltado suave */
  --rubor-claro: #f8eeeb;        /* fondos suaves */
  --borde: #e7dee4;              /* líneas y bordes (gris rosado frío) */
  --menta: #2f7d62;              /* confirmado, pagado, éxito */
  --menta-fondo: #e3f2ec;

  /* Estados (siempre con su fondo claro para insignias y avisos) */
  --ambar: #8a5300;              /* pendiente, aviso */
  --ambar-fondo: #fff1d9;
  --azul-tinta: #35538f;         /* confirmada, información */
  --azul-tinta-fondo: #e8eef9;
  --rojo: #b42318;               /* error, no asistió */
  --rojo-fondo: #fde8e6;
  --gris-cancelado: #9a8fa0;

  /* Colores de las muestras de esmalte (servicios en la reserva) */
  --esmalte-1: #c2185b;          /* frambuesa */
  --esmalte-2: #7b2d5b;          /* vino */
  --esmalte-3: #d98b7e;          /* nude rosado */
  --esmalte-4: #2f7d62;          /* menta */
  --esmalte-5: #5b4a9e;          /* lavanda profunda */

  /* ---------- Tipografía ----------
     Escala 1.25 (tercera mayor) sobre 16 px. En el celular el texto NUNCA baja de 16 px en campos
     (si baja, el iPhone hace zoom al tocar el campo). */
  --letra-titulos: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --letra-texto: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --texto-xs: 0.8rem;
  --texto-s: 0.9rem;
  --texto-m: 1rem;
  --texto-l: 1.25rem;
  --texto-xl: 1.563rem;
  --texto-xxl: 1.953rem;
  --texto-hero: 2.441rem;
  --interlineado: 1.55;
  --ancho-lectura: 68ch;          /* líneas cómodas de leer */

  /* ---------- Espacios (múltiplos de 4 px) ---------- */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.25rem;
  --espacio-6: 1.5rem;
  --espacio-8: 2rem;
  --espacio-10: 2.5rem;

  /* ---------- Formas ----------
     Jerarquía de esquinas: los controles son redondeados, las ventanas aún más,
     y las "pastillas" (insignias, horarios) totalmente redondas. */
  --radio-control: 12px;
  --radio-tarjeta: 16px;
  --radio-ventana: 24px;
  --radio-pastilla: 999px;
  /* La forma de uña almendra de las muestras de esmalte */
  --forma-una: 50% 50% 46% 46% / 62% 62% 38% 38%;

  /* Sombras: SOLO para lo que flota (ventanas, barra inferior, avisos). Las tarjetas usan borde. */
  --sombra-flotante: 0 12px 32px rgb(42 23 48 / 0.16), 0 2px 6px rgb(42 23 48 / 0.08);
  --sombra-barra: 0 -4px 20px rgb(42 23 48 / 0.08);
  --sombra-suave: 0 1px 2px rgb(42 23 48 / 0.04), 0 4px 16px rgb(42 23 48 / 0.04); /* tarjetas del panel (Módulo 15A) */

  /* ---------- Medidas ---------- */
  --ancho-maximo: 1080px;
  --alto-control: 48px;          /* botones y campos: cómodo para el dedo (mínimo recomendado 44) */
  --alto-barra-inferior: 64px;
  --ancho-barra-lateral: 256px;  /* menú lateral del computador (Módulo 15A) */
  --zona-segura-abajo: env(safe-area-inset-bottom, 0px); /* la "barrita" del iPhone */

  /* ---------- Movimiento ---------- */
  --rapido: 140ms;
  --suave: cubic-bezier(0.2, 0.8, 0.2, 1);
}