/* ==========================================================================
   Veduka Juegos — tokens
   Traducción literal del tablero "Tokens" de Claude Design.
   Prefijo: --vj-   (el sitio usa --vd-; el juego vive en un iframe y no
   puede depender del CSS del tema, así que trae los suyos.)

   Diferencia deliberada con el sistema del sitio: la rampa morada se
   ancla al morado real de veduka.com.mx (#9367A2), no al #9C72AE del
   paquete web.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&family=Caveat:wght@500;700&display=swap');

:root {
  color-scheme: light;

  /* --- 1. Marca ---------------------------------------------------------
     #9367A2 NUNCA lleva texto blanco (3.9:1). Para botones y texto sobre
     morado se usa --vj-purple-600 o más oscuro. */
  --vj-purple-50:  #F6F1F9;
  --vj-purple-100: #EDE3F2;
  --vj-purple-300: #C4A8D2;   /* solo superficies */
  --vj-purple-500: #9367A2;   /* logo: superficie y display 32px+ */
  --vj-purple-600: #7D5590;   /* interactivo: el que carga texto blanco */
  --vj-purple-800: #513860;

  /* --- 2. Papel y tinta -------------------------------------------------- */
  --vj-surface-page:   #FDF7F0;
  --vj-surface-card:   #FFFFFF;
  --vj-surface-sunken: #F8EEE3;
  --vj-border:         #E8D8C7;
  --vj-border-soft:    #F3E7DA;
  --vj-ink:            #3E3646;
  --vj-ink-muted:      #6E6478;   /* solo texto para la maestra */
  --vj-ink-subtle:     #8F8699;
  /* Texto sobre ámbar: el amarillo SIEMPRE lleva tinta oscura, y la tinta
     correcta es esta, no --vj-amber-ink (esa es para texto sobre crema).
     Con --vj-ink-on-accent el contraste es 7.3:1; con amber-ink, 3.3:1. */
  --vj-ink-on-accent:  #3E3646;

  /* --- 3. Contenido — seis colores, nunca un séptimo ---------------------
     sólido = relleno de figura · tinte = fondo de tarjeta · ink = texto sobre crema */
  --vj-coral:      #F58C7E;  --vj-coral-ink:      #B33F33;  --vj-coral-tint:      #FDE7E3;
  --vj-mint:       #7FCFBB;  --vj-mint-ink:       #1F7A66;  --vj-mint-tint:       #E3F5EF;
  --vj-sky:        #7FB6E8;  --vj-sky-ink:        #2C6BA0;  --vj-sky-tint:        #E4F0FB;
  --vj-terracotta: #D69277;  --vj-terracotta-ink: #9A4E31;  --vj-terracotta-tint: #F6E7DE;
  --vj-amber:      #FCC557;  --vj-amber-ink:      #96600F;  --vj-amber-tint:      #FFF1D3;
  --vj-lilac:      #C4A8D2;  --vj-lilac-ink:      #6C4A7C;  --vj-lilac-tint:      #EDE3F2;

  /* --- 4. Semánticos ----------------------------------------------------- */
  --vj-ok:      var(--vj-mint);   --vj-ok-ink:      var(--vj-mint-ink);   --vj-ok-tint:      var(--vj-mint-tint);
  --vj-retry:   var(--vj-coral);  --vj-retry-ink:   var(--vj-coral-ink);  --vj-retry-tint:   var(--vj-coral-tint);
  --vj-hint:    var(--vj-amber);  --vj-hint-ink:    var(--vj-amber-ink);  --vj-hint-tint:    var(--vj-amber-tint);

  /* --- 5. Tipografía -----------------------------------------------------
     Nada por debajo de 14px. Nada dirigido al niño por debajo de 18px.
     Caveat solo como acento de una línea, nunca instrucción. */
  --vj-font-display: 'Fredoka', 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --vj-font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vj-font-script:  'Caveat', 'Bradley Hand', cursive;

  --vj-text-display: 56px;   /* Fredoka */
  --vj-text-title:   38px;   /* Fredoka */
  --vj-text-button:  24px;   /* Fredoka */
  --vj-text-body:    18px;   /* Nunito 700 — el mínimo para el niño */
  --vj-text-meta:    15px;   /* Nunito 800 caps */
  --vj-text-note:    14px;   /* Nunito — solo maestra */
  --vj-text-accent:  30px;   /* Caveat */

  --vj-weight-regular: 400;
  --vj-weight-semibold: 600;
  --vj-weight-bold: 700;
  --vj-weight-black: 800;

  --vj-leading-tight: 1.06;
  --vj-leading-snug: 1.2;
  --vj-leading-normal: 1.45;

  /* --- 6. Espaciado (base 4) --------------------------------------------- */
  --vj-space-1: 4px;   --vj-space-2: 8px;   --vj-space-3: 12px;
  --vj-space-4: 16px;  --vj-space-5: 20px;  --vj-space-6: 24px;
  --vj-space-7: 32px;  --vj-space-8: 40px;  --vj-space-9: 48px;
  --vj-space-10: 64px;

  /* --- 7. Radios — la marca es redonda ----------------------------------- */
  --vj-radius-sm: 10px;
  --vj-radius-lg: 20px;
  --vj-radius-xl: 28px;
  --vj-radius-2xl: 36px;
  --vj-radius-pill: 999px;
  --vj-radius-circle: 50%;

  /* --- 8. Sombras -------------------------------------------------------- */
  --vj-shadow-md:      0 2px 4px rgba(62,54,70,0.05), 0 8px 20px rgba(62,54,70,0.08);
  --vj-shadow-lg:      0 4px 8px rgba(62,54,70,0.05), 0 18px 40px rgba(62,54,70,0.10);
  --vj-shadow-lift:    0 10px 24px rgba(108,74,124,0.18);
  --vj-shadow-sticker: 0 6px 0 rgba(62,54,70,0.16);   /* botón: 6px */
  --vj-shadow-tile:    0 3px 0 rgba(62,54,70,0.12);

  /* --- 9. Movimiento ------------------------------------------------------ */
  --vj-duration-fast: 120ms;   /* mínimo visible del estado presionado */
  --vj-duration-base: 200ms;
  --vj-duration-slow: 360ms;
  --vj-ease:        cubic-bezier(0.34, 0.9, 0.36, 1);
  --vj-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- 10. Medidas del marco ---------------------------------------------- */
  --vj-topbar-h: 112px;
  --vj-touch-min: 80px;        /* nada táctil por debajo de 80×80 */
  --vj-btn-h: 88px;            /* primario */

  /* --- 11. Tamaños de figura ---------------------------------------------- */
  --vj-shape-xs: 40px;   /* progreso */
  --vj-shape-sm: 64px;   /* celular */
  --vj-shape-md: 92px;   /* opción */
  --vj-shape-lg: 128px;  /* secuencia */
  --vj-shape-xl: 176px;  /* celebración */

  /* Color de contenido por defecto (ver el gancho [data-color] abajo). */
  --vj-c: var(--vj-purple-500);
  --vj-c-ink: var(--vj-purple-600);
  --vj-c-tint: var(--vj-purple-50);
}

