/* Tema compartilhado do F.A.I.L.: fontes, tokens de cor e espaçamento, e padrões de acessibilidade.
   Cada página carrega este arquivo antes do próprio <style>, que pode especializar o que precisar. */

/* ---- fontes (arquivos locais: o app funciona offline; licenças OFL em comum/fontes) ---- */
@font-face {
  font-family: "Cinzel";
  src: url("fontes/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  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";
  src: url("fontes/cinzel-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("fontes/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Inter";
  src: url("fontes/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- tokens ---- */
:root {
  color-scheme: dark;
  --fundo: #100f13;
  --superficie: #1b191f;
  --campo: #131217;
  --borda: #38313c;
  --texto: #eee7dc;
  --texto-2: #b4aab9;        /* 7,8:1 sobre a superfície */
  --texto-3: #8f8696;        /* 4,6:1: textos apagados e placeholders (passa no WCAG AA) */
  --ouro: #dbb778;
  --sangue: #a63648;
  --vida: #6fcf97;
  --perigo: #e48a8a;
  --raio: 12px;
  --sombra: 0 12px 40px #0006;
  --titulo: "Cinzel", Georgia, "Times New Roman", serif;
  --corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-titulo: clamp(1.45rem, 1rem + 1.8vw, 2.1rem);
  --barra-inferior: 0px;      /* altura da barra inferior do celular (comum/menu.js ajusta) */
  font-family: var(--corpo);
  font-optical-sizing: auto;
}

body {
  font-family: var(--corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* espaço para a barra inferior fixa do celular não cobrir o fim da página */
  padding-bottom: var(--barra-inferior);
}

h1, h2, h3 { font-family: var(--titulo); letter-spacing: .02em; }
::placeholder { color: var(--texto-3); opacity: 1; }
::selection { background: #a6364866; color: #fff; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

/* barras de rolagem discretas no tema escuro */
* { scrollbar-width: thin; scrollbar-color: #4b4150 transparent; }

/* transição suave entre as páginas do app (navegadores sem suporte simplesmente ignoram) */
@view-transition { navigation: auto; }

/* quem pede menos movimento no sistema não recebe animações */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* ---- componentes compartilhados ---- */
.divisor { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--ouro), transparent); opacity: .6; }

/* tabela que vira cartões no celular: cada <td> precisa de data-label com o nome da coluna */
@media (max-width: 720px) {
  .tabela-cartao, .tabela-cartao tbody, .tabela-cartao tr, .tabela-cartao td { display: block; width: 100%; }
  .tabela-cartao thead { display: none; }
  .tabela-cartao tr { padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; background: #15131a; }
  .tabela-cartao td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0 !important; padding: 4px 0 !important; text-align: right; }
  .tabela-cartao td::before { content: attr(data-label); color: var(--texto-2); font-size: 12px; text-align: left; }
  .tabela-cartao td[data-label=""]::before { content: none; }
  .tabela-cartao td.acoes { justify-content: flex-end; flex-wrap: wrap; padding-top: 10px !important; }
}