/* ==========================================================================
   Cinzel — display da Vigília
   --------------------------------------------------------------------------
   Antes deste bloco a fonte era PEDIDA em 24 regras e em 30 elementos
   (`font-cinzel`) mas NUNCA era carregada: não havia @font-face nem link
   externo, então todo título caía silenciosamente no Georgia do sistema.

   Embutida localmente porque o cliente é servido offline (127.0.0.1) e não
   pode depender de fonts.gstatic.com. O woff2 é o subset latin + latin-ext.
   ========================================================================== */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/8vIJ7ww63mVu7gt79mT7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/8vIJ7ww63mVu7gt7-GT7LEc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ==========================================================================
     Vigília das Cinzas — tokens de design
     --------------------------------------------------------------------------
     Antes destes tokens o cliente tinha 275 cores hexadecimais soltas em 517
     usos, sendo 20 delas defaults do Tailwind (#9ca3af, #f59e0b, #fbbf24...)
     que entraram junto com algum componente e nunca foram decididas.

     A escala abaixo não inventa estética: cada degrau sai de um valor que JÁ
     era usado e já era o mais frequente naquele papel. Ver `docs/arpg/
     tokens-visuais.md` para a tabela de origem de cada um.

     Regra única: nenhum hex literal em regra de estilo. Se falta um tom, entra
     aqui com nome de papel, não espalhado no arquivo.
     ========================================================================== */

  /* --- Superfícies (do mais profundo ao mais elevado) ---------------------- */
  --vg-bg-abyss: #0b0d12;        /* fundo da cena, além do painel */
  --vg-bg-app: #0f0f18;          /* fundo do app */
  --vg-bg-panel: #16151c;        /* painel, janela, barra */
  --vg-bg-raised: #211c1b;       /* card, superfície sobre painel */
  --vg-bg-well: #0b0d12;         /* poço, slot, campo afundado */
  --vg-bg-hover: #272738;        /* hover de linha/aba */
  --vg-bg-selected: #37374e;     /* seleção, item ativo */
  --vg-bg-scrim: rgba(0, 0, 0, 0.72); /* véu sob modal */

  /* --- Bordas ------------------------------------------------------------- */
  --vg-border-strong: #806241;   /* moldura principal, divisória visível */
  --vg-border-soft: #3b3021;     /* borda discreta, separador interno */
  --vg-border-inner: #51412d;    /* borda dentro de painel já emoldurado */
  --vg-border-gold: #9f7545;     /* borda de destaque dourado */
  --vg-border-ink: #17151a;      /* contorno quase preto */

  /* --- Ouro (a cor de identidade) ----------------------------------------- */
  --vg-gold-deep: #806241;       /* ouro em repouso, sem brilho */
  --vg-gold: #d6a452;            /* ouro padrão: números, ícones, destaque */
  --vg-gold-bright: #e8c07a;     /* ouro sob hover, mais claro */
  --vg-gold-pale: #f4d694;       /* ouro de título e texto nobre */
  --vg-gold-dim: #b89a6b;        /* ouro apagado, metadado */
  --vg-gold-warm: #e8a04d;       /* ouro quente, ênfase em valor */
  --vg-gold-tint: rgba(214, 164, 82, 0.14);  /* preenchimento dourado sutil */
  --vg-gold-rule: rgba(214, 164, 82, 0.28);  /* filete/régua dourada */

  /* --- Texto -------------------------------------------------------------- */
  --vg-text-bright: #f4d694;     /* título, valor em destaque */
  --vg-text: #cfc6bb;            /* corpo de texto padrão */
  --vg-text-soft: #a99d8c;       /* secundário, descrição */
  --vg-text-muted: #9a8f80;      /* terciário legível (3.95→6.0 contra painel) */
  --vg-text-ghost: #4c4b55;      /* desabilitado, placeholder */
  --vg-text-inverse: #16151c;    /* texto sobre ouro claro (CTA) */

  /* --- Acento por classe (identidade de vocação) -------------------------- */
  --vg-class-knight: #e45d50;
  --vg-class-paladin: #e6c15d;
  --vg-class-sorcerer: #b77af1;
  --vg-class-druid: #69a9e8;

  /* --- Semântica de estado ------------------------------------------------ */
  --vg-ok: #8fdc9b;
  --vg-ok-bg: #273933;
  --vg-warn: #f59e0b;
  --vg-danger: #e45d50;
  --vg-danger-bg: #392615;
  --vg-info: #69a9e8;
  --vg-neutral: #6b7280;

  /* --- Raridade (mesma ordem de progressão) ------------------------------- */
  --vg-rarity-common: #6b7280;
  --vg-rarity-uncommon: #8fdc9b;
  --vg-rarity-rare: #69a9e8;
  --vg-rarity-epic: #b77af1;
  --vg-rarity-legendary: #d6a452;

  /* --- Bisel: a técnica que faz superfície parecer sólida ------------------
     Cada painel leva luz na aresta de cima e sombra embaixo. Sem isso a
     interface fica plana mesmo com a paleta certa.
     ------------------------------------------------------------------------ */
  --vg-bevel-light: inset 0 1px 0 rgba(244, 214, 148, 0.10);
  --vg-bevel-slot: inset 0 0 0 1px var(--vg-border-strong);
  --vg-bevel-well: inset 0 1px 2px rgba(0, 0, 0, 0.70);
  --vg-bevel-track: inset 0 0 0 1px var(--vg-border-ink);

  /* --- Elevação ----------------------------------------------------------- */
  --vg-shadow-panel: var(--vg-bevel-light), 0 2px 8px rgba(0, 0, 0, 0.45);
  --vg-shadow-card: var(--vg-bevel-light), 0 8px 24px rgba(0, 0, 0, 0.50);
  --vg-shadow-modal: var(--vg-bevel-light), 0 24px 70px -30px #000;
  --vg-shadow-tooltip: inset 0 0 0 1px var(--vg-border-inner), 0 8px 22px rgba(0, 0, 0, 0.70);
  --vg-shadow-focus: inset 0 0 0 1px var(--vg-gold);

  /* --- Recurso de classe (barra) ------------------------------------------
     A barra e o `accent` do cartão eram duas cores diferentes para a MESMA
     classe (#ef4444 na barra, #e45d50 no accent). Agora a barra herda o accent:
     uma cor por vocação, em qualquer superfície.
     ------------------------------------------------------------------------ */
  --vg-resource-fury: var(--vg-class-knight);
  --vg-resource-arcane: var(--vg-class-sorcerer);
  --vg-resource-mana: var(--vg-class-druid);
  --vg-resource-wrath: var(--vg-class-paladin);

  /* --- Status ------------------------------------------------------------- */
  --vg-hp-from: #8f1f17;
  --vg-hp-to: #c0392b;
  --vg-xp-from: #583b25;
  --vg-xp-to: #947341;
  --vg-online: #22c55e;
  --vg-online-glow: rgba(34, 197, 94, 0.55);

  /* --- Preenchimentos saturados (barra de progresso, selo, destaque) -------
     Estes nasceram fora de papel na primeira varredura: apareciam como
     `background` e não existia degrau de fundo claro o bastante. São o
     preenchimento de um elemento, não a superfície de um painel — por isso
     vivem num grupo próprio, e não em --vg-bg-*.
     ------------------------------------------------------------------------ */
  --vg-fill-amber-from: #9c4507;   /* base do gradiente (escurecido p/ AA com texto branco) */
  --vg-fill-amber-to: #ad5c09;     /* topo do gradiente (escurecido p/ AA) */
  --vg-fill-gold: #e8a04d;         /* realce radial dourado */
  --vg-fill-danger-from: #7d1717;
  --vg-fill-danger-to: #dc2626;
  --vg-fill-neutral: #22c55e;      /* verde de "conectado/ok" em barra */

  /* --- Aviso e perigo em repouso ------------------------------------------ */
  --vg-warn-deep: #b45309;         /* âmbar escuro: texto e borda de alerta */
  --vg-danger-soft: #fca5a5;        /* vermelho de texto legível em fundo escuro */
  --vg-ok-soft: #d8ecc9;
  --vg-ok-line: #4a6b45;
  /* Branco quente: texto claro que não é ouro nem cinza — é a variante mais
     luminosa do corpo de texto, usada em cartão destacado. */
  --vg-text-warm: #e9ddc5;

  --vg-radius-sm: 4px;
  --vg-radius: 6px;
  --vg-radius-lg: 9px;
  --vg-radius-pill: 999px;

  /* --- Tipografia ---------------------------------------------------------
     Um só lugar decide a fonte. Título em Cinzel (display), corpo em sans do
     sistema por enquanto, número em mono para alinhar tabela e barra.
     ------------------------------------------------------------------------ */
  --vg-font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --vg-font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vg-font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace;

  --vg-fs-3xs: 9px;
  --vg-fs-2xs: 10px;
  --vg-fs-xs: 11px;
  --vg-fs-sm: 12px;
  --vg-fs-base: 13px;
  --vg-fs-lg: 15px;
  --vg-fs-xl: 18px;
  --vg-fs-2xl: 22px;

  /* --- Espaçamento (escala 4) --------------------------------------------- */
  --vg-space-1: 4px;
  --vg-space-2: 8px;
  --vg-space-3: 12px;
  --vg-space-4: 16px;
  --vg-space-5: 20px;
  --vg-space-6: 24px;
  --vg-space-8: 32px;
}