/* ==========================================================================
   landing/_tokens.css
   Fuente única de verdad para todos los tokens de diseño del sistema landing.

   ORDEN DE CARGA
   ──────────────
   Bootstrap → main.css → landing/_tokens.css → landing/landing.css

   ARQUITECTURA DE CAPAS
   ─────────────────────
   1. CAMPAÑA      Colores primario/secundario/acento. PHP los sobreescribe
                   por campaña vía <style>:root{…} inyectado en <head>.
                   Son los ÚNICOS tokens que cambia el backend.

   2. TIPOGRAFÍA   Familias, tamaños, pesos, interlineado. Apuntan a los
                   tokens de main.css con fallbacks para uso standalone.

   3. ESPACIADO    Section padding, gaps de bloque, hero. Escalados con
                   clamp() para fluidez sin breakpoints.

   4. FORMA        Radios y sombras. Fáciles de sobreescribir en un skin
                   para cambiar entre look flat, redondeado o elevado.

   5. MOVIMIENTO   Transiciones. Se mapean a main.css o se definen aquí.

   6. SUPERFICIES  Fondos de página, cards y formularios.

   7. TEXTO        Colores de texto para cada nivel de jerarquía.

   8. BORDES       Colores de borde para cada contexto.

   9. COMPONENTES  Tokens específicos de nav, footer, sticky-bar, botones,
                   zigzag, timeline, target-block, formularios de acción
                   y donación. Centralizados aquí para que un skin los
                   pueda sobreescribir sin tocar los archivos de componente.

   SKINS
   ─────
   Un archivo _tokens-skin-*.css solo necesita redefinir los tokens que
   cambia. Cargarlo DESPUÉS de este archivo y ANTES de landing.css:

     <link rel="stylesheet" href="/css/landing/_tokens.css">
     <link rel="stylesheet" href="/css/landing/_tokens-skin-forest.css">
     <link rel="stylesheet" href="/css/landing/landing.css">

   MODO OSCURO
   ───────────
   Al final del archivo. Solo sobreescribe tokens de superficie y texto;
   los de campaña y componentes permanecen intactos.
   ========================================================================== */

