/*
 * tokens.css — variables compartidas para admin y páginas legales.
 * Usa los mismos nombres y valores del hero (fuente de verdad).
 * index.php usa hero.css (autocontenido), no este archivo.
 */

:root {
  /* Tipografía — mismos nombres que el hero */
  --serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;

  /* Escala tipográfica */
  --fs-xs   : clamp(0.65rem,  0.6rem  + 0.25vw, 0.75rem);
  --fs-sm   : clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --fs-base : clamp(0.9rem,   0.85rem + 0.25vw, 1rem);
  --fs-md   : clamp(1rem,     0.95rem + 0.35vw, 1.125rem);
  --fs-lg   : clamp(1.125rem, 1rem    + 0.5vw,  1.375rem);
  --fs-xl   : clamp(1.375rem, 1.2rem  + 0.9vw,  2rem);

  /* Colores — valores exactos del hero */
  --ink:          #1f1407;
  --ink-soft:     #3a2710;
  --ink-mute:     #4d3414;
  --parchment-1:  #f1e3c2;
  --parchment-2:  #e6d3a8;
  --parchment-3:  #d4ba85;
  --parchment-4:  #b59560;
  --parchment-5:  #8a6a3a;
  --accent:       #6b2a13;
  --accent-soft:  #a04826;

  /* Semánticos (formularios/admin) */
  --color-success: #3d5a2e;
  --color-error:   var(--accent);
  --color-info:    var(--ink-soft);

  /* Espaciado */
  --inset:   clamp(20px, 3.6vw, 80px);
  --gap-xs:  0.25rem;
  --gap-sm:  0.5rem;
  --gap-md:  1rem;
  --gap-lg:  1.5rem;
  --gap-xl:  2.5rem;

  /* Bordes */
  --line:      0.5px solid var(--ink-mute);
  --line-thin: 1px solid var(--ink-mute);
  --radius:    2px;

  /* Transiciones */
  --transition: 200ms ease;

  /* Z-index */
  --z-banner: 100;
  --z-modal:  200;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
  }
}