/* ============================================================================
   Ajwebx — Tokens de diseño (v1.0)
   Archivo: css/tokens/aj-tokens-v-1.0.css
   Creado:  2026-11-01
   Uso:    base del acabado «glass claro». Solo variables: no pinta nada por sí solo.
   Orden:  cargar antes de cualquier CSS que use --aj-*.
   Nota:   los alias --cl-* de la plataforma se conservan intactos; estos tokens
           son una capa nueva, no un reemplazo.
   ============================================================================ */

:root
{
    /* ------------------------------------------------------------------------
       Lienzo y aurora (fondo del shell)
       ------------------------------------------------------------------------ */
    --aj-canvas:        #F4F7FB;
    --aj-aurora-a:      rgba(1, 116, 223, .07);
    --aj-aurora-b:      rgba(133, 193, 233, .16);
    --aj-aurora-c:      rgba(214, 234, 248, .45);

    /* ------------------------------------------------------------------------
       Superficies de vidrio: N1 chrome · N2 paneles · N3 overlays
       ------------------------------------------------------------------------ */
    --aj-s1:            rgba(255, 255, 255, .72);
    --aj-s2:            rgba(255, 255, 255, .80);
    --aj-s3:            rgba(255, 255, 255, .88);

    /* Pozos: superficies opacas donde vive el contenido */
    --aj-well:          #FFFFFF;
    --aj-well-soft:     #FBFDFF;

    /* ------------------------------------------------------------------------
       Líneas y luz
       ------------------------------------------------------------------------ */
    --aj-line:          rgba(15, 23, 42, .08);
    --aj-line-strong:   rgba(15, 23, 42, .14);
    --aj-edge:          inset 0 1px 0 rgba(255, 255, 255, .75);

    /* ------------------------------------------------------------------------
       Profundidad
       ------------------------------------------------------------------------ */
    --aj-sh1:           0 1px 2px rgba(2, 32, 71, .06);
    --aj-sh2:           0 8px 24px rgba(2, 32, 71, .08);
    --aj-sh3:           0 24px 64px rgba(2, 32, 71, .18);

    /* ------------------------------------------------------------------------
       Vidrio
       ------------------------------------------------------------------------ */
    --aj-blur-sm:       12px;
    --aj-blur-md:       16px;
    --aj-blur-lg:       20px;
    --aj-blur-xl:       24px;
    --aj-blur-2xl:      28px;
    --aj-sat:           140%;

    /* ------------------------------------------------------------------------
       Texto
       ------------------------------------------------------------------------ */
    --aj-ink:           #1B2735;
    --aj-ink-2:         #4A5A6E;
    --aj-ink-3:         #5E7085;   /* solo sobre superficies opacas */
    --aj-link:          #0B4F9E;
    --aj-accent:        #0174DF;
    --aj-accent-hover:  #0163C0;
    --aj-accent-soft:   #E3F0FC;

    /* Estado */
    --aj-ok:            #0E8A6B;
    --aj-error:         #B3261E;
    --aj-warn:          #B26A00;
    --aj-info:          #0B6FA4;

    /* ------------------------------------------------------------------------
       Forma y ritmo
       ------------------------------------------------------------------------ */
    --aj-r-xs:          6px;
    --aj-r-sm:          8px;
    --aj-r-md:          10px;
    --aj-r-lg:          14px;
    --aj-r-xl:          18px;
    --aj-r-pill:        999px;

    --aj-sp-1:          4px;
    --aj-sp-2:          6px;
    --aj-sp-3:          8px;
    --aj-sp-4:          12px;
    --aj-sp-5:          16px;
    --aj-sp-6:          24px;
    --aj-sp-7:          32px;

    /* ------------------------------------------------------------------------
       Shell (para las siguientes entregas; hoy sin uso)
       ------------------------------------------------------------------------ */
    --aj-header-h:      44px;
    --aj-footer-h:      38px;
    --aj-gap:           8px;
    --aj-appbar-h:      48px;
    --aj-chrome:        calc(var(--aj-header-h) + var(--aj-footer-h) + var(--aj-gap) * 2);

    /* ------------------------------------------------------------------------
       Movimiento y foco
       ------------------------------------------------------------------------ */
    --aj-t1:            120ms;
    --aj-t2:            180ms;
    --aj-t3:            240ms;
    --aj-ease:          cubic-bezier(.2, .8, .2, 1);
    --aj-spring:        cubic-bezier(.22, 1, .36, 1);

    --aj-focus:         0 0 0 2px #FFFFFF, 0 0 0 4px #0B4F9E;
}