/*!
 * tokens.css — La identidad de my ABAKU, en variables.
 *
 * ══ POR QUÉ my TIENE IDENTIDAD PROPIA ══════════════════════════════════════
 * Hasta sep 2026 my cargaba el sistema de diseño del SGE entero (_tokens,
 * _components, temas cosmic/galaxy…) con una variante violeta + cian y el
 * motivo del ábaco. Esa es la cara de ABAKU SGE, un producto. my no es un
 * producto: es la CUENTA del cliente, la misma para quien compró el SGE, un
 * Moodle, QuizAI o todo junto. Si se viste de SGE, el cliente de QuizAI entra a
 * pagar a una pantalla de otra cosa.
 *
 * El LOGO sí es el de ABAKU: ABAKU es el ecosistema y su logo es el mismo en
 * todo (decisión de Fernando, 19 sep 2026). Lo que es propio de my es el
 * lenguaje: los colores salen del logo, pero sin el cosmos del SGE.
 *
 * ══ LA IDEA: EL EXPEDIENTE ═════════════════════════════════════════════════
 * Aquí se viene a ver papeles: el contrato, el recibo, la factura, la licencia.
 * Así que my se ve como un buen expediente: papel claro, tinta índigo, cifras
 * en columnas que cuadran y UN solo color de firma — el cian de la cuenta del
 * logo — que firma donde la cuenta dice «esto está en orden» o «aquí estás».
 *
 *   Degradado #A855F7→#6D28D9→#4338CA  la placa del logo: menú, botones,
 *                    tarjeta héroe de la portada, panel del login. Es la cara.
 *   Morado  #7C3AED  la acción suelta: enlaces, foco, selección.
 *   Cian    #22D3EE  la firma (la cuenta del logo): ítem activo, sello «al día»,
 *                    el brillo sobre el morado. NUNCA texto sobre blanco.
 *   Tinta   #1E1250  índigo-morado profundo.
 *   Papel   #F5F3FC  el fondo: casi blanco con un soplo lila.
 *
 * Atrevido pero refinado: el color va en BLOQUES grandes (menú, héroe, botón)
 * y el resto es papel limpio con líneas finas. Nada de brillos por todas partes.
 *
 * Sin verde de marca (a Fernando no le gusta). El verde queda SÓLO como color
 * semántico de «pagado / correcto».
 *
 * La doc completa (con el porqué de cada decisión) vive en dev.abaku.mx →
 * ABAKU → Documentación → Docs internos → Identidad de marca → my ABAKU.
 *
 * Reglas: todo color de módulo sale de aquí (--my-*). Nada de --abk-*: ése es
 * el namespace del SGE y en my ya no existe.
 */

