/*
 * Dibújalo — paleta. FUENTE ÚNICA de colores para la portada (plantillas de Django) y la PWA
 * (frontend/src/estilos.css). Nunca hex sueltos fuera de este archivo (docs/identidad-visual.md).
 *
 * De día, papel cuadriculado y tinta; de noche, pizarrón y gis. Sigue el tema del sistema.
 * Las categorías son «plumones»: un color por categoría, con su versión para fondo oscuro.
 */
:root {
  color-scheme: light;

  --dj-papel: #f7f6f1;          /* fondo de página */
  --dj-cuadricula: #e4e7ea;     /* líneas del cuaderno y rellenos tenues */
  --dj-hoja: #ffffff;           /* tarjetas, paneles */
  --dj-tinta: #23272b;          /* texto principal */
  --dj-tinta-2: #5d646b;        /* texto secundario */
  --dj-tinta-3: #8b9298;        /* texto tenue, íconos apagados */
  --dj-borde: #dcdfe2;
  --dj-boton: #23272b;          /* botón principal: tinta */
  --dj-sobre-boton: #ffffff;
  --dj-enlace: #2563c9;         /* enlaces y foco */
  --dj-alerta: #d9480f;         /* se acabó el tiempo, últimos 10 s */
  --dj-sombra: 0 1px 0 #dcdfe2, 0 10px 24px -14px rgba(35, 39, 43, 0.35);
  --dj-sombra-alta: 0 -14px 40px -12px rgba(0, 0, 0, 0.35);
  --dj-velo: rgba(35, 39, 43, 0.35);
  --dj-logo: #23272b;

  /* Plumones (categorías) */
  --dj-m-animales: #d9480f;
  --dj-m-comida: #c2255c;
  --dj-m-objetos: #1971c2;
  --dj-m-acciones: #2b8a3e;
  --dj-m-lugares: #0c8599;
  --dj-m-oficios: #7048e8;
  --dj-m-peliculas: #a8590a;
  --dj-m-dichos: #495057;
  /* Todas las categorías propias y compartidas (Etapa 3): uva. Se distinguen por nombre e ícono. */
  --dj-m-propia: #9c36b5;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --dj-papel: #1d2421;
    --dj-cuadricula: #26302c;
    --dj-hoja: #252e2a;
    --dj-tinta: #eef1ec;
    --dj-tinta-2: #b4bdb7;
    --dj-tinta-3: #86908a;
    --dj-borde: #36423d;
    --dj-boton: #eef1ec;
    --dj-sobre-boton: #1d2421;
    --dj-enlace: #8fb8ff;
    --dj-alerta: #ff8a50;
    --dj-sombra: 0 1px 0 #36423d, 0 10px 24px -14px rgba(0, 0, 0, 0.6);
    --dj-sombra-alta: 0 -14px 40px -12px rgba(0, 0, 0, 0.6);
    --dj-velo: rgba(0, 0, 0, 0.5);
    --dj-logo: #eef1ec;

    --dj-m-animales: #ff8a50;
    --dj-m-comida: #f783ac;
    --dj-m-objetos: #74b6ff;
    --dj-m-acciones: #69db7c;
    --dj-m-lugares: #4fd6e6;
    --dj-m-oficios: #b197fc;
    --dj-m-peliculas: #f0b45a;
    --dj-m-dichos: #ced4da;
    --dj-m-propia: #e599f7;
  }
}

/* Fondo de cuaderno cuadriculado, para la portada y la app. */
.dj-cuaderno {
  background-color: var(--dj-papel);
  background-image:
    linear-gradient(var(--dj-cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--dj-cuadricula) 1px, transparent 1px);
  background-size: 22px 22px;
}