/* ==========================================================================
   TOKENS — Fiestas 2026
   Fuente única de verdad visual: colores, tipografía, espaciado, radios,
   sombras y transiciones. No introducir valores sueltos fuera de aquí.
   ========================================================================== */

:root {
  /* ---------- Color ---------- */
  --color-primary: #0d1b2a;      /* azul marino — superficies y CTA principal */
  --color-primary-2: #16263b;    /* azul marino, un punto más claro (hover/gradação sutil) */
  --color-secondary: #415a77;    /* azul grisáceo — apoyo, bordes activos */
  --color-accent: #e07a24;       /* naranja — acento puntual, nunca base */

  --color-background: #f4f6f8;
  --color-surface: #ffffff;
  --color-border: #d5d8dc;
  --color-border-strong: #b7bcc3;

  --color-text: #0d1b2a;
  --color-text-secondary: #53606d;
  --color-text-muted: #7b858f;
  --color-text-on-primary: #ffffff;

  --color-success: #2e7d32;
  --color-success-bg: #eaf4eb;
  --color-danger: #b3261e;
  --color-danger-bg: #fbebea;
  --color-accent-bg: #fbeee0;

  /* ---------- Tipografía ---------- */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-ui: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-display-sm: clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem);
  --fs-display: clamp(2.1rem, 1.7rem + 1.8vw, 3rem);

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---------- Espaciado ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---------- Bordes y radios ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---------- Sombra (discreta, casi ausente) ---------- */
  --shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.08);
  --shadow-md: 0 4px 16px rgba(13, 27, 42, 0.1);
  --shadow-focus: 0 0 0 3px rgba(224, 122, 36, 0.35);

  /* ---------- Transiciones ---------- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* ---------- Layout ---------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --content-max: 1100px;
  --content-max-narrow: 640px;
  --edge-padding: 20px;

  /* ---------- Área táctil mínima ---------- */
  --tap-min: 44px;

  /* ---------- Álbum físico (portada, capítulos, mosaico) ----------
     Paleta derivada de la existente (marfil/navy/naranja), pero cálida
     y "de papel" en vez de la superficie fría de --color-surface. */
  --album-paper: #f2ead9;
  --album-paper-2: #ece1c9;
  --album-ink: #211a10;
  --album-ink-soft: #4a4030;
  --album-line: rgba(13, 27, 42, 0.16);
  --album-line-soft: rgba(33, 26, 16, 0.1);
  --album-frame: #fffdf8;
  --album-shadow: 0 10px 24px rgba(33, 22, 8, 0.18);
  --album-shadow-sm: 0 4px 10px rgba(33, 22, 8, 0.14);
  --album-tape: rgba(224, 122, 36, 0.24);
  --album-brass: #b6863f;        /* esquineras metálicas de la portada (libro físico) */
  --album-note: #f6e9b8;         /* papel de la nota adhesiva del mosaico */
  --album-note-2: #ecd98c;

  /* Transiciones lentas, propias de pasar página / revelar una fotografía */
  --transition-slow: 550ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-page: 900ms cubic-bezier(0.65, 0, 0.35, 1);
}