:root {
  /* ── Tipografía ─────────────────────────────────────────────────────────
     Manrope: geométrica y cálida, con cifras que alinean (tnum). Plex Mono
     para lo que se copia o se dicta: folios, claves de licencia, referencias.
     --my-font la sobreescribe el PHP en chino e hindi. */
  --my-font-ui:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --my-font:      var(--my-font-ui);
  --my-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --my-fs-xs:   12px;
  --my-fs-sm:   13px;
  --my-fs:      14.5px;
  --my-fs-lg:   16px;
  --my-fs-h3:   16px;
  --my-fs-h2:   19px;
  --my-fs-h1:   clamp(22px, 1.4vw + 14px, 27px);
  --my-display: clamp(30px, 2vw + 18px, 42px);
  --my-cifra:   clamp(20px, .8vw + 15px, 25px);

  /* ── Espacio y forma ── */
  --my-s1: 4px;  --my-s2: 8px;  --my-s3: 12px; --my-s4: 16px;
  --my-s5: 24px; --my-s6: 32px; --my-s7: 48px;
  --my-r-sm: 8px;
  --my-r:    12px;
  --my-r-lg: 18px;
  --my-r-pill: 999px;

  --my-sidebar-w: 256px;
  --my-header-h:  64px;
  --my-ease: cubic-bezier(.2, .7, .2, 1);

  /* ── Marca (igual en los dos modos) ── */
  --my-tinta:     #1E1250;
  --my-tinta-2:   #2E1A78;
  --my-acento:    #22D3EE;
  --my-acento-ink:#083344;  /* tinta SOBRE cian */

  /* Los degradados del logo, en vivo. --my-grad es la placa del isotipo tal
     cual; --my-grad-vivo la sube un punto para botones y la tarjeta héroe. */
  --my-grad:      linear-gradient(135deg, #A855F7 0%, #6D28D9 58%, #4338CA 100%);
  --my-grad-vivo: linear-gradient(135deg, #B15CFF 0%, #7C3AED 50%, #4F46E5 100%);
  --my-grad-side: linear-gradient(180deg, #2B1478 0%, #1E1250 52%, #150D3F 100%);
  --my-glow:      0 10px 30px -10px rgba(124, 58, 237, .55);
  /* Texto con el degradado (cifras del resumen): en oscuro se aclara. */
  --my-grad-texto: linear-gradient(135deg, #9333EA, #5B21B6 60%, #4338CA);

  /* ── Modo claro ── */
  --my-bg:          #F5F3FC;
  --my-surface:     #FFFFFF;
  --my-surface-2:   #FBFAFD;
  --my-sunken:      #EEECF4;
  --my-line:        #E4E1EC;
  --my-line-strong: #CFCAE0;
  --my-ink:         #17152B;
  --my-ink-2:       #4A4760;
  --my-ink-3:       #76728C;

  /* La acción es morado vivo (el del logo, un punto más encendido). */
  --my-primary:       #7C3AED;
  --my-primary-hover: #6D28D9;
  --my-on-primary:    #FFFFFF;
  --my-primary-soft:  #F1EAFE;
  --my-link:          #6D28D9;

  --my-ok:        #0E7A4F;  --my-ok-bg:   #E3F2EA;  --my-ok-line:   #BFE1CF;
  --my-warn:      #8A5207;  --my-warn-bg: #FBF0D9;  --my-warn-line: #EFD39B;
  --my-err:       #B42318;  --my-err-bg:  #FDECEA;  --my-err-line:  #F6C4BE;
  --my-info:      #1D5B94;  --my-info-bg: #E6EFF8;  --my-info-line: #BCD3EA;

  /* El menú es tinta índigo en los dos modos: es la «tapa» del expediente. */
  --my-side-bg:     var(--my-grad-side);
  --my-side-ink:    #DCD8F2;
  --my-side-ink-2:  #9D97C4;
  --my-side-hover:  rgba(255, 255, 255, .06);
  --my-side-line:   rgba(255, 255, 255, .09);

  --my-shadow-sm: 0 1px 2px rgba(23, 21, 43, .05);
  --my-shadow:    0 1px 2px rgba(23, 21, 43, .04), 0 10px 28px -16px rgba(23, 21, 43, .18);
  --my-shadow-lg: 0 24px 60px -24px rgba(27, 23, 68, .35);
  --my-focus:     0 0 0 3px color-mix(in srgb, var(--my-primary) 28%, transparent);

  color-scheme: light;
}

/* ── Modo oscuro: sobrio. Índigo casi negro, sin brillos ni neones. ── */
:root[data-theme="dark"] {
  --my-bg:          #0F0C1D;
  --my-surface:     #171330;
  --my-surface-2:   #1D1838;
  --my-sunken:      #0C0B14;
  --my-line:        #2C2648;
  --my-line-strong: #3A3754;
  --my-ink:         #E8E6F4;
  --my-ink-2:       #B7B3CF;
  --my-ink-3:       #8A86A6;

  --my-primary:       #A78BFA;
  --my-primary-hover: #C4B5FD;
  --my-on-primary:    #FFFFFF;
  --my-primary-soft:  rgba(167, 139, 250, .14);
  --my-link:          #C4B5FD;
  --my-grad-side: linear-gradient(180deg, #1F1058 0%, #140B3A 55%, #0E0829 100%);
  --my-grad-texto: linear-gradient(135deg, #E9D5FF, #A78BFA 60%, #818CF8);

  --my-ok:   #5FD3A6;  --my-ok-bg:   rgba(95, 211, 166, .12);  --my-ok-line:   rgba(95, 211, 166, .28);
  --my-warn: #F0B658;  --my-warn-bg: rgba(240, 182, 88, .12);  --my-warn-line: rgba(240, 182, 88, .30);
  --my-err:  #F4867B;  --my-err-bg:  rgba(244, 134, 123, .12); --my-err-line:  rgba(244, 134, 123, .30);
  --my-info: #82B6EA;  --my-info-bg: rgba(130, 182, 234, .12); --my-info-line: rgba(130, 182, 234, .28);

  --my-side-line:  rgba(255, 255, 255, .07);

  --my-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --my-shadow:    0 1px 2px rgba(0, 0, 0, .25), 0 12px 30px -18px rgba(0, 0, 0, .6);
  --my-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .7);

  color-scheme: dark;
}