/* 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);
  --ui-acento-luz: #f3dfa0;

  /* Rareza de objeto (D-RAREZA-UNICA): una sola fuente, RAREZAS en content/objetos.json. */
  /* RAREZAS:INICIO — GENERADO por scripts/build-content.mjs desde content/objetos.json (RAREZAS). No editar a mano. */
  --ui-rareza-comun: #e8e8e8;
  --ui-rareza-raro: #0070dd;
  --ui-rareza-excepcional: #f2b300;
  --ui-rareza-epico: #a335ee;
  --ui-rareza-legendario: #ff8000;
  --ui-rareza-set: #1eff00;
  --ui-rareza-unico: #ef2b2b;
  --ui-rareza-fino: var(--ui-rareza-comun);
  --ui-rareza-mitico: var(--ui-rareza-epico);
  --ui-rareza-fabled: var(--ui-rareza-unico);
  --ui-rareza-artefacto: var(--ui-rareza-unico);
  --ui-rareza-quest: var(--ui-rareza-comun);
  --ui-rareza-common: var(--ui-rareza-comun);
  --ui-rareza-uncommon: var(--ui-rareza-raro);
  --ui-rareza-rare: var(--ui-rareza-raro);
  --ui-rareza-epic: var(--ui-rareza-epico);
  --ui-rareza-legendary: var(--ui-rareza-legendario);
  --ui-rareza-unique: var(--ui-rareza-unico);
  /* RAREZAS:FIN */

  /* Barras */
  --ui-vida: #c43c3c;
  --ui-mana: #5fa0e8;
  --ui-xp: #c8a860;
  --ui-mejora: #5fb86b;

  /* Color de la clase del personaje en escena: lo pone quien pinta la pieza (getClassColorForName). */
  --ui-clase: #5fa0e8;

  /* 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)
     D-LETRA D-LT-1 (claude/_CLAUDE_D_LETRA_MESA.md): cambiar la letra del juego = cambiar la PRIMERA familia de una de estas
     tres líneas (y, si es nueva, darla de alta en fuentes.css con su OFL). Todo lo demás lee de aquí:
       --ui-fuente-texto   todo el texto (la regla * de v2-theme_v0.8.9.css y --rpg-font-body)
       --ui-fuente-titulo  títulos, rótulos, menú y botones principales (Cinzel normal, con minúsculas; --rpg-font-ui)
       --ui-fuente-logo    sólo el logo y los títulos grandes de pantalla (Cinzel Decorative: sólo capitales) */
  --ui-fuente-titulo: "Cinzel", Georgia, "Times New Roman", var(--rpg-emoji-stack, "Segoe UI Emoji"), serif;
  --ui-fuente-logo: "Cinzel Decorative", "Cinzel", Georgia, var(--rpg-emoji-stack, "Segoe UI Emoji"), serif;
  --ui-fuente-texto: "Nunito", 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);
}