/* ═══════════════════════════════════════════════════════════════
   TEMA: MURO
   Solo tokens visuales. Cambiar este fichero cambia la estética;
   core.css no lleva colores ni tipografías escritas a mano.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ── Color ── */
  --bg:          #fcfcfb;
  --bg-soft:     #f4f4f2;
  --card:        #ffffff;
  --ink:         #111111;
  --ink-soft:    #444444;
  --dim:         #7a7a7a;
  --line:        #e5e5e3;
  --line-soft:   #ececea;
  --bad:         #a3242c;
  --ok:          #2f6b3f;
  --shade:       rgba(0,0,0,0.45);
  --on-shade:    #ffffff;

  /* ── Tipografía ── */
  --font: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* ── Forma ── */
  --r-img:    16px;
  --r-card:   20px;
  --r-pill:   999px;

  /* ── Ritmo ── */
  --pad:      32px;
  --gap:      16px;
  --col:      4;      /* columnas del muro en escritorio */

  /* ── Movimiento ── */
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --dur:  .45s;

  /* ── Imágenes ── */
  --img-filter:       none;
  --img-hover-scale:  1.03;
}

[data-theme="dark"] {
  --bg:        #101010;
  --bg-soft:   #171717;
  --card:      #161616;
  --ink:       #f2f2f0;
  --ink-soft:  #c9c9c5;
  --dim:       #8d8d88;
  --line:      #262625;
  --line-soft: #202020;
  --shade:     rgba(0,0,0,0.55);
}