/* ============================================================
   DESIGN SYSTEM — Parroquia Inmaculada Concepción · Bella Vista
   Extraído del archivo Figma "Parroquia Inmaculada Concepcion.fig"
   v1.1 · Paleta primaria/secundaria con escalas · Tipografía Abhaya Libre + Hanken Grotesk
   ============================================================ */

/* ---- FUENTES ---- */
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* ============================================================
     COLOR · PRIMARIO  (marrón litúrgico) — base 800 = #351F1A
     ============================================================ */
  --c-primary-50:  #F7F6F6;
  --c-primary-100: #EDEBEA;
  --c-primary-200: #DBD7D6;
  --c-primary-300: #BEB7B6;
  --c-primary-400: #9E9391;
  --c-primary-500: #7E706C;
  --c-primary-600: #61504C;
  --c-primary-700: #493531;
  --c-primary-800: #351F1A;   /* ← COLOR PRIMARIO */
  --c-primary-900: #221510;
  --c-primary:     var(--c-primary-800);

  /* ============================================================
     COLOR · SECUNDARIO  (dorado) — base 500 = #E2CF98
     ============================================================ */
  --c-secondary-50:  #FCFAF5;
  --c-secondary-100: #F9F4E8;
  --c-secondary-200: #F3EBD4;
  --c-secondary-300: #ECE0BD;
  --c-secondary-400: #E7D7A9;
  --c-secondary-500: #E2CF98;  /* ← COLOR SECUNDARIO */
  --c-secondary-600: #C4AE74;
  --c-secondary-700: #AA9256;
  --c-secondary-800: #8F7435;
  --c-secondary-900: #775A19;
  --c-secondary:     var(--c-secondary-500);

  /* ===== COLOR · MARCA (alias semánticos → escalas) ===== */
  --c-brand-gold:        var(--c-secondary-500);  /* dorado principal — CTA, acentos */
  --c-brand-gold-soft:   var(--c-secondary-400);  /* dorado claro */
  --c-brand-bronze:      var(--c-secondary-900);  /* bronce — subtítulos, links */
  --c-brand-bronze-2:    var(--c-secondary-900);
  --c-brand-bronze-deep: #5D4201;

  /* ===== COLOR · TEXTO (alias semánticos → escala primaria) ===== */
  --c-ink:        var(--c-primary-800);  /* texto principal / títulos */
  --c-ink-2:      var(--c-primary-600);  /* texto secundario / cuerpo */
  --c-ink-3:      var(--c-primary-500);  /* texto terciario / captions */
  --c-ink-muted:  rgb(107,114,128);      /* gris auxiliar */
  --c-ink-near:   var(--c-primary-900);  /* casi negro */

  /* ===== COLOR · SUPERFICIES (neutros cálidos) ===== */
  --c-surface:        #FFFFFF;  /* blanco — cards */
  --c-bg-cream:       #FBF9F3;  /* crema base */
  --c-bg-cream-2:     #F5F3EE;  /* crema 2 */
  --c-bg-sand:        #F7F3E9;  /* arena — secciones */
  --c-bg-sand-2:      #EAE8E2;
  --c-bg-pearl:       #F0EEE8;
  --c-band-dark:      var(--c-primary-800);  /* banda oscura */
  --c-band-dark-2:    var(--c-primary-700);  /* banda oscura 2 */
  --c-band-brown:     #4D342E;
  --c-band-brown-2:   #32211D;

  /* ===== COLOR · BORDES ===== */
  --c-border:      var(--c-primary-200);
  --c-border-soft: rgba(53,31,26,0.14);

  /* ===== COLOR · ACENTO LITÚRGICO ===== */
  --c-wine:  #4E0618;  /* vino — detalle litúrgico */

  /* ===== SOMBRAS ===== */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 20px rgba(53,31,26,0.08);
  --shadow-lg:  0 14px 30px rgba(53,31,26,0.16);
  --shadow-card:0 2px 8px rgba(0,0,0,0.1);

  /* ===== TIPOGRAFÍA ===== */
  --font-display: 'Abhaya Libre', serif;         /* títulos display */
  --font-serif:   'Abhaya Libre', serif;         /* serif editorial */
  --font-sans:    'Hanken Grotesk', sans-serif;  /* cuerpo / UI */

  /* escala fluida — el mínimo/máximo conservan los valores de METADATA;
     el vw intermedio adapta el tamaño al ancho de viewport (responsive) */
  --fs-hero:    clamp(34px, 5.2vw, 56px);
  --fs-h1:      clamp(30px, 4.6vw, 48px);
  --fs-h2:      clamp(26px, 3.6vw, 40px);
  --fs-h3:      clamp(22px, 2.6vw, 28px);
  --fs-h4:      clamp(20px, 2.2vw, 24px);
  --fs-lg:      clamp(17px, 1.8vw, 20px);
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  /* ===== RADIOS ===== */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 9999px;

  /* ===== ESPACIADO BASE (fluido) ===== */
  --space-section: clamp(48px, 8vw, 96px);
  --space-gap:     clamp(16px, 2.4vw, 24px);
  --container-max: 1280px;
}

