/*
 * theme.css — Template: Boda Azul Floral (Premium)
 *
 * Solo tokens (:root). No hay clases aquí.
 * Las clases del template viven en style.css.
 *
 * Para crear una invitación nueva desde este template:
 *   1. Duplicá la carpeta a /invitaciones/nombre-pareja/
 *   2. Editá el theme.css de la invitación con los colores y fuentes de la pareja
 *   3. Solo sobreescribí los tokens que cambian — el resto se hereda
 *
 * Paquete: Premium
 */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Lato:wght@300;400;700&display=swap');

:root {

  /* ─────────────────────────────────────
   * Fuentes
   * ───────────────────────────────────── */
  --font-sans:   'Lato', system-ui, sans-serif;
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-script: 'Great Vibes', cursive;

  /* ─────────────────────────────────────
   * Paleta — Azul Floral
   * ───────────────────────────────────── */
  --color-bg:           #f7faff;
  --color-surface:      #ffffff;
  --color-surface-2:    #eef4fb;
  --color-border:       #c5d8ed;
  --color-border-strong:#8ab0d4;

  --color-text:         #1a2e4a;
  --color-text-muted:   #4a6785;
  --color-text-subtle:  #7a97b0;

  --color-accent:       #1e3a6e;
  --color-accent-hover: #152b52;
  --color-accent-light: #e8f0f8;

  /* Actualizar alias semánticos */
  --color-primary:       var(--color-accent);
  --color-primary-hover: var(--color-accent-hover);
  --color-primary-light: var(--color-accent-light);

  /* Oro decorativo — bordes y separadores */
  --color-gold:       #c9a461;
  --color-gold-light: #f5edd8;
  --color-gold-dark:  #9e7a3a;

  /* ─────────────────────────────────────
   * Tokens de invitación
   * ───────────────────────────────────── */

  /* Portada */
  --inv-hero-overlay:    rgba(15, 30, 60, 0.35);

  /* Intro */
  --inv-intro-bg:        #f0ebe2;
  --inv-intro-fade:      #ffffff;

  /* Fade del video — configurable */
  --inv-fade-start:      0.82;   /* ratio del video donde empieza el fade (0–1) */
  --inv-fade-duration:   1200;   /* ms que dura el fade */

  /* Countdown */
  --inv-cd-bg:           rgba(255, 255, 255, 0.85);
  --inv-cd-border:       var(--color-border);
  --inv-cd-number-color: var(--color-accent);

  /* Botón flotante de música */
  --inv-musica-bg:       var(--color-accent);
  --inv-musica-color:    #ffffff;
  --inv-musica-size:     3rem;
}