/* ============================================================================
   Kippis · Design tokens
   ----------------------------------------------------------------------------
   Extraídos tal cual de la landing original: mismos valores, mismos nombres.
   Es el único archivo donde viven los valores crudos de la identidad; el resto
   de las hojas solo consume variables.
   ========================================================================== */

:root {
  /* ── Color ──────────────────────────────────────────────────────────────── */
  --color-background: #f9f7f3;
  --color-surface: #ffffff;
  --color-olive: #65724b;
  --color-bordo: #5a102a;
  --color-coral: #c66a4a;
  --color-yellow: #ffee8c;
  --color-text: #231f20;
  --color-muted: #6f6a63;
  --color-line: #e8ded2;

  /* Amarillo suave de los iconos de las tarjetas de paso. */
  --color-yellow-soft: #fff6c9;

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  --font-logo: "Playfair Display", Georgia, serif;
  --font-title: "Newsreader", Georgia, serif;
  --font-ui: "Inter", Arial, sans-serif;

  /* ── Forma ──────────────────────────────────────────────────────────────── */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 50px rgba(35, 31, 32, 0.08);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  /* Ancho del contenedor general de la landing. */
  --width-page: 1120px;
  /* Ancho de columna de lectura para páginas de texto largo (~760px pedidos). */
  --width-reading: 760px;

  /* ── Estados ────────────────────────────────────────────────────────────── */
  /* Derivados de la paleta: no se introducen colores nuevos.
     El "éxito" reusa el olivo y el "error"/"atención" el bordó y el coral. */
  --color-success: var(--color-olive);
  --color-danger: var(--color-bordo);
  --color-notice: var(--color-coral);
}