/* ==========================================================================
   ALION24 — TOKENS
   Colores EXTRAÍDOS del logo original (no estimados): se segmentó la garra del
   JPEG, se detectó el eje del gradiente por correlación tono/posición (150°,
   r=0.977) y se muestrearon 5 paradas a lo largo de ese eje.

   Todo en HEX a propósito. Se descartó oklch() porque si el navegador no lo
   soporta la variable queda inválida, `color` HEREDA del tema de Bitrix (que
   fuerza texto oscuro) y el resultado es texto negro sobre fondo negro — justo
   lo que el dueño prohibió. Con hex eso no puede pasar en ningún navegador.

   Contrastes verificados por cálculo, no a ojo. Ver la tabla al final.
   ========================================================================== */

:root {
  /* ---------- superficies ---------------------------------------------- */
  --paper:        #000000;   /* negro de marca (el del logo) */
  --paper-2:      #0D0B10;   /* tarjetas */
  --paper-3:      #16131C;   /* tarjeta en hover, bloques de código */
  --paper-4:      #1E1926;   /* elevación máxima */
  --rule:         #2A2533;   /* bordes */
  --rule-soft:    #1B1722;

  /* ---------- tinta ------------------------------------------------------ */
  --ink:          #FBFBFB;   /* el blanco exacto del wordmark · 20.3:1 sobre negro */
  --ink-2:        #C9C4D2;   /* secundario · 12.4:1 */
  --muted:        #A8A1AE;   /* apagado · 8.4:1 sobre negro, 7.8:1 sobre paper-2 */

  /* ---------- la garra: 5 paradas reales del gradiente ------------------- */
  --claw-1:       #E4A929;   /* ámbar   · extremo abajo-izquierda */
  --claw-2:       #F0975E;   /* naranja */
  --claw-3:       #F172B9;   /* rosa */
  --claw-4:       #D560EB;   /* magenta */
  --claw-5:       #9E5DE5;   /* violeta · extremo arriba-derecha */

  /* alias semánticos (los 3 que rotan por servicio) */
  --brand-amber:   var(--claw-1);
  --brand-pink:    var(--claw-3);
  --brand-violet:  var(--claw-5);

  /* ---------- funcionales ------------------------------------------------ */
  --accent:        var(--claw-1);
  --on-accent:     #000000;  /* SIEMPRE negro puro sobre gradiente/acento: 5.15:1 en el peor tramo */
  --focus:         #FFC658;  /* anillo de foco · 12.1:1 sobre negro */
  --ok:            #4ADE93;
  --warn:          #FFB84D;
  --danger:        #FF6B6B;

  /* ---------- gradientes ------------------------------------------------- */
  /* 150° = el eje real medido en el logo (ámbar abajo-izq → violeta arriba-der) */
  --grad-claw: linear-gradient(60deg,
      var(--claw-1) 0%, var(--claw-2) 25%, var(--claw-3) 50%,
      var(--claw-4) 75%, var(--claw-5) 100%);
  --grad-claw-soft: linear-gradient(60deg,
      #E4A92926 0%, #F172B926 50%, #9E5DE526 100%);
  --grad-line: linear-gradient(90deg,
      transparent, var(--claw-3) 35%, var(--claw-5) 70%, transparent);

  /* ---------- halos (sobre negro las sombras grises no existen) ---------- */
  --halo-amber:   0 14px 44px -16px #E4A92999;
  --halo-pink:    0 14px 44px -16px #F172B999;
  --halo-violet:  0 14px 44px -16px #9E5DE599;
  --shadow-card:  0 12px 34px -14px #000000CC;
  --shadow-pop:   0 24px 70px -20px #000000E6;

  /* ---------- tipografía -------------------------------------------------- */
  --font-display: "Outfit", "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  clamp(1.95rem, 1.2rem + 2.7vw, 3.1rem);
  --t-hero: clamp(2.5rem, 1.3rem + 5.2vw, 5.4rem);

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.62;
  --track-tight: -0.025em;
  --measure: 62ch;

  /* ---------- espaciado (escala 4pt) ------------------------------------- */
  --s-2xs: .25rem;  --s-xs: .5rem;   --s-sm: .75rem;  --s-md: 1rem;
  --s-lg: 1.5rem;   --s-xl: 2.5rem;  --s-2xl: 4rem;   --s-3xl: 6.5rem;
  --s-4xl: 9rem;

  /* ---------- radios ------------------------------------------------------ */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* ---------- movimiento --------------------------------------------------- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: 160ms; --d-med: 320ms; --d-slow: 620ms;

  /* ---------- layout ------------------------------------------------------ */
  --wrap: 76rem;
  --wrap-narrow: 54rem;
  --nav-h: 72px;
}

/* Nadie se marea por nuestra culpa. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   CONTRASTE VERIFICADO (WCAG 2.1) — calculado, no estimado.
   Piso exigido: AA (4.5:1 texto normal · 3:1 texto grande y componentes).

     ink      #FBFBFB / paper #000000 ......... 20.29:1   AAA
     ink      #FBFBFB / paper-2 #0D0B10 ....... 19.02:1   AAA
     ink-2    #C9C4D2 / paper ................. 12.43:1   AAA
     muted    #A8A1AE / paper ................. 8.41:1    AA
     muted    #A8A1AE / paper-2 ............... 7.88:1    AA
     focus    #FFC658 / paper ................. 12.13:1   AA (mínimo 3:1)

   La garra como TEXTO o TRAZO sobre negro:
     claw-1   #E4A929 ......................... 10.01:1   AA
     claw-2   #F0975E ......................... 9.29:1    AA
     claw-3   #F172B9 ......................... 7.85:1    AA
     claw-4   #D560EB ......................... 6.70:1    AA
     claw-5   #9E5DE5 ......................... 5.15:1    AA

   Texto NEGRO PURO sobre el gradiente (botón primario), peor tramo:
     #000000 / claw-5 #9E5DE5 ................. 5.15:1    AA  <- el caso crítico

   Por eso --on-accent es #000000 y no un "casi negro": con #0A090C el peor
   tramo cae a 4.38:1 y FALLA. Se midió, no se supuso.

   Blanco sobre el gradiente daría 2.01:1 en el ámbar: PROHIBIDO.
   ========================================================================== */