:root {
  /* === BASE MEDIEVAL (Pergamino + Cuero) === */
  --color-paper-light: #f7e7c2; /* Pergamino claro */
  --color-paper: #e8d3a4; /* Pergamino clásico */
  --color-paper-dark: #d6bb89; /* Pergamino oscuro */
  --color-parchment-burn: #b89463; /* Borde quemado */
  --color-parchment-edge: #8a6a44; /* Oscuro para bordes */

  --color-leather-light: #b88a55; /* Cuero claro */
  --color-leather: #8b5a2b; /* Cuero clásico */
  --color-leather-dark: #5d3b1c; /* Cuero oscuro (UI panels) */
  --color-wood: #3b2a1a; /* Madera vieja */
  --color-wood-dark: #24180e; /* Madera pesada */

  /* === PALETA PRINCIPAL === */
  --color-primary: #600707; /* Rojo oscuro medieval */
  --color-primary-dark: #3e0404; /* Más sangre/oscuro */
  --color-primary-light: #7d0b0b; /* Highlight */

  --color-secondary: #ffe6ae; /* Cremita medieval */
  --color-secondary-dark: #e3c98c;

  --color-accent-gold: #d4af37; /* Oro real */
  --color-accent-gold-dark: #a88613;
  --color-accent-silver: #c0c0c0; /* Plata */
  --color-accent-bronze: #8c6239; /* Bronce medieval */

  --color-green: #148814; /* Verde clásico */
  --color-green-dark: #0f5e0f;
  --color-green-light: #1db81d;

  --color-blue: #2b4f88; /* Azul templario */
  --color-blue-dark: #1d3557;
  --color-blue-light: #457b9d;

  --color-purple: #6b3fa0; /* Arcano / magia */
  --color-purple-dark: #4c2a78;

  /* === ALERTAS / FEEDBACK === */
  --color-danger: #7a0f0f; /* Mal, daño, error */
  --color-warning: #c27724; /* Advertencia medieval */
  --color-success: #1e7a20; /* Éxito */
  --color-info: #345a8d; /* Información */

  /* === SOMBRAS Y HIGHLIGHTS === */
  --shadow-strong: rgba(0, 0, 0, 0.6);
  --shadow-medium: rgba(0, 0, 0, 0.35);
  --shadow-light: rgba(0, 0, 0, 0.15);

  --highlight-glow: rgba(255, 230, 160, 0.4); /* brillo dorado */
  --highlight-gold: rgba(212, 175, 55, 0.55);

  /* === RAREZA ITEMS === */
  --rarity-common: #b2b2b2;
  --rarity-uncommon: #3ea63e;
  --rarity-rare: #2e6ecb;
  --rarity-epic: #7a2ddd;
  --rarity-legendary: #d4af37; /* oro */
  --rarity-mythic: #ff5ef6; /* fucsia mágico */

  /* === RESOURCES COLORS === */
  --color-resource-gold: #d4af37;
  --color-resource-wood: #8b5a2b;
  --color-resource-stone: #8c8c8c;
  --color-resource-iron: #525252;
  --color-resource-food: #a83422;
  --color-resource-population: #2d8a3a;

  /* === UI MODULAR TONES === */
  --ui-border: #3b2a1a;
  --ui-border-strong: #24180e;
  --ui-panel: #f1e4c4;
  --ui-panel-dark: #d8c092;
  --ui-active: #7d0b0b;
  --ui-hover: #a88613;
  --ui-disabled: #b1a58a;
}

@font-face {
  font-family: "MedievalSharp";
  src: url("/fonts/MedievalSharp.ttf") format("truetype");
}

@font-face {
  font-family: "Uncial Antiqua";
  src: url("/fonts/UncialAntiqua.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond.ttf") format("truetype");
  font-display: swap;
}

body {
  background-color: var(--color-primary);
  min-height: 100vh;
}

* {
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}