/* Design system do Exori Idle — os tokens, e só eles. Fonte única de verdade da aparência.
   Quem consome: tema.css (que pinta o jogo) e design-system/index.html (que mostra o sistema).

   Paleta MEDIDA NA FOTO de referência (24/09/2026; o azul-marinho tentado antes foi recusado: "esse azul
   não ficou bom"): painel quase preto e frio (#0d1013, o cartão #0d1316, o chat #080c12), TRANSLÚCIDO
   sobre o cenário (--panel), fio de ouro vivo (#a8894f no painel, #e4bc6c no cartão e no botão) para o
   dourado contrastar bem, e botão em madeira (#2e2218) como na foto. O que o dono quer é "uma certa
   transparência e uma coisa moderna": painel deixa ver o cenário embaçado atrás, fio fino, canto suave.

   Regras que os tokens carregam:
   · todo painel, cartão, slot e campo é --bg-100 com fio de 1px --gold-line;
   · ouro fala (título, rótulo de seção, valor em ouro), --ink relata, --ink-muted é rótulo;
   · vida e mana são os únicos preenchimentos saturados da tela;
   · cor de elemento é MARCA (bolinha, barra), nunca cor de texto de rótulo. */

:root {
  /* --- chão: do mais fundo ao mais claro, sempre azul-marinho --- */
  --bg-000: #060a0d;   /* atrás da cena, poço de item, corpo do log */
  --bg-100: #0d1013;   /* corpo do painel (opaco; o translúcido é --panel) */
  --bg-200: #131719;   /* linha dentro do painel, campo, cartão */
  --bg-300: #1b2024;   /* linha e cartão sob o mouse; fita de abas */
  --panel: rgba(12, 15, 18, .70);      /* painel translúcido: o cenário aparece embaçado atrás */
  --panel-solid: rgba(13, 19, 22, .92); /* cartão dentro do painel: um pouco mais fechado */
  --panel-blur: 10px;
  --wood:      #2e2218; /* botão: madeira escura, a única superfície quente (medida na foto) */
  --wood-hover:#3b2d1c;

  /* --- fio e ouro --- */
  --gold-line: #a8894f;        /* o fio de 1px do painel */
  --gold-line-bright: #e4bc6c; /* o fio do cartão, do botão, dos losangos e de tudo sob o mouse */
  --gold: #f2c45a;             /* título, rótulo de seção, valor em ouro, aba ativa */
  --gold-bright: #ffe98c;      /* realce da marca, sublinhado da aba ativa, foco */
  --gold-soft: #f0c97b;        /* linha de apoio e rótulo de botão na madeira */

  /* --- texto --- */
  --ink: #e8eaea;        /* valor, nome, linha de log */
  --ink-muted: #9aa3a6;  /* rótulo, nível, aba inativa, hora no log */
  --on-bright: #060a0d;  /* texto sobre vida, ouro e qualquer preenchimento claro */

  /* --- vida, mana e sinais --- */
  --health: #03d039; --mana: #0b65e2; --mana-text: #6aa6ff;   /* medidos na foto */
  --positive: #3ddc6a;  /* ganho e evento concluído no log */
  --negative: #ff6b5a;  /* perda, dano levado, morte */
  --danger: #c0392b;    /* barra de vida do inimigo na cena */

  /* --- papéis na party --- */
  --role-tank: #4e3918; --role-tank-text: #f1ecc8;
  --role-dps: #78271b; --role-dps-text: #fbd99b;
  --role-arcane: #351d53; --role-arcane-text: #e9dcf6;
  --role-sup: #1a491e; --role-sup-text: #e9f0e6;

  /* --- vocações: a sigla no cartão (EK, RP, MS, ED) --- */
  --class-ek: #f1ecc8; --class-rp: #4fd35a; --class-ms: #5aa0ff; --class-ed: #7ee88a;   /* EK é pergaminho, não ouro: ouro só onde fala */

  /* --- elementos: marca, nunca rótulo --- */
  --elem-fire: #ff8a3d; --elem-ice: #6cc7ff; --elem-energy: #c58bff; --elem-earth: #7dd05a;
  --elem-physical: #c9ccc7; --elem-holy: #ffe680; --elem-death: #8a8fb8;
  --torch: #ff9a2e;     /* brilho de tocha na cena e girador; nunca texto */

  /* --- tipografia. Cinzel, Alegreya e IBM Plex Mono vêm do Google Fonts quando há rede (link no
         index.html); sem rede, ou por file:// offline, o jogo cai em Georgia/Times/Consolas. --- */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-serif: 'Alegreya', Georgia, serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;

  /* --- espaço: grade de 4px, para pixel art nunca cair em meio pixel --- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* --- tamanhos que a arte dita --- */
  --sprite: 32px; --portrait: 64px; --slot: 56px; --bar-h: 12px; --control-h: 40px; --rail-w: 288px;

  /* --- raio: quase quadrado, porque a moldura é entalhada --- */
  --radius-0: 0px; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px;

  /* --- profundidade --- */
  --frame: 0 0 0 1px #a8894f, 0 8px 24px rgba(0, 0, 0, .55);
  --frame-inner: inset 0 0 0 1px rgba(0, 0, 0, .6);
  --well: 0 0 0 1px #a8894f, inset 0 2px 6px rgba(0, 0, 0, .8);
  --glow-gold: 0 0 0 1px #ffe98c, 0 0 16px rgba(255, 233, 140, .35);
  --overlay: 0 16px 48px rgba(0, 0, 0, .8), 0 0 0 1px #e4bc6c;
}