/* ============================================================
   TOKENS — identidad visual de Palabra Pura Blaze.
   Única fuente de verdad. Cambia un color aquí y cambia en todo.
   Paleta tomada del sitio oficial iglesiapalabrapura.com,
   adaptada a un tema oscuro.
   ============================================================ */
:root {
  /* --- Paleta de la iglesia --- */
  --c-rose:       #FF3D85;  /* magenta de marca, aclarado para fondo oscuro */
  --c-rose-pure:  #FF0066;  /* magenta exacto del sitio, para degradados */
  --c-rose-deep:  #CE1446;
  --c-rose-tint:  rgba(255, 61, 133, .12);

  --c-indigo:     #8B7BFF;  /* índigo aclarado para texto y bordes */
  --c-indigo-pure:#2F1F99;  /* índigo exacto del sitio */
  --c-indigo-deep:#1F1470;
  --c-indigo-tint:rgba(139, 123, 255, .12);

  --c-orange:     #FF8A3D;
  --c-orange-soft:rgba(255, 138, 61, .14);

  /* Alias heredados para no romper reglas existentes. */
  --c-blue:       var(--c-indigo);
  --c-blue-deep:  var(--c-indigo-deep);
  --c-blue-tint:  var(--c-indigo-tint);
  --c-red:        var(--c-rose);

  /* --- Neutros (oscuros) --- */
  --c-white:      #FFFFFF;  /* solo para texto sobre color */
  --c-bg:         #08060F;  /* fondo de la página */
  --c-surface:    #120D22;  /* tarjetas y paneles */
  --c-surface-2:  #1A1330;  /* superficie elevada: burbujas, chips, campos */
  --c-surface-3:  #241B42;  /* hover / relleno sutil */
  --c-bg-soft:    var(--c-surface-2);
  --c-line:       rgba(255, 255, 255, .10);
  --c-line-soft:  rgba(255, 255, 255, .06);

  --c-ink:        #F4F2FB;  /* texto principal */
  --c-ink-soft:   #B4AECB;  /* texto secundario */
  --c-ink-faint:  #837C9E;  /* placeholders, metadatos */

  /* --- Degradados --- */
  --g-brand:  linear-gradient(135deg, #FF0066 0%, #C81B7E 48%, #4C34D8 100%);
  --g-warm:   linear-gradient(135deg, #FF0066 0%, #FF8A3D 100%);
  --g-deep:   linear-gradient(160deg, #1B1240 0%, #2F1F99 100%);
  --g-surface:linear-gradient(180deg, #16102A 0%, #100B1E 100%);
  --g-halo:   radial-gradient(60% 60% at 50% 0%, rgba(255, 0, 102, .28) 0%, rgba(47, 31, 153, .22) 45%, transparent 100%);

  /* --- Tipografía --- */
  --f-body: "Poppins", system-ui, -apple-system, sans-serif;

  --t-xs:   .64rem;
  --t-sm:   .78rem;
  --t-base: .9rem;
  --t-lg:   1rem;
  --t-xl:   1.2rem;
  --t-hero: clamp(1.65rem, 4vw, 2.6rem);

  /* --- Formas --- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* --- Profundidad --- */
  --shadow-soft:  0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -18px rgba(0, 0, 0, .7);
  --shadow-card:  0 2px 6px rgba(0, 0, 0, .35), 0 28px 56px -34px rgba(0, 0, 0, .85);
  --shadow-lift:  0 4px 12px rgba(0, 0, 0, .4), 0 44px 88px -44px rgba(0, 0, 0, .9);
  --shadow-rose:  0 12px 28px -14px rgba(255, 0, 102, .55);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* --- Cristal --- */
  --glass-bg:     rgba(20, 14, 38, .72);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-blur:   saturate(160%) blur(18px);

  /* --- Ritmo (compacto: más contenido visible sin scroll innecesario) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 28px;
  --sp-6: 40px;

  --transition: .18s cubic-bezier(.4, 0, .2, 1);
  --transition-slow: .4s cubic-bezier(.16, 1, .3, 1);
}