/* ============================================================
   ESTILOS TIPOGRÁFICOS  (clases utilitarias)
   ============================================================ */

/* Display — Abhaya Libre Medium */
.ds-display-hero { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero); line-height: 1.1; color: var(--c-brand-bronze); }
.ds-display-1    { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2);  line-height: 1.15; color: var(--c-ink); }
.ds-display-2    { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3);  line-height: 1.2;  color: var(--c-ink); }

/* Serif editorial — Abhaya Libre */
.ds-serif-lg     { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-lg);   line-height: 1.4; color: var(--c-ink); }
.ds-serif        { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-body); line-height: 1.5; color: var(--c-ink); }
.ds-serif-bold   { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h4);   line-height: 1.3; color: var(--c-ink); }

/* Cuerpo / UI — Hanken Grotesk */
.ds-body         { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: 1.7; color: var(--c-ink-2); }
.ds-body-sm      { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sm);   line-height: 1.6; color: var(--c-ink-2); }
.ds-semibold     { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm);   line-height: 1.5; color: var(--c-ink); }
.ds-semibold-lg  { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); line-height: 1.5; color: var(--c-ink); }
.ds-bold         { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-sm);   line-height: 1.5; color: var(--c-ink); }
.ds-italic       { font-family: var(--font-sans); font-weight: 400; font-style: italic; font-size: var(--fs-lg); line-height: 1.8; color: var(--c-ink-2); }
.ds-overline     { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm);   letter-spacing: 2.8px; text-transform: uppercase; color: var(--c-brand-bronze); }

/* ============================================================
   COMPONENTES BASE
   ============================================================ */

.ds-container { max-width: var(--container-max); width: 100%; margin: 0 auto; padding: 0 40px; }

/* Botones */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm);
  border: none; border-radius: var(--r-pill); padding: 12px 28px;
  cursor: pointer; transition: all 0.3s; text-decoration: none;
}
.ds-btn--primary { background: var(--c-secondary-500); color: var(--c-primary-800); }
.ds-btn--primary:hover { background: var(--c-secondary-600); transform: translateY(-2px); }
.ds-btn--ghost { background: transparent; border: 1px solid var(--c-secondary-500); color: var(--c-brand-bronze); }
.ds-btn--ghost:hover { background: rgba(226,207,152,0.12); }
.ds-btn--square { border-radius: var(--r-sm); }

/* Card */
.ds-card { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 32px; }

/* Chip / etiqueta */
.ds-tag {
  display: inline-block; background: var(--c-secondary-500); color: var(--c-primary-800);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-pill);
}

/* Input */
.ds-input {
  font-family: var(--font-sans); font-size: var(--fs-sm);
  padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-ink); width: 100%;
}
.ds-input:focus { outline: none; border-color: var(--c-secondary-500); }

/* Secciones */
.ds-section { padding: var(--space-section) 40px; }
.ds-section--cream { background: var(--c-bg-cream); }
.ds-section--sand  { background: var(--c-bg-sand); }
.ds-section--dark  { background: var(--c-band-dark); color: var(--c-surface); }
.ds-section--white { background: var(--c-surface); }