/* Skin «phosphor» — vector-arcade: negro absoluto, trazos de luz, esquinas rectas.
   Tokens: la ÚNICA fuente de color y tipografía. Los usa el CSS (assets/css/base.css) y los lee el pincel del canvas (canvas.js).
   Los pares  --x  /  --x-rgb  son el mismo color (hex y terna) para poder dar transparencias con rgb(var(--x-rgb) / .4). */

@font-face { font-family: "Share Tech Mono"; src: url("fonts/share-tech-mono.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Major Mono Display"; src: url("fonts/major-mono-display.woff2") format("woff2"); font-display: swap; }

@layer skin {
  :root {
    /* superficie y texto */
    --bg: #000;            --bg-rgb: 0 0 0;
    --ink: #d6ffe9;        --ink-rgb: 214 255 233;
    --dim: #5d8672;
    --mute: #9fd1b8;       /* texto secundario */
    --soft: #86b79d;       /* texto terciario */
    --ph: #5f8a74;         /* marcador de posición */
    --white: #fff;
    --top-ink: #fff;   /* el resalte máximo sobre el fondo: los puntos del 1.º puesto y el «perfect» de la práctica */
    --theme-color: #000000;  /* barra del navegador en el móvil */

    /* acento (la acción principal) y estados */
    --acc: #39ff88;        --acc-rgb: 57 255 136;
    --acc-hi: #8dffb9;     /* acento al pasar el ratón */
    --on-acc: #00170a;     /* texto sobre el acento */
    --on-sel: #000;        /* texto sobre una opción seleccionada */
    --hot: #ff2e63;        --hot-rgb: 255 46 99;
    --hot-ink: #ffd3de;    /* texto de un error sobre fondo rojo tenue */
    --amber: #ffd400;
    --gold: #ffe35a;       /* veredicto de victoria */

    /* líneas y bordes, de más tenue a más fuerte */
    --line-faint: #16382a;
    --line-ghost: #2a4a3a;
    --line-lo: #2f5a47;
    --line: #3f735b;
    --line-or: #4d7662;
    --line-hi: #66ad8a;
    --ghost-ink: #7ba592;  /* texto de la fila «esperando jugadores» */

    /* tipografía */
    --mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --display: "Major Mono Display", var(--mono);

    /* colores de jugador (12): el índice lo asigna la sala; los 4 últimos solo salen con 9 o más jugadores */
    --p0: #39ff88; --p1: #ff2e63; --p2: #00e5ff; --p3: #ffd400; --p4: #ff7a00; --p5: #b967ff; --p6: #ffffff; --p7: #7dff00;
    --p8: #5aa9ff; --p9: #ff4de0; --p10: #8dffd5; --p11: #ff9d8a;

    /* canvas (los lee canvas.js al arrancar) */
    --cv-font: "Share Tech Mono", monospace;
    --cv-bg: #000;
    --cv-blend: lighter;                 /* mezcla aditiva: solo se ve sobre fondo oscuro */
    --cv-core: #ffffff;                  /* núcleo de los trazos con halo */
    --cv-ideal: #ffffff;                 /* figura ideal del reveal */
    --cv-hint: #b4ffd2;                  /* rótulos de estado («dibuja», «escaneando») */
    --cv-mute: #a0c8b4;
    --cv-count: #dcffeb;                 /* puntaje mientras sube */
    --cv-gold: #ffe65a;                  /* banner PERFECT */
    --cv-ab1: #ff2850;                   /* aberración cromática del texto grande */
    --cv-ab2: #00dcff;
    --cv-arena-in: rgb(40 120 80 / .17); /* tono de la zona de dibujo: centro y borde */
    --cv-arena-out: rgb(20 70 45 / .09);
    --arena-line-rgb: 90 170 130;        /* filo, esquinas y rejilla de la zona de dibujo */
  }
}