/* ============================================================================
   tokens.css — Sistema dual de pista visual (Rostick child theme)
   ----------------------------------------------------------------------------
   PISTA DEFAULT = PARTICULAR (azul + verde) → es la marca por defecto.
   PISTA ALTERNATIVA = PROFESIONAL (naranja + dorado) → se activa añadiendo
   `body.track-pro` desde PHP (body_class) en plantillas B2B:
     - page-area-pro*.php, page-partners.php, page-registro-pro.php
     - todo lo bajo /area-pro/ y portal-pro.php

   El resto del CSS consume los nombres semánticos `--track-*`.
   Si necesitas un color de marca específico (no la pista actual), usa los
   `--brand-*` legacy que siguen viviendo en style.css (no se tocan en Fase 2).

   La paleta `--apl-*` de la landing pública del Área Pro (.area-pro-public)
   queda intencionalmente separada en style.css — patrón aprobado por Toni
   (memoria `feedback_estilo_landings.md`). No la mezclamos con `--track-*`.

   Convenciones:
     --track-1            color principal de la pista
     --track-1-deep       variante profunda (texto sobre claro, hovers)
     --track-1-soft       variante clara (acentos sobre fondo oscuro)
     --track-2            color secundario complementario
     --track-2-deep       sombras del secundario
     --track-celebrate    highlight reservado a celebración real
                          (memoria `whimsy_rostick_aprobado_2026-04-19.md`)
     --track-grad         gradiente principal (135deg, --track-1 → --track-2)
     --track-grad-hover   gradiente en hover (versiones deep)
     --track-glow         box-shadow coloreada
     --track-glow-hover   box-shadow coloreada más intensa
     --track-bg-soft      tinta de fondo ligera de --track-1
     --track-bg-tint      tinta de fondo ligera de --track-2
     --track-border-soft  borde coloreado tenue
     --track-focus-ring   color del outline focus-visible (3px)
     --track-1-rgb        triplete RGB para componer rgba() inline
     --track-2-rgb        idem secundario

   Contraste WCAG (verificado sobre fondo blanco):
     --track-1            #2C7BC1   ratio ~4.47:1 → fronterizo AA texto grande
                                    (≥18pt regular o ≥14pt bold). NO usar para
                                    texto de cuerpo normal sobre blanco.
     --track-1-deep       #163A6A   ratio ~11.5:1 → AAA texto normal.
     → para LINKS de texto normal usar SIEMPRE --track-1-deep en particular.
     → --track-1 va bien para BOTONES con gradiente (la zona deep del grad
       resuelve el contraste) y para acentos gráficos (border, dot, icono).

   --track-1 (pro)        #F07A1F   ratio ~3.05:1 → AA solo texto grande
   --track-1-deep (pro)   #C9502E   ratio ~4.66:1 → AA texto normal
   → mismo patrón: links en --track-1-deep, botones en --track-1.

   Foreground sobre fondo de marca (verificado):
     blanco sobre #2C7BC1  ≈ 4.47:1   AA texto grande, FAIL texto normal
     blanco sobre #163A6A  ≈ 11.5:1   AAA total
     navy  sobre #F07A1F   ≈ 6.05:1   AA texto normal, AAA texto grande
     blanco sobre #C9502E  ≈ 4.66:1   AA texto normal
   ⚠ NO uses var(--track-on-1) con var(--track-1) sólido en texto pequeño en
   particular — falla AA. Usa --track-grad como fondo (texto blanco aterriza
   sobre la zona --track-2 verde oscuro del gradiente y el contraste sube).
============================================================================ */

