/* ===========================================================================
   BASE — tokens, tipografia e o esqueleto da página.

   ── Cor ───────────────────────────────────────────────────────────────────
   A paleta é a do kit da MTG (`Marca/LEIA-ME.md`): ocre #914521, marrom
   #4F352A, bege #EDCEB7. Duas adaptações, pelo mesmo motivo que o totem fez:

   1. **Ocre clareado no escuro.** O #914521 mede 2,6 de contraste sobre fundo
      escuro — não passa em texto. No tema escuro o acento é #C97A4C (5,4).
   2. **Superfície quase branca, não bege.** O bege da marca é lindo em peça
      impressa e cansa numa tela que fica oito horas aberta. Ele aparece como
      realce (linhas, fundos de cartão selecionado), não como papel.

   Todo token tem par claro/escuro. O tema segue o sistema e pode ser trocado
   no botão — a escolha fica no `localStorage`.

   ── Tipografia ────────────────────────────────────────────────────────────
   Libre Franklin em tudo. **Black Mango só no logotipo**: os algarismos dela
   são ilegíveis ("101" lê "IOI") e este aplicativo é feito de número — está
   documentado no LEIA-ME da marca e custou uma refação da Linha de Tabela.
   Números sempre com `tabular-nums`: coluna de valor que dança é coluna que
   se lê errado.
   =========================================================================== */

@font-face {
  font-family: 'Black Mango';
  src: url('../fontes/BlackMango-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('../fontes/LibreFranklin-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Marca */
  --ocre: #914521;
  --ocre-claro: #C97A4C;
  --marrom: #4F352A;
  --bege: #EDCEB7;

  /* Superfícies e tinta — tema claro */
  --papel: #FAF8F6;
  --cartao: #FFFFFF;
  --cartao-2: #F4F0EC;
  --tinta: #241A15;
  --tinta-2: #5C4C43;
  --tinta-3: #8A7A70;
  --linha: #E4DAD2;
  --linha-forte: #CFC0B4;

  --acento: var(--ocre);
  --acento-tinta: #FFFFFF;
  --acento-fraco: #F6E8DF;

  /* Estados. Cada um tem um fundo fraco para etiqueta. */
  --verde: #2F7D4F;      --verde-fraco: #E3F2E8;
  --ambar: #A9701A;      --ambar-fraco: #FBEEDA;
  --azul: #2A5F91;       --azul-fraco: #E4EEF7;
  --roxo: #6B4A8C;       --roxo-fraco: #EFE8F6;
  --vermelho: #A83232;   --vermelho-fraco: #FBE6E6;
  --cinza: #6E6259;      --cinza-fraco: #EEEAE6;

  --sombra: 0 1px 2px rgba(36, 26, 21, .06), 0 8px 24px rgba(36, 26, 21, .06);
  --sombra-alta: 0 8px 40px rgba(36, 26, 21, .18);
  --raio: 12px;
  --raio-p: 8px;

  --lateral: 244px;
  --topo: 58px;
  --rodape: 62px;      /* barra de navegação do celular */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #17110E;
    --cartao: #201814;
    --cartao-2: #2A201A;
    --tinta: #F3EAE3;
    --tinta-2: #C5B5A9;
    --tinta-3: #93837a;
    --linha: #33271F;
    --linha-forte: #4A392E;

    --acento: var(--ocre-claro);
    --acento-tinta: #1A120D;
    --acento-fraco: #35231A;

    --verde: #64C08A;      --verde-fraco: #1C3226;
    --ambar: #E0A94E;      --ambar-fraco: #362916;
    --azul: #74A9DA;       --azul-fraco: #182A3A;
    --roxo: #B08FD0;       --roxo-fraco: #2A2036;
    --vermelho: #E58080;   --vermelho-fraco: #38201F;
    --cinza: #A99C92;      --cinza-fraco: #2A2320;

    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --sombra-alta: 0 8px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --papel: #17110E;
  --cartao: #201814;
  --cartao-2: #2A201A;
  --tinta: #F3EAE3;
  --tinta-2: #C5B5A9;
  --tinta-3: #93837a;
  --linha: #33271F;
  --linha-forte: #4A392E;
  --acento: var(--ocre-claro);
  --acento-tinta: #1A120D;
  --acento-fraco: #35231A;
  --verde: #64C08A;      --verde-fraco: #1C3226;
  --ambar: #E0A94E;      --ambar-fraco: #362916;
  --azul: #74A9DA;       --azul-fraco: #182A3A;
  --roxo: #B08FD0;       --roxo-fraco: #2A2036;
  --vermelho: #E58080;   --vermelho-fraco: #38201F;
  --cinza: #A99C92;      --cinza-fraco: #2A2320;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --sombra-alta: 0 8px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ── Reset curto ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body { height: 100%; }

body {
  font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 620; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* Todo número no lugar certo. */
.num, td.num, th.num, .valor, input[type="number"], time { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--acento-fraco); color: var(--tinta); }

/* Barra de rolagem discreta — a tela do stand fica sempre aberta. */
* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── O esqueleto ─────────────────────────────────────────────────────────── */

#app { min-height: 100%; }

.oculto { display: none !important; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Marca no topo da lateral. Único lugar com Black Mango (não tem número). */
.marca-nome {
  font-family: 'Black Mango', 'Libre Franklin', serif;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}