/* =============================================================
   Alegres en el Amor — Encuentros Regionales de Familia
   DESIGN TOKENS · single source of truth
   -------------------------------------------------------------
   Estos son los tokens REALES usados en los diseños de referencia.
   La campaña "Alegres en el Amor" tiene identidad propia que se
   apoya en el sistema Fasta Comunicaciones para estructura
   (espaciado, radios, sombras) pero define su propio color y
   tipografía. Copiá este archivo al frontend Node y consumí las
   variables con var(--token).
   ============================================================= */

:root {
  /* ----------------------------------------------------------
     COLORES PRINCIPALES (marca madre — fijos en todas las landings)
     ---------------------------------------------------------- */
  --color-primary:        #9E2137;  /* bordó · títulos, CTA principal */
  --color-primary-deep:   #7E1A2C;  /* hover/press del CTA */
  --color-primary-soft:   #F3E0E4;  /* fondos suaves bordó */
  --color-secondary:      #D89044;  /* tan · acento secundario */
  --color-secondary-deep: #B5732C;
  --color-secondary-soft: #F7E7D5;

  /* ----------------------------------------------------------
     COLOR POR REGIÓN (lo único que varía por encuentro)
     Cada landing setea --ac / --ac-soft / --ac-deep al cargar,
     copiando uno de estos cuartetos según la región.
     El color de cada región es FIJO (no editable por el admin).
     ---------------------------------------------------------- */
  /* Región Pampeana — Verde */
  --region-pampeana:       #599B77;
  --region-pampeana-soft:  #E6F0EA;
  --region-pampeana-deep:  #467E5F;
  /* Región Centro — Celeste */
  --region-centro:         #63B5D6;
  --region-centro-soft:    #E2F0F7;
  --region-centro-deep:    #3E8FB2;
  /* Región Norte — Naranja */
  --region-norte:          #CD4109;
  --region-norte-soft:     #FAE2D6;
  --region-norte-deep:     #A6350A;
  /* Región Patagonia — Amarillo */
  --region-patagonia:      #F4B617;
  --region-patagonia-soft: #FDF1D0;
  --region-patagonia-deep: #B5840A;

  /* Variables "vivas" de acento — el frontend las reescribe por región */
  --ac:       var(--region-pampeana);
  --ac-soft:  var(--region-pampeana-soft);
  --ac-deep:  var(--region-pampeana-deep);

  /* ----------------------------------------------------------
     NEUTRALES (del sistema Fasta)
     ---------------------------------------------------------- */
  --ink:          #303030;  /* texto principal */
  --ink-soft:     #5A5A5A;  /* texto secundario */
  --ink-muted:    #8A8A8A;  /* captions, metadatos */
  --ink-disabled: #B8B8B8;

  --paper:        #FFFFFF;  /* fondo principal */
  --paper-warm:   #FAF8F5;  /* fondo cálido (landing dirección A, formulario) */
  --panel-bg:     #F4F1EC;  /* fondo de los paneles de admin */

  --rule:         #ECE6DE;  /* bordes de tarjetas (cálido) */
  --rule-cool:    #E6E6E6;  /* bordes neutros */
  --rule-input:   #E2DACE;  /* bordes de inputs */

  /* WhatsApp (botón de comunidad en el modal de confirmación) */
  --whatsapp:      #25D366;
  --whatsapp-deep: #1FB457;

  /* ----------------------------------------------------------
     TIPOGRAFÍA
     - Poetsen One  → títulos, números, lemas (display)
     - Titillium Web → texto, UI, formularios (body)
     Cargar de Google Fonts:
     https://fonts.googleapis.com/css2?family=Poetsen+One&family=Titillium+Web:wght@300;400;600;700&display=swap
     ---------------------------------------------------------- */
  --font-display: "Poetsen One", system-ui, sans-serif;
  --font-body:    "Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica (px) — landings usan clamp() responsivo */
  --fs-eyebrow: 12px;   /* MAYÚSCULAS, letter-spacing .14em */
  --fs-caption: 13px;
  --fs-body:    16px;
  --fs-body-lg: 17px;
  --fs-h5:      22px;
  --fs-h4:      28px;
  --fs-h3:      36px;
  --fs-h2:      42px;
  --fs-h1:      54px;   /* landing A; dirección B llega a 76px con clamp */

  /* ----------------------------------------------------------
     ESPACIADO (base 8px · sistema Fasta)
     ---------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ----------------------------------------------------------
     RADIOS
     ---------------------------------------------------------- */
  --r-input: 8px;
  --r-md:    12px;
  --r-card:  18px;   /* tarjetas de panel/sección */
  --r-lg:    22px;   /* tarjetas grandes / formulario */
  --r-xl:    26px;   /* secciones hero de la landing A */
  --r-pill:  999px;

  /* ----------------------------------------------------------
     SOMBRAS / ELEVACIÓN
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 3px rgba(48,48,48,.08);
  --shadow-2: 0 8px 24px rgba(48,48,48,.08);
  --shadow-modal: 0 16px 50px rgba(0,0,0,.28);
  --shadow-focus: 0 0 0 3px var(--ac-soft);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 140ms;   /* microinteracciones (chips, hover) */
  --dur-2: 250ms;
}

/* =============================================================
   Helpers de acento por región
   Aplicá una de estas clases (o seteá las vars inline desde JS)
   en el contenedor raíz de cada landing/panel.
   ============================================================= */
.region-pampeana  { --ac: var(--region-pampeana);  --ac-soft: var(--region-pampeana-soft);  --ac-deep: var(--region-pampeana-deep); }
.region-centro    { --ac: var(--region-centro);    --ac-soft: var(--region-centro-soft);    --ac-deep: var(--region-centro-deep); }
.region-norte     { --ac: var(--region-norte);     --ac-soft: var(--region-norte-soft);     --ac-deep: var(--region-norte-deep); }
.region-patagonia { --ac: var(--region-patagonia); --ac-soft: var(--region-patagonia-soft); --ac-deep: var(--region-patagonia-deep); }