:root {
  /* ============ COLORES BASE ============ */
  --color-bg: #1e1e2e;
  --color-bg-secondary: #2a2a3a;
  --color-text: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-primary: #6e56cf;
  --color-primary-light: #8a75d9;
  --color-primary-rgb: 110, 86, 207;
  --color-border: #3a3a4a;
  --color-heading: #ffffff;
  
  /* ============ ELEMENTOS ============ */
  --color-pyro: rgb(156, 96, 56);
  --color-hydro: rgb(56, 147, 156);
  --color-anemo: rgb(56, 156, 106);
  --color-electro: rgb(107, 56, 156);
  --color-dendro: rgb(126, 156, 56);
  --color-cryo: rgb(56, 152, 156);
  --color-geo: rgb(156, 134, 56);
  
   /* Colores de rareza para artefactos */
   --color-rarity-3: #5987ad;  /* Azul para 3 estrellas */
   --color-rarity-4: #A45CFF;  /* Púrpura para 4 estrellas */
   --color-rarity-5: #FFAC33;  /* Dorado para 5 estrellas */
  
  /* ============ RAREZAS ============ */
  --color-3star: #5987ad;
  --color-4star: #A45CFF;
  --color-5star: #FFAC33;
   /* ============ GOLD ============ */
  --text-gold: #ffd780;

  
  /* ============ TAMAÑOS DE TEXTO ============ */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  
  /* ============ ESPACIADO ============ */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  
  /* ============ BORDES ============ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* ============ SOMBRAS ============ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
  --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  
  /* ============ TRANSICIONES ============ */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ============ Z-INDEX ============ */
  --z-tooltip: 10;
  --z-modal: 20;
  --z-notification: 30;
}

/* ==================== */
/* 1. DEFINICIÓN DE FUENTE */
/* ==================== */
@font-face {
  font-family: 'HYWenHei-85W';
  src: url('../../fonts/zh-cn.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


body {
  font-family: 'HYWenHei-85W';
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}
/* ==================== */
/* 2. VARIABLES TIPOGRÁFICAS */
/* ==================== */
:root {
  --font-main: 'HYWenHei-85W';  /* Usamos HYWenHei-85W como la fuente principal */
  --font-headings: 'HYWenHei-85W';

  /* Escala tipográfica */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
}

/* ==================== */
/* 3. ESTILOS BASE */
/* ==================== */
body {
  font-family: var(--font-main); /* Aplica la fuente principal */
  font-size: var(--text-base);
  font-weight: 200;  /* Peso normal */
  color: rgb(255, 255, 255);
  background-color: var(--color-bg);
}


/* ==================== */
/* 4. ENCABEZADOS */
/* ==================== */
h1, h2, h3 {
  font-family: var(--font-headings);  /* Usamos HYWenHei-85W para los encabezados */
  margin-bottom: 0.75em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }

/* ==================== */
/* 5. COMPONENTES */
/* ==================== */
.character-name {
  font-family: var(--font-main); /* Usar HYWenHei-85W */
  font-size: var(--text-3xl);
  letter-spacing: 1px;
}

.ability-description {
  font-family: var(--font-main); /* Usar HYWenHei-85W */
  font-size: var(--text-sm);
  line-height: 1.8;
}