/* ═══════════════════════════════════════════════════════════════════════
   THEME: URBAN NOIR
   ─────────────────
   Solo tokens visuales. Reemplazar este fichero para cambiar la estética.
   core.css referencia todo vía var(--token).
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ── Paleta ── */
  --bg:             #080808;
  --bg-elevated:    #111111;
  --bg-card:        #0d0d0d;
  --text:           #f0ece4;
  --text-dim:       #6b6560;
  --text-mid:       #9a938b;
  --accent:         #e8ff47;
  --accent-dim:     #c4d93c;
  --border:         #1a1a1a;
  --gradient-ov:    rgba(0, 0, 0, 0.85);
  --success-bg:     rgba(232, 255, 71, 0.05);

  /* ── Tipografía ── */
  --font-d:  'Bebas Neue', sans-serif;
  --font-m:  'Space Mono', monospace;
  --font-b:  'Instrument Sans', sans-serif;

  /* ── Imágenes ── */
  --img-filter:       grayscale(0.6) contrast(1.05);
  --img-hover:        grayscale(0) contrast(1.1);
  --img-hover-scale:  1.06;
  --img-about:        grayscale(0.4) contrast(1.1);
  --img-gallery:      grayscale(0.15);
  --hero-opacity:     0.25;
  --hero-filter:      grayscale(0.3) contrast(1.1);

  /* ── Efectos ── */
  --grain-opacity:    0.35;
  --nav-blend:        difference;
  --scrollbar-w:      4px;
  --radius:           0px;

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.25, 0.8, 0.25, 1);
  --hero-dur:   1.2s;
  --card-dur:   0.7s;
  --page-dur:   0.5s;

  /* ── Layout ── */
  --card-aspect:  4 / 5;
  --grid-min:     340px;
  --grid-gap:     3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME: LIGHT MODE
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --bg:             #f5f3f0;
  --bg-elevated:    #ffffff;
  --bg-card:        #eae8e4;
  --text:           #1a1a1a;
  --text-dim:       #999;
  --text-mid:       #555;
  --accent:         #1a1a1a;
  --accent-dim:     #333;
  --border:         #ddd;
  --gradient-ov:    rgba(255, 255, 255, 0.85);
  --success-bg:     rgba(0, 0, 0, 0.03);

  --img-filter:       grayscale(0) contrast(1);
  --img-hover:        grayscale(0) contrast(1.05);
  --img-about:        grayscale(0) contrast(1);
  --img-gallery:      grayscale(0);
  --hero-opacity:     0.35;
  --hero-filter:      grayscale(0.1) contrast(1);

  --grain-opacity:    0.08;
  --nav-blend:        normal;
}

/* ── Selección de texto ── */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: var(--radius); }

/* ── Grain overlay ── */
.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC43NSIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMDgiLz48L3N2Zz4=");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
}