/*
  variables.css — Tokens visuales extraídos del PDF "Situaciones 365"

  Colores (aproximados a partir del diseño original en tonos morados):
  - Fondo degradado morado claro -> morado medio
  - Círculo central morado saturado con resplandor
  - Recuadro de calendario en lavanda muy claro
  - Botones de mes en morado con relieve
  - Botón "ENTRAR"/"VOLVER" en rosa/fucsia con relieve tipo cómic
  - Textos en blanco (sobre fondo morado) y morado oscuro (sobre lavanda)

  Tipografía:
  - Títulos grandes ("SITUACIONES", "365", nombres de mes, números de días):
    fuente condensada/bold estilo cartel -> 'Anton' (equivalente web gratuito
    a la familia "impact/poster" usada en el diseño original)
  - Textos de botones, frases cómic e instrucciones: 'Baloo 2' (redondeada,
    bold, con el mismo espíritu juguetón que el diseño original)
*/

:root {
  /* Paleta */
  --color-bg-top: #a855f7;
  --color-bg-bottom: #7c3aed;
  --color-circle-fill: #7c2ae8;
  --color-circle-glow: rgba(216, 180, 254, 0.55);
  --color-purple-dark: #5b1fb0;
  --color-purple-darker: #4c1d95;
  --color-lavender: #f3e8ff;
  --color-lavender-border: #7c3aed;
  --color-pink: #ec4899;
  --color-pink-dark: #be185d;
  --color-white: #ffffff;
  --color-white-soft: rgba(255, 255, 255, 0.85);
  --color-glass: rgba(255, 255, 255, 0.18);
  --color-overlay: rgba(76, 29, 149, 0.55);

  /* Tipografía */
  --font-display: 'Anton', 'Impact', sans-serif;
  --font-body: 'Baloo 2', 'Poppins', sans-serif;

  /* Dimensiones (proporción vertical del PDF: 810 x 1440 ≈ 9:16) */
  --app-max-width: 460px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 20px rgba(76, 29, 149, 0.35);
  --shadow-button: 0 6px 0 rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.25);
}