/* --- Colores de papel picado real ---------------------------------------
   NO amplían la paleta de seis del sistema: son colores de CONTENIDO de un
   juego concreto. El papel picado de verdad es saturado, y el menta y el
   coral de la paleta se leen como pastel, no como fiesta.
   Decisión del dueño del sitio, tomada a sabiendas.

   Cada uno trae su tinta calculada para pasar AA sobre su propio tinte
   (ahí van las etiquetas de las cestas) y sobre la crema de la página. */
[data-color="papel-rojo"]  { --vj-c: #D63A51; --vj-c-ink: #C3354A; --vj-c-tint: #FAE7EA; }
[data-color="papel-verde"] { --vj-c: #198C3D; --vj-c-ink: #167B36; --vj-c-tint: #E3F1E8; }
[data-color="papel-lima"]  { --vj-c: #7AAD3B; --vj-c-ink: #557929; --vj-c-tint: #EFF5E7; }

/* --- Gancho de color de contenido ---------------------------------------
   Cualquier elemento dentro de [data-color] hereda tres variables. Así una
   figura, una casilla o una cesta cambian de tono sin clases nuevas. */
[data-color="coral"]      { --vj-c: var(--vj-coral);      --vj-c-ink: var(--vj-coral-ink);      --vj-c-tint: var(--vj-coral-tint); }
[data-color="mint"]       { --vj-c: var(--vj-mint);       --vj-c-ink: var(--vj-mint-ink);       --vj-c-tint: var(--vj-mint-tint); }
[data-color="sky"]        { --vj-c: var(--vj-sky);        --vj-c-ink: var(--vj-sky-ink);        --vj-c-tint: var(--vj-sky-tint); }
[data-color="terracotta"] { --vj-c: var(--vj-terracotta); --vj-c-ink: var(--vj-terracotta-ink); --vj-c-tint: var(--vj-terracotta-tint); }
[data-color="amber"]      { --vj-c: var(--vj-amber);      --vj-c-ink: var(--vj-amber-ink);      --vj-c-tint: var(--vj-amber-tint); }
[data-color="lilac"]      { --vj-c: var(--vj-lilac);      --vj-c-ink: var(--vj-lilac-ink);      --vj-c-tint: var(--vj-lilac-tint); }