/* =====================================================================
   Cafetería Gabo · Sistema de diseño (tokens)
   Dirección visual A · "Rótulo"
   Aquí viven todas las decisiones de diseño: si cambias un valor aquí,
   cambia en toda la página.
   ===================================================================== */

/* ---------- Fuentes (autoalojadas en assets/fonts/) ----------
   Alfa Slab One ........ SIL Open Font License 1.1
   Atkinson Hyperlegible  SIL Open Font License 1.1
   Yellowtail ........... Apache License 2.0
   Solo el subconjunto "latin" (incluye á é í ó ú ñ ¿ ¡). */
@font-face {
  font-family: "Alfa Slab One";
  src: url("../assets/fonts/alfa-slab-one-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yellowtail";
  src: url("../assets/fonts/yellowtail-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color ----------
     Contraste medido (WCAG 2.x):
       añil sobre nixtamal 13,2  ·  añil sobre mostaza 7,8  ·  blanco sobre añil 14,2
       rojo sobre nixtamal 5,5   ·  blanco sobre rojo 5,9    ·  barro sobre nixtamal 4,9
       rojo sobre mostaza 3,2 → SOLO logo y títulos grandes (24 px o más), nunca texto normal. */
  --c-mostaza: #f2b705;
  --c-rojo: #c8102e;
  --c-rojo-hondo: #a50d26;   /* estado presionado del botón */
  --c-anil: #1b2a4a;
  --c-nixtamal: #fff6dc;
  --c-barro: #a8532c;
  --c-barro-claro: #c56a3c;  /* solo ilustración */
  --c-tostado: #4a2511;      /* solo ilustración (café) */
  --c-agua: #5f86c4;         /* solo ilustración */
  --c-blanco: #ffffff;

  /* Roles: úsalos en los componentes en lugar de los colores directos */
  --fondo: var(--c-nixtamal);
  --fondo-marca: var(--c-mostaza);
  --fondo-oscuro: var(--c-anil);
  --texto: var(--c-anil);
  --texto-invertido: var(--c-nixtamal);
  --accion: var(--c-rojo);
  --accion-texto: var(--c-blanco);
  --borde: var(--c-anil);
  --foco: var(--c-rojo);

  /* ---------- Tipografía ---------- */
  --f-titulo: "Alfa Slab One", "Rockwell", "Roboto Slab", Georgia, serif;
  --f-texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-manuscrita: "Yellowtail", "Brush Script MT", cursive;

  /* Escala fluida: crece suavemente del celular (320 px) al escritorio (1280 px) */
  --t-pequeno: 0.875rem;                                  /* 14 px */
  --t-base: 1.0625rem;                                    /* 17 px */
  --t-mediano: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); /* 19 → 22 px */
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);       /* 22 → 28 px */
  --t-h2: clamp(1.875rem, 1.45rem + 2vw, 3rem);           /* 30 → 48 px */
  --t-h1: clamp(2.375rem, 1.5rem + 4.3vw, 4.75rem);       /* 38 → 76 px */

  --lh-texto: 1.6;
  --lh-titulo: 1.05;
  --medida: 34rem;        /* ancho máximo de un párrafo (~65 caracteres) */

  /* ---------- Espaciado (base 4 px) ---------- */
  --e-1: 0.25rem;  /*  4 */
  --e-2: 0.5rem;   /*  8 */
  --e-3: 0.75rem;  /* 12 */
  --e-4: 1rem;     /* 16 */
  --e-5: 1.5rem;   /* 24 */
  --e-6: 2rem;     /* 32 */
  --e-7: 3rem;     /* 48 */
  --e-8: 4rem;     /* 64 */
  --e-9: 6rem;     /* 96 */
  --e-seccion: clamp(3.5rem, 2rem + 6vw, 7rem);
  --ancho-max: 72rem;
  --margen-lateral: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---------- Forma ---------- */
  --radio: 4px;
  --borde-grueso: 3px;
  --borde-fino: 2px;
  --sombra-solida: 4px 4px 0 var(--c-anil);
  --sombra-solida-hover: 6px 6px 0 var(--c-anil);
  --sombra-texto-rotulo: 0.06em 0.06em 0 var(--c-anil);

  /* ---------- Controles ---------- */
  --tactil-min: 2.75rem;  /* 44 px: cómodo de tocar */

  /* ---------- Movimiento ----------
     Solo transform y opacity. Entradas con salida suave, nunca ease-in. */
  --dur-rapida: 120ms;    /* respuesta de botones */
  --dur-base: 200ms;      /* cambios de estado */
  --dur-entrada: 300ms;   /* apariciones */
  --escalonado: 60ms;     /* entre elementos de un grupo */
  --paso-narrativo: 450ms;/* entre pasos de la olla en la demostración */
  --ease-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-estandar: cubic-bezier(0.2, 0, 0, 1);
}

/* Movimiento reducido: el sistema del visitante lo pide → todo quieto */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0ms;
    --dur-base: 0ms;
    --dur-entrada: 0ms;
    --escalonado: 0ms;
    --paso-narrativo: 0ms;
  }
}