/* Truevelling - tokens de diseno.
   Sacados de los formatos reales de Instagram, no de un brief teorico.

   REGLA IMPORTANTE DEL LIMA: sobre fondo claro no se puede leer (contraste
   pesimo). Por eso el lima nunca es color de TEXTO sobre claro: se usa como
   RELLENO de pastillas y marcadores, con texto oscuro encima. Sobre fondo
   oscuro si funciona como texto. De ahi la alternancia de secciones claras y
   oscuras, que es justo lo que hacen los posts. */

:root {
  /* --- Superficies claras (listas de tips: se lee mucho rato) ---------- */
  --bg: #faf8f2;              /* hueso calido */
  --card: #ffffff;
  --border: #e3ddd0;
  --border-strong: #c9c0ac;

  /* --- Superficies oscuras (portada, portadas de ruta, PDF) ----------- */
  --dark: #2b1810;            /* marron de los posts */
  --dark-soft: #3d2418;
  --night: #12213f;           /* azul de la tarjeta de stop */

  /* --- Texto ---------------------------------------------------------- */
  --ink: #2b1810;
  --muted: #6b5a4e;
  --muted-soft: #9a8b7e;
  --on-dark: #f7f3ec;
  --on-dark-muted: #b9ab9d;

  /* --- Acentos -------------------------------------------------------- */
  --lime: #c7f000;            /* el acento de la marca */
  --lime-ink: #2b1810;        /* texto que va ENCIMA del lima */
  --lime-dim: #c7f00026;      /* lima translucido, para fondos suaves */
  --teal: #0e9aad;            /* del logo; secundario */
  --star: #e8a33d;            /* las estrellas se leen como estrellas: ambar */

  /* --- Marcadores de zona (sistema propio, se mantiene) ---------------- */
  --zone-1: #ee4245;
  --zone-2: #f5a623;
  --zone-3: #e8b23d;
  --zone-4: #3ba55d;
  --zone-5: #3b82f6;
  --zone-6: #8b5cf6;

  /* --- Tipografia ------------------------------------------------------ */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* --- Espaciado ------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Formas ---------------------------------------------------------- */
  --radius: 6px;
  --radius-pill: 999px;
  --border-width: 1px;

  --max-width: 1140px;
}

/* Secciones oscuras: invierten los tokens de texto para que todo lo que hay
   dentro funcione sin escribir reglas especificas. */
.on-dark {
  --ink: var(--on-dark);
  --muted: var(--on-dark-muted);
  --muted-soft: var(--on-dark-muted);
  --card: var(--dark-soft);
  --border: #4a3225;
  --border-strong: #6b4a35;

  color: var(--on-dark);
  background: var(--dark);
}

.on-night {
  --ink: var(--on-dark);
  --muted: #9fb0cc;
  --muted-soft: #7d90b0;
  --card: #1b2f52;
  --border: #2c4372;
  --border-strong: #3d5a94;

  color: var(--on-dark);
  background: var(--night);
}