/* ============================================================================
   mobbyt-brand.css — Fuente única de verdad de la identidad visual de Mobbyt.
   Cargar como render-blocking en el <head> ANTES del <style> crítico de cada
   página, para que las variables estén disponibles en el primer paint:

     <link rel="stylesheet" href="<?= h($baseurl) ?>videojuego/educativo/mobbyt-brand.css">

   Luego borrar los bloques :root locales de index.php (--mb-*) y play.php (--mbp-*).
   Es un archivo diminuto: el costo de render-blocking es despreciable y evita FOUC.
   ============================================================================ */

:root{
    /* ── Colores de marca ──────────────────────────────────────────────── */
    --mb-brand:       #009FE3;   /* azul Mobbyt */
    --mb-brand-deep:  #0173A3;   /* azul profundo (gradientes, texto sobre claro) */
    --mb-brand-ink:   #043a52;
    --mb-accent:      #FACC15;   /* amarillo cartucho (borde icónico de portada) */
    --mb-accent-deep: #d4a406;
    --mb-ink:         #18181B;   /* tinta / títulos */
    --mb-ink-soft:    #52525b;   /* texto secundario */
    --mb-go:          #22c55e;   /* verde de acción (jugar) */
    --mb-go-deep:     #16a34a;

    /* ── Superficies ───────────────────────────────────────────────────── */
    --mb-page:   #E9EAED;
    --mb-card:   #ffffff;
    --mb-card-2: #F5F8FE;
    --mb-line:   #e6e8ee;

    /* ── Sistema ───────────────────────────────────────────────────────── */
    --mb-radius:    16px;
    --mb-radius-sm: 12px;
    --mb-shadow:    0 4px 6px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.10);
    --mb-shadow-lg: 0 8px 16px rgba(16,24,40,.10), 0 24px 48px rgba(16,24,40,.16);
    --mb-ease:      cubic-bezier(.22,1,.36,1);

    /* ── Alias para el chrome de play.php (compatibilidad, mismo origen) ── */
    --mbp-brand:      #009FE3;
    --mbp-brand-deep: #0173A3;
    --mbp-line:       rgba(255,255,255,.12);
    --mbp-ease:       cubic-bezier(.22,1,.36,1);
}