/* ---------------------------------------------------------------------------
 * Os tokens do projeto: cores, tipos e medidas. UM arquivo, todas as telas.
 *
 * Vieram da estrutura aprovada em 16/09 (o canvas "PWRO -- Perfect World
 * Ragnarok Online"): azul-preto frio, UM acento verde-menta para tudo que e
 * acao ou estado vivo, e cantos chanfrados em vez de arredondados -- e a
 * linguagem de interface de jogo, nao de site de empresa.
 *
 * As fontes vem DAQUI, de tema/fontes/, nao de host nenhum. O canvas trouxe os
 * .woff2 dentro dele; sao 130 KB para o site abrir identico numa rede que
 * bloqueia CDN, que e a regra do projeto desde que tiramos o Bootstrap.
 *
 * Quem usa: a pagina inicial (web/site) e o tema do FluxCP
 * (web/fluxcp/themes/midgard). Uma segunda copia disto seria uma segunda
 * copia para esquecer de mudar.
 * ------------------------------------------------------------------------- */

@font-face {
  font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/tema/fontes/chakra-petch-500-latin.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: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/tema/fontes/chakra-petch-500-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/tema/fontes/chakra-petch-600-latin.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: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/tema/fontes/chakra-petch-600-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/tema/fontes/chakra-petch-700-latin.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: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/tema/fontes/chakra-petch-700-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/tema/fontes/ibm-plex-sans-400-latin.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: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/tema/fontes/ibm-plex-sans-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- fundos, do mais fundo ao mais alto ---- */
  --tinta:       oklch(0.15 0.015 260);       /* a pagina */
  --tinta-vidro: oklch(0.15 0.015 260 / 0.85);/* o cabecalho fixo, translucido */
  --placa:       oklch(0.19 0.015 260);       /* painel, cartao, celula */
  --placa-viva:  oklch(0.21 0.02 200);        /* painel sob o ponteiro */
  --placa-alta:  oklch(0.26 0.015 260);       /* trilho de progresso, avatar */
  --campo:       oklch(0.15 0.015 260);       /* dentro de um campo */

  /* ---- linhas ---- */
  --linha:       oklch(0.28 0.015 260);
  --linha-fraca: oklch(0.26 0.015 260);
  --linha-forte: oklch(0.32 0.015 260);

  /* ---- texto ---- */
  --texto:       oklch(0.94 0.005 260);
  --texto-calmo: oklch(0.78 0.01 260);
  --fraco:       oklch(0.72 0.01 260);
  --sutil:       oklch(0.62 0.01 260);
  --apagado:     oklch(0.50 0.01 260);

  /* ---- o acento: acao, estado vivo, marca ---- */
  --acento:       oklch(0.82 0.15 165);
  --acento-claro: oklch(0.90 0.12 165);
  --acento-fundo: oklch(0.24 0.04 165);
  --acento-halo:  oklch(0.82 0.15 165 / 0.6);
  --acento-sumiu: oklch(0.82 0.15 165 / 0);
  --sobre-acento: oklch(0.15 0.015 260);

  /* ---- alerta, separado do acento de proposito ---- */
  --alerta:       oklch(0.72 0.17 40);

  /* ---- tipos ---- */
  --titulo: "Chakra Petch", "Segoe UI", Arial, sans-serif;
  --corpo:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- medidas ---- */
  --gutter: 28px;
  --larg-max: 1200px;      /* pagina inicial */
  --larg-texto: 1040px;    /* telas internas */
  --larg-cartao: 440px;    /* entrar, recuperar senha */
  --topo-altura: 64px;

  /* O canto chanfrado das telas do jogo. Dois tamanhos: painel e botao. */
  --chanfro: 12px;
  --chanfro-botao: 8px;
}

@media (max-width: 560px) {
  :root { --gutter: 18px; --chanfro: 10px; }
}