:root {

  /* ════════════════════════════════════════════════════════════════════════
     1. CAMPAÑA — sobreescribibles por PHP
     ════════════════════════════════════════════════════════════════════════ */

  --landing-primary:          #840032;
  --landing-secondary:        #e59500;
  --landing-accent:           #253140;

  /* Derivados de campaña — se recalculan automáticamente al cambiar los
     anteriores. No sobreescribir salvo necesidad explícita. */
  --landing-primary-hover:    color-mix(in srgb, var(--landing-primary), #000 18%);
  --landing-primary-light:    color-mix(in srgb, var(--landing-primary), #fff 85%);
  --landing-primary-muted:    color-mix(in srgb, var(--landing-primary), transparent 70%);
  --landing-secondary-hover:  color-mix(in srgb, var(--landing-secondary), #000 15%);
  --landing-secondary-light:  color-mix(in srgb, var(--landing-secondary), #fff 80%);
  --landing-accent-hover:     color-mix(in srgb, var(--landing-accent), #000 15%);
  --landing-accent-light:     color-mix(in srgb, var(--landing-accent), #fff 85%);


  /* ════════════════════════════════════════════════════════════════════════
     2. TIPOGRAFÍA
     ════════════════════════════════════════════════════════════════════════ */

  /* Familias — apuntan a main.css con fallbacks standalone */
  --lf-headline: var(--font-family-headline, 'D-DIN', 'Roboto Condensed', 'Arial Narrow', sans-serif);
  --lf-body:     var(--font-family-body,     'DM Sans', system-ui, sans-serif);
  --lf-italic:   var(--font-family-italic,   'Merriweather', Georgia, serif);

  /* Tamaños de texto — escalados con clamp() */
  --lf-size-hero-title:     clamp(2.2rem, 5vw, 4rem);
  --lf-size-hero-subtitle:  clamp(1.05rem, 2vw, 1.35rem);
  --lf-size-section-title:  clamp(1.6rem, 3vw, 2.4rem);
  --lf-size-block-title:    clamp(1.3rem, 2.5vw, 1.9rem);
  --lf-size-body:           1.08rem;
  --lf-size-sm:             0.85rem;
  --lf-size-xs:             0.75rem;

  /* Pesos */
  --lf-weight-headline:     900;
  --lf-weight-subheadline:  700;
  --lf-weight-body:         400;

  /* Interlineado */
  --lf-line-height-body:    1.78;
  --lf-line-height-tight:   1.2;
  --lf-line-height-heading: 1.1;


  /* ════════════════════════════════════════════════════════════════════════
     3. ESPACIADO
     ════════════════════════════════════════════════════════════════════════ */

  --landing-section-py:     var(--space-lg, clamp(2.5rem, 5vw, 5rem));
  --landing-section-px:     clamp(1rem, 3vw, 2rem);
  --landing-block-gap:      2rem;
  --landing-block-gap-sm:   1.25rem;

  /* Hero */
  --landing-hero-min-height: 80vh;
  --stage-hero-height:       80vh;

  /* Nav — sticky offset */
  --sticky-top: var(--nav-height, 72px);


  /* ════════════════════════════════════════════════════════════════════════
     4. FORMA — radios y sombras
     ════════════════════════════════════════════════════════════════════════ */

  --landing-radius-sm:   var(--radius-sm, 3px);
  --landing-radius-md:   var(--radius-md, 8px);
  --landing-radius-lg:   var(--radius-lg, 16px);
  --landing-radius-pill: 999px;

  --landing-shadow-sm:
    0 1px 3px  rgba(0,0,0,.08),
    0 1px 2px  rgba(0,0,0,.05);
  --landing-shadow-md:
    0 4px 12px rgba(0,0,0,.10),
    0 2px 4px  rgba(0,0,0,.06);
  --landing-shadow-lg:
    0 10px 30px rgba(0,0,0,.12),
    0 4px  8px  rgba(0,0,0,.06);
  --landing-shadow-primary:
    0 4px 14px color-mix(in srgb, var(--landing-primary), transparent 55%);


  /* ════════════════════════════════════════════════════════════════════════
     5. MOVIMIENTO
     ════════════════════════════════════════════════════════════════════════ */

  --lf-transition-fast: var(--transition-fast, 150ms ease-in-out);
  --lf-transition-base: var(--transition-base, 300ms ease-in-out);


  /* ════════════════════════════════════════════════════════════════════════
     6. SUPERFICIES
     ════════════════════════════════════════════════════════════════════════ */

  --landing-bg:          #ffffff;
  --landing-bg-light:    #f3f4f5;  /* secciones alternas */
  --landing-bg-dark:     #1a1f26;  /* secciones oscuras  */

  --landing-card-bg:     #ffffff;
  --landing-card-border: var(--landing-border-light);
  --landing-card-shadow: var(--landing-shadow-sm);

  --landing-form-bg:     #ffffff;

  /* Overlays de hero — el PHP puede sobreescribir el inline style */
  --landing-overlay-left:
    linear-gradient(to right,
      rgba(0,0,0,.80) 0%,
      rgba(0,0,0,.45) 55%,
      transparent 100%);
  --landing-overlay-dark:
    linear-gradient(to bottom,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.30) 60%,
      transparent 100%);
  --landing-overlay-solid: rgba(0,0,0,.55);


  /* ════════════════════════════════════════════════════════════════════════
     7. TEXTO
     ════════════════════════════════════════════════════════════════════════ */

  --landing-text:           #111827;
  --landing-text-secondary: #374151;
  --landing-text-muted:     #6b7280;
  --landing-text-disabled:  #9ca3af;
  --landing-text-inv:       #ffffff;
  --landing-text-inv-muted: rgba(255,255,255,.72);


  /* ════════════════════════════════════════════════════════════════════════
     8. BORDES
     ════════════════════════════════════════════════════════════════════════ */

  --landing-border:        #d1d5db;
  --landing-border-light:  #e5e7eb;
  --landing-border-dark:   #374151;
  --landing-border-focus:  var(--landing-primary);

  --landing-form-border:        var(--landing-border);
  --landing-form-focus-shadow:  0 0 0 3px var(--landing-primary-muted);


  /* ════════════════════════════════════════════════════════════════════════
     9. COMPONENTES
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Estados de UI (globales) ─────────────────────────────────────────── */
  --landing-success:        #10b981;
  --landing-success-light:  #d1fae5;
  --landing-error:          #ef4444;
  --landing-error-light:    #fee2e2;
  --landing-warning:        #f59e0b;
  --landing-warning-light:  #fef3c7;
  --landing-info:           #3b82f6;
  --landing-info-light:     #dbeafe;

  /* ── Barra de progreso ─────────────────────────────────────────────────── */
  --landing-progress-bg:   var(--landing-border-light);
  --landing-progress-fill: var(--landing-primary);

  /* ── Navegación ────────────────────────────────────────────────────────── */
  --landing-nav-height:           60px;
  --landing-nav-bg:               transparent;
  --landing-nav-bg-scrolled:      rgba(255,255,255,.97);
  --landing-nav-text:             #ffffff;
  --landing-nav-text-scrolled:    var(--landing-accent);
  --landing-nav-border-scrolled:  var(--landing-border-light);
  --landing-nav-logo-height:      36px;

  /* ── Footer ────────────────────────────────────────────────────────────── */
  --landing-footer-bg:         var(--landing-accent);
  --landing-footer-text:       var(--landing-text-inv);
  --landing-footer-text-muted: rgba(255,255,255,.60);
  --landing-footer-border:     rgba(255,255,255,.12);
  --landing-footer-legal-bg:   color-mix(in srgb, var(--landing-accent), #000 20%);

  /* ── Sticky bar ────────────────────────────────────────────────────────── */
  --landing-sticky-bg:   #fbbf24;
  --landing-sticky-text: #111827;
  --landing-sticky-z:    1020;

  /* ── Botones de landing ────────────────────────────────────────────────── */
  --landing-btn-radius:     var(--btn-border-radius, var(--landing-radius-md));
  --landing-btn-font:       var(--font-family-headline, var(--lf-headline));
  --landing-btn-color-text: #ffffff;

  /* ── Z-index ───────────────────────────────────────────────────────────── */
  --landing-z-nav:     var(--z-fixed, 1030);
  --landing-z-sticky:  var(--landing-sticky-z);
  --landing-z-overlay: 1040;

  /* ── Zigzag block ──────────────────────────────────────────────────────── */
  --landing-zigzag-brand:     var(--landing-primary);
  --landing-zigzag-chevron:   60px;   /* PHP puede aumentarlo por campaña */
  --landing-zigzag-strip:     30px;
  --landing-zigzag-strip-neg: -31px;
  --landing-zigzag-min-h:     380px;
  --landing-zigzag-bg-pic:    #1a1a1a;

  /* ── Stats / Quote block ───────────────────────────────────────────────── */
  --landing-stats-number-color: var(--landing-primary);
  --landing-stats-icon-color:   var(--landing-secondary);
  --landing-stats-label-color:  var(--landing-text-inv-muted);
  --landing-quote-border-color: var(--landing-secondary);
  --landing-quote-text-color:   var(--landing-text-inv);

  /* ── Timeline block ────────────────────────────────────────────────────── */
  --landing-tl-marker-size:        2.6rem;
  --landing-tl-marker-size-hover:  3rem;
  --landing-tl-line-width:         2px;
  --landing-tl-line-color:         var(--landing-primary);
  --landing-tl-marker-bg:          #fff;
  --landing-tl-marker-color:       var(--landing-primary);
  --landing-tl-marker-border:      var(--landing-primary);
  --landing-tl-marker-bg-hover:    var(--landing-primary);
  --landing-tl-marker-color-hover: #fff;
  --landing-tl-marker-bg-active:   var(--landing-secondary);
  --landing-tl-marker-color-active:#fff;
  --landing-tl-item-radius:        var(--landing-radius-sm);
  --landing-tl-item-bg-active:
    color-mix(in srgb, var(--landing-secondary) 8%, transparent);
  --landing-tl-transition:         .28s cubic-bezier(.34,1.2,.64,1);
  --landing-tl-transition-color:   .2s ease;
  --landing-tl-visible-count:      4;

  /* ── Target block ──────────────────────────────────────────────────────── */
  --landing-tgt-bg-card:    #ffffff;
  --landing-tgt-bg-block:   var(--landing-bg-light);
  --landing-tgt-text:       #1a1a1a;
  --landing-tgt-text-muted: #5a6a72;
  --landing-tgt-border:     #e0e8e4;
  --landing-tgt-radius:     var(--landing-radius-md);
  --landing-tgt-shadow:     var(--landing-shadow-sm);
  --landing-tgt-shadow-hover: var(--landing-shadow-lg);

  /* ── Puente: formulario de firma (actions) ─────────────────────────────
     Permite que un skin de landing cambie el color de la barra de progreso
     y el botón de firma para que coincidan con --landing-primary.
     Solo sobreescribir si el diseño requiere coherencia estricta con la
     paleta de campaña; de lo contrario actions usa --brick-base por defecto. */
  /* --form-color-primary:   var(--landing-primary); */
  /* --form-progress-fill:   var(--landing-primary); */

  /* ── Puente: widget de donativos (giving) ──────────────────────────────
     --giving-color-blue es el azul corporativo del widget. Un skin puede
     alinearlo con --landing-secondary si el diseño lo requiere.
     Comentado por defecto para no romper landings que usan el azul giving. */
  /* --giving-color-blue:    var(--landing-secondary); */

}


/* ══════════════════════════════════════════════════════════════════════════
   MODO OSCURO — overrides automáticos de superficie y texto
   Solo ajusta tokens de fondo/texto; los de campaña y componentes no cambian.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    --landing-bg:              #0f1318;
    --landing-bg-light:        #1a1f26;
    --landing-card-bg:         #1e242d;
    --landing-form-bg:         #1e242d;

    --landing-text:            #f3f4f5;
    --landing-text-secondary:  #d1d5db;
    --landing-text-muted:      #9ca3af;
    --landing-text-disabled:   #6b7280;

    --landing-border:          #374151;
    --landing-border-light:    #2d3748;
    --landing-card-border:     var(--landing-border-light);

    --landing-nav-bg-scrolled: rgba(15,19,24,.97);
    --landing-nav-text-scrolled: var(--landing-text-inv);
  }
}
