/* Flipa · variables de diseño. Fuente única para producto, extensión y web.
   Se cambia aquí y en ningún otro sitio. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fuentes/BricolageGrotesque.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fuentes/DMSans.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  /* Color: base */
  --tinta: #1d1b2f;
  --tinta-2: #4a4763;          /* texto secundario: 8,4:1 sobre crema */
  --tinta-3: #736f8c;          /* texto apagado (notas, pistas): 4,6:1 sobre crema; no usar por debajo de 13 px */
  --crema: #fff8ec;
  --blanco: #ffffff;
  --arena: #f4e9d0;            /* burbuja del usuario, fondos al pasar el ratón */
  --linea: #eadfc8;
  --linea-fuerte: #d6c8a8;

  /* Color: marca */
  --amarillo: #ffd666;
  --rosa: #ffb3c1;
  --azul: #8fb4ff;
  --amarillo-suave: #ffe9a8;
  --rosa-suave: #ffd3dc;
  --azul-suave: #cfe0ff;
  --menta-suave: #cfeedd;

  /* Color: significado */
  --enlace: #1b3fa8;
  --bien: #12704a;
  --bien-fondo: #cfeedd;
  --aviso: #6b4500;
  --aviso-fondo: #ffe9a8;
  --error: #b3263e;
  --error-fondo: #ffe9ec;

  /* Tipografía */
  --letra-titulos: "Bricolage Grotesque", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --letra-texto: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.8125rem;   /* 13 · notas, fuentes */
  --t-s: 0.9375rem;    /* 15 · texto de la aplicación */
  --t-m: 1.125rem;     /* 18 · texto de la web */
  --t-l: 1.25rem;      /* 20 · títulos de tarjeta */
  --t-xl: 1.5rem;      /* 24 */
  --t-2xl: 2rem;       /* 32 */
  --t-3xl: clamp(2.25rem, 4vw, 3rem);      /* títulos de sección */
  --t-4xl: clamp(2.75rem, 6vw, 5.25rem);   /* titular de portada */
  --apretado: -0.03em;                     /* espacio entre letras de los titulares */

  /* Espacios (múltiplos de 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;

  /* Formas */
  --radio-s: 10px;
  --radio-m: 16px;
  --radio-l: 22px;
  --radio-xl: 28px;
  --radio-pildora: 999px;
  --borde: 2px solid var(--tinta);
  --borde-fino: 1.5px solid var(--linea);

  /* Sombra dura: el sello de la casa */
  --sombra-s: 3px 3px 0 var(--tinta);
  --sombra-m: 5px 5px 0 var(--tinta);
  --sombra-l: 8px 8px 0 var(--tinta);
  --sombra-foco: 4px 4px 0 var(--amarillo);

  /* Movimiento */
  --rapido: 120ms;
  --normal: 200ms;
  --lento: 500ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-bote: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Anchos */
  --ancho-texto: 68ch;
  --ancho-pagina: 1240px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0ms; --normal: 0ms; --lento: 0ms; }
}