/* D-UI-MARCO — fichas de diseño de la interfaz nueva.
   Primer ladrillo del sistema: parte de las variables de combat_exp/styles.css (:root).
   Toda pieza nueva lee de aquí; no se escriben colores ni medidas sueltas en las pantallas. */

:root {
  /* Superficies, de más oscura a más clara */
  --ui-fondo-0: #07090e;
  --ui-fondo-1: #0a0d14;
  --ui-fondo-2: #10141d;
  --ui-fondo-3: #161b26;
  --ui-fondo-4: #1d2330;

  /* Líneas */
  --ui-linea: #2a3142;
  --ui-linea-suave: #1d2330;

  /* Tinta */
  --ui-tinta-0: #efe9d7;
  --ui-tinta-1: #c8c1ac;
  --ui-tinta-2: #8d8773;
  --ui-tinta-3: #5a5645;

  /* Acento (oro apagado) */
  --ui-acento: #c8a860;
  --ui-acento-suave: #a08840;
  --ui-acento-brillo: rgba(200, 168, 96, 0.35);

  /* Estados */
  --ui-aviso: #c43c3c;
  --ui-aviso-tinta: #fff1f1;

  /* Tipografía (la regla de emoji de .cursorrules sigue vigente: toda familia acaba en --rpg-emoji-stack) */
  --ui-fuente-titulo: "Cinzel", Georgia, "Times New Roman", var(--rpg-emoji-stack, "Segoe UI Emoji"), serif;
  --ui-fuente-texto: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, var(--rpg-emoji-stack, "Segoe UI Emoji"), sans-serif;
  --ui-letra-xs: 11px;
  --ui-letra-s: 12px;
  --ui-letra-m: 14px;
  --ui-letra-l: 16px;

  /* Espaciado y radios */
  --ui-esp-1: 4px;
  --ui-esp-2: 8px;
  --ui-esp-3: 12px;
  --ui-esp-4: 16px;
  --ui-radio-s: 4px;
  --ui-radio-m: 8px;

  /* Capas con nombre (dentro del marco) */
  --ui-capa-escenario: 1;
  --ui-capa-chat: 2;
  --ui-capa-menu: 3;

  /* Medidas del marco (D-UI-M-8), a 1920×1080 */
  --ui-menu-abierto: 264px;
  --ui-menu-retraido: 76px;
  --ui-chat-alto: 232px;
  --ui-menu-ancho: var(--ui-menu-abierto);

  --ui-transicion: 160ms ease-out;
}

/* D-UI-M-8, a 1366×768 */
@media (max-width: 1500px), (max-height: 860px) {
  :root {
    --ui-menu-abierto: 220px;
    --ui-menu-retraido: 64px;
    --ui-chat-alto: 168px;
  }
}

body.ui-menu-retraido {
  --ui-menu-ancho: var(--ui-menu-retraido);
}