/**
 * global-tokens.css — Variables CSS comunes para todo el portal DOFUS Touch
 * Importar en cada subpágina: @import url('../assets/css/global-tokens.css');
 * O enlazar con: <link rel="stylesheet" href="../assets/css/global-tokens.css">
 */

:root {
  /* ── Colores base ─────────────────────────────────── */
  --dark-bg:        #0b1320;
  --panel-bg:       #152238;
  --panel-bg-alt:   #111e33;
  --border-subtle:  rgba(70, 92, 122, 0.45);
  --border-gold:    rgba(240, 210, 143, 0.30);

  /* ── Dorado (unificado) ───────────────────────────── */
  --gold:           #f0d28f;   /* dorado estándar del portal */
  --gold-hover:     #ffd700;
  --gold-dim:       #c9a55a;

  /* ── Texto ────────────────────────────────────────── */
  --text-light:     #e0e0e0;
  --text-muted:     #8f9aad;
  --text-bright:    #fff2c8;

  /* ── Elementos (daño) ─────────────────────────────── */
  --elem-tierra:    #b5914a;
  --elem-fuego:     #d4562a;
  --elem-agua:      #4aabcc;
  --elem-aire:      #7ecf6a;
  --elem-neutral:   #a0a0b0;

  /* ── Radios ───────────────────────────────────────── */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-pill:    999px;

  /* ── Sombras ──────────────────────────────────────── */
  --shadow-card:    0 18px 38px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 24px 48px rgba(0, 0, 0, 0.42);
  --shadow-panel:   0 4px 20px rgba(0, 0, 0, 0.35);

  /* ── Tipografía ───────────────────────────────────── */
  --font-body:      'Inter', sans-serif;
  --font-title:     'Cinzel', serif;

  /* ── Transiciones ─────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-med:  0.25s ease;
}