/* ==============================================
   DESIGN SYSTEM — retirospjr.online
   Estilo: Sacred Warmth (Luxury Minimal)
   ============================================== */

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

:root {
  /* PRIMARY — Vinotinto litúrgico */
  --color-primary-50:  #FDF2F4;
  --color-primary-100: #F5D0D8;
  --color-primary-500: #7B1E35;
  --color-primary-600: #611628;
  --color-primary-900: #2D0A12;

  /* SECONDARY — Azul Mariano */
  --color-secondary-500: #2C4A8A;
  --color-secondary-600: #1E3469;

  /* ACCENT — Oro litúrgico */
  --color-accent-500: #C4962A;
  --color-accent-600: #A87D1E;

  /* NEUTRALES CÁLIDOS */
  --color-neutral-50:  #FDFAF5;
  --color-neutral-100: #F5EDD8;
  --color-neutral-200: #EAE0CC;
  --color-neutral-400: #9B8E7A;
  --color-neutral-700: #4A4035;
  --color-neutral-900: #1C170F;

  /* SEMÁNTICOS */
  --color-success: #2D6A4F;
  --color-warning: #D4821A;
  --color-error:   #C1121F;

  /* TIPOGRAFÍA */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', 'Helvetica Neue', sans-serif;

  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;
  --text-5xl:  3.815rem;

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.85;

  /* ESPACIADO */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-padding-sm: var(--space-12);
  --section-padding-md: var(--space-16);
  --section-padding-lg: var(--space-24);

  --container-sm:  480px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1200px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* SOMBRAS */
  --shadow-sm:   0 1px 3px rgba(28, 23, 15, 0.08);
  --shadow-md:   0 4px 12px rgba(28, 23, 15, 0.10);
  --shadow-lg:   0 8px 24px rgba(28, 23, 15, 0.12);
  --shadow-xl:   0 16px 48px rgba(28, 23, 15, 0.15);
  --shadow-glow: 0 0 18px 4px rgba(196, 150, 42, 0.22);
}