/* ══ wallhunt ds v1 · tokens + base ══════════════════════════════
   Variables semánticas, motion tokens, reset y tipografía global.
   Regla del repo: nada de alias ni capas de compatibilidad — si un
   token cambia, se actualizan sus usos en el mismo commit. */

:root {
  --bg: #0e0e11;
  --surface: #16161a;
  --surface-2: #232328;
  --border: #232328;
  --border-strong: #3a3a42;
  --text: #ececf1;
  --text-muted: #8b8b96;
  --accent: #6d5ae6;
  --accent-hover: #7e6cf2;
  --success: #3ecf8e;
  --danger: #e5566d;
  --warning: #e3b341;
  --ratio-uw: #8d7cf0;     /* 21:9 */
  --ratio-wqxga: #45b3a2;  /* 16:10 */
  --ratio-fhd: #cf8e63;    /* 16:9 */
  --shadow-pop: 0 12px 40px #000a;      /* popovers y menús */
  --shadow-modal: 0 30px 90px #000a;    /* cards de overlay */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
  --ease-snap: cubic-bezier(.2,.8,.25,1);
  --dur-fast: .12s;
  --dur-base: .18s;
  --radius: 10px;
  color-scheme: dark;
}

/* modo claro: el mismo sistema, neutros cálidos y semánticos más densos
   (los overlays sobre imágenes se quedan oscuros a propósito) */
:root[data-theme="light"] {
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #ececea;
  --border: #e2e2df;
  --border-strong: #c9c9c4;
  --text: #1c1c22;
  --text-muted: #70707a;
  --accent: #5b48d6;
  --accent-hover: #4a38c2;
  --success: #0f9d63;
  --danger: #d2314c;
  --warning: #a97a0a;
  --info: #3565cf;
  --ratio-uw: #7a68e0;
  --ratio-wqxga: #22907e;
  --ratio-fhd: #bb763f;
  --shadow-pop: 0 12px 40px #00000024;
  --shadow-modal: 0 30px 90px #00000030;
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--text);
  font-size: 13.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* datos duros siempre en mono: resoluciones, atajos, deltas, tamaños */
kbd, .meta .res, #box-res, .tl-delta, #d-prog, #crop-sz,
.crop-custom input, .adj-row b, .t-res { font-family: var(--font-mono); }