/* ============================================================
   DESIGN TOKENS — Magno (editorial cream)
   ÚNICA capa visual. Estética editorial: fondo crema con textura,
   titulares en serif de alto contraste, acento burdeos (oxblood).
   site.css y cinematic.css usan SOLO estas variables.
   ============================================================ */
:root {
  /* Superficies (crema cálido, editorial) */
  --bg:        #f3ead9;   /* crema base */
  --surface:   #ece1cd;   /* bandas de sección */
  --surface-2: #e3d6bd;
  --card:      #fbf6ec;   /* tarjetas (más claras que el fondo, "levantan") */
  --ink:       #101820;   /* texto principal, azul-negro */
  --muted:     #6e6259;   /* texto secundario cálido */
  --muted-2:   #8c8279;
  --border:    #d6cdba;

  /* Acento = burdeos (oxblood) */
  --accent:        #5e2f31;  /* botones primarios */
  --accent-strong: #46211f;
  --accent-soft:   #ecdfcf;  /* fondo de pills/badges (crema) */
  --accent-ink:    #f3ead9;  /* texto sobre el acento (crema) */
  --highlight:     #5e2f31;  /* enlaces/detalles */

  /* Overlays para vídeo/textura sobre crema */
  --scrim:      rgba(243,234,217,.55);
  --scrim-soft: rgba(243,234,217,.28);
  --on-media:   #101820;

  /* Tipografía: serif editorial de display + sans para body */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Radios y sombras (sutiles, cálidos) */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(16,24,32,.05), 0 1px 3px rgba(16,24,32,.04);
  --shadow-md: 0 12px 34px rgba(16,24,32,.08);
  --shadow-lg: 0 26px 64px rgba(16,24,32,.12);

  /* Layout */
  --maxw: 1240px;
  --gap:  clamp(20px, 4vw, 44px);
}