:root {
  /* ── Pista default: PARTICULAR (azul + verde) ─────────────────── */
  --track-1: #2C7BC1;
  --track-1-deep: #163A6A;
  --track-1-soft: #6EAADC;
  --track-2: #2E9748;
  --track-2-deep: #0E5E3A;
  --track-celebrate: #7BC142;

  --track-grad: linear-gradient(135deg, #2C7BC1 0%, #2E9748 100%);
  --track-grad-hover: linear-gradient(135deg, #163A6A 0%, #0E5E3A 100%);
  --track-glow: 0 8px 24px -8px rgba(44, 123, 193, .45);
  --track-glow-hover: 0 12px 32px -6px rgba(44, 123, 193, .60);
  --track-bg-soft: rgba(44, 123, 193, .08);
  --track-bg-tint: rgba(46, 151, 72, .06);
  --track-border-soft: rgba(44, 123, 193, .22);
  --track-focus-ring: rgba(44, 123, 193, .85);

  /* Foreground recomendado SOBRE cada superficie de marca (WCAG verificado):
       blanco sobre --track-1 (#2C7BC1)      ≈ 4.47:1  AA texto grande
       blanco sobre --track-1-deep (#163A6A) ≈ 11.5:1  AAA total
       blanco sobre --track-grad (mezcla)    seguro porque el gradiente
                                             remata en verde oscuro #2E9748.
     ⚠ --track-on-1 con --track-1 sólido en texto NORMAL falla AA. Para
     cuerpos de texto sobre fondo de marca usa --track-1-deep o --track-grad. */
  --track-on-1: #FFFFFF;
  --track-on-1-deep: #FFFFFF;
  --track-on-grad: #FFFFFF;

  --track-1-rgb: 44, 123, 193;
  --track-2-rgb: 46, 151, 72;
}

/* ── Pista alternativa: PROFESIONAL (naranja + dorado) ──────────────
   Se aplica con `body.track-pro` (añadir desde PHP en plantillas B2B).
   Cualquier nodo descendiente que use var(--track-*) coge naranja. */
body.track-pro {
  --track-1: #F07A1F;
  --track-1-deep: #C9502E;
  --track-1-soft: #FFB070;
  --track-2: #E8B828;
  --track-2-deep: #9C7820;
  --track-celebrate: #E8B828;

  --track-grad: linear-gradient(135deg, #F07A1F 0%, #C9502E 100%);
  --track-grad-hover: linear-gradient(135deg, #C9502E 0%, #F07A1F 100%);
  --track-glow: 0 8px 24px -8px rgba(240, 122, 31, .45);
  --track-glow-hover: 0 12px 32px -6px rgba(240, 122, 31, .60);
  --track-bg-soft: rgba(240, 122, 31, .08);
  --track-bg-tint: rgba(232, 184, 40, .08);
  --track-border-soft: rgba(240, 122, 31, .22);
  --track-focus-ring: rgba(240, 122, 31, .85);

  /* En pro (WCAG verificado):
       blanco sobre #F07A1F = 2.97:1 → FALLA AA. NO usar blanco sobre naranja.
       navy   sobre #F07A1F ≈ 6.05:1 → AA texto normal, AAA texto grande.
       blanco sobre #C9502E ≈ 4.66:1 → AA texto normal.
     Por eso --track-on-1 (sobre --track-1 naranja) = navy, y
            --track-on-1-deep (sobre --track-1-deep terracota) = blanco. */
  --track-on-1: #0A1A2F;
  --track-on-1-deep: #FFFFFF;
  --track-on-grad: #0A1A2F;

  --track-1-rgb: 240, 122, 31;
  --track-2-rgb: 232, 184, 40;
}

/* ── Override puntual para componentes que viven dentro del Área Pro
      aunque la página no tenga body.track-pro (ej. embeds, widgets de
      preview en B2C que muestran info pro). Usar .track-pro como
      clase de "isla" en el elemento padre del bloque pro. ────────── */
.track-pro {
  --track-1: #F07A1F;
  --track-1-deep: #C9502E;
  --track-1-soft: #FFB070;
  --track-2: #E8B828;
  --track-2-deep: #C9502E;
  --track-celebrate: #E8B828;
  --track-grad: linear-gradient(135deg, #F07A1F 0%, #C9502E 100%);
  --track-grad-hover: linear-gradient(135deg, #C9502E 0%, #F07A1F 100%);
  --track-glow: 0 8px 24px -8px rgba(240, 122, 31, .45);
  --track-glow-hover: 0 12px 32px -6px rgba(240, 122, 31, .60);
  --track-bg-soft: rgba(240, 122, 31, .08);
  --track-bg-tint: rgba(232, 184, 40, .08);
  --track-border-soft: rgba(240, 122, 31, .22);
  --track-focus-ring: rgba(240, 122, 31, .85);
  --track-on-1: #0A1A2F;
  --track-on-1-deep: #FFFFFF;
  --track-on-grad: #0A1A2F;
  --track-1-rgb: 240, 122, 31;
  --track-2-rgb: 232, 184, 40;
}

/* ── Isla particular dentro de página pro (mismo patrón inverso) ── */
.track-particular {
  --track-1: #2C7BC1;
  --track-1-deep: #163A6A;
  --track-1-soft: #6EAADC;
  --track-2: #2E9748;
  --track-2-deep: #0E5E3A;
  --track-celebrate: #7BC142;
  --track-grad: linear-gradient(135deg, #2C7BC1 0%, #2E9748 100%);
  --track-grad-hover: linear-gradient(135deg, #163A6A 0%, #0E5E3A 100%);
  --track-glow: 0 8px 24px -8px rgba(44, 123, 193, .45);
  --track-glow-hover: 0 12px 32px -6px rgba(44, 123, 193, .60);
  --track-bg-soft: rgba(44, 123, 193, .08);
  --track-bg-tint: rgba(46, 151, 72, .06);
  --track-border-soft: rgba(44, 123, 193, .22);
  --track-focus-ring: rgba(44, 123, 193, .85);
  --track-on-1: #FFFFFF;
  --track-on-1-deep: #FFFFFF;
  --track-on-grad: #FFFFFF;
  --track-1-rgb: 44, 123, 193;
  --track-2-rgb: 46, 151, 72;
}

/* ── Tokens de animación (consumidos por Fase 4: gradiente animado en
      hover, underline ::after, arrow shift en botones, etc.) ──────── */
:root {
  --track-anim-duration: 280ms;
  --track-anim-translate: 4px;
  --track-anim-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Respeto a prefers-reduced-motion: anula movimiento sin tocar color. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --track-anim-duration: 0ms;
    --track-anim-translate: 0;
  }
}