/* ==========================================================================
   tokens.css, os "design tokens" do Isumagi

   Olha aqui, pessoal. Essas cores, esses espacamentos e a fonte a gente NAO
   inventou na hora de escrever o CSS. Tudo isso vem do design que ja esta pronto
   no Figma (o link ta no README, deem uma olhada la). Este arquivo e a ponte, ele
   pega o que esta desenhado no Figma e traz pra dentro do codigo, com nome, pra
   usar no front inteiro. Quando bater o olho num var(--gold) por ai, lembra que
   aquele dourado foi decidido no Figma, nao no chute.

   O QUE E UM DESIGN TOKEN
   Um token e um apelido pra uma decisao de design. Em vez de espalhar o codigo
   da cor dourada (#d4af37) em 30 lugares do CSS, a gente da um nome pra ela uma
   vez so, --gold, e usa esse nome em todo canto. No dia que o Figma mudar o tom
   do dourado, a gente troca UMA linha aqui e o site inteiro acompanha. No CSS o
   token vira uma "variavel" (custom property), aquele `--nome` ali dentro do :root,
   e a gente usa depois com var(--nome).

   DE ONDE VEM
   Tudo aqui saiu do design que esta no Figma, o link ta no README. La tem uma
   pagina de Design System com as cores (cada uma nomeada, com o hex embaixo, tipo
   "gold" com "#d4af37"), a tipografia e o espacamento num grid de 8px. Foi de la
   que sairam os valores daqui embaixo, um por um.

   COMO PEGAR UM TOKEN DO FIGMA (o passo a passo pra replicar)
   1. Abre o Figma pelo link do README.
   2. Clica na camada que voce quer copiar (um botao, um card, um texto).
   3. No painel da direita, na aba de propriedades, aparece a cor (o hex, tipo
      #d4af37), o tamanho da fonte, o espacamento, o raio do canto.
      Se o time nomeou como "Color Style" (ex: "Gold / 500"), melhor ainda, o
      nome do estilo ja e o nome do token.
   4. Copia esse valor e poe aqui como uma variavel, dando um nome que diga o que
      e (a funcao), nao a cor crua. Ex: --gold, --surface, --border. Assim o token
      conta pra que serve, nao so qual e a cor.
   5. No CSS da pagina, usa var(--nome) no lugar do valor cru.

   COMO USAR
   A pagina carrega este arquivo ANTES do CSS dela:
       <link rel="stylesheet" href="css/tokens.css">
       <link rel="stylesheet" href="css/sistema-design.css">
   Assim, quando o sistema-design.css escreve var(--gold), o valor ja existe.
   ========================================================================== */
 @font-face {
   font-family: "Papyrus"; /* Importa a fonte papyrus*/
   src: url("../fontes/Papyrus-Font.ttf") format("truetype");
}

:root {
    /* ---- CORES (do tema escuro + dourado do Figma) ---- */
    --bg: #0e0e0e;              /* fundo geral da pagina */
    --surface: #2c2822;        /* fundo dos cards e caixas (um degrau acima do fundo) */
    --surface-header: #14100c; /* fundo do topo/header, mais escuro */
    --border: #3a352c;         /* linha de borda entre as coisas */
    --text: #ffffff;           /* texto principal */
    --text-muted: #e5e7eb;     /* texto de corpo, um pouco mais suave */
    --text-dim: #94a3b8;       /* texto secundario (datas, legendas) */
    --gold: #d4af37;           /* o dourado da marca, usado em destaque e acoes */
    --on-gold: #1a1400;        /* a cor do TEXTO quando o fundo e dourado (o dourado com
                                  texto branco em cima nao tem contraste, entao o Figma usa
                                  esse marrom bem escuro no botao primario e no botao +) */
    --gold-soft: #e6c46a;      /* dourado mais claro */
    --gold-highlight: #facc15; /* dourado de hover (quando passa o mouse) */
    --upvote: #f3d10e;         /* cor do voto positivo */
    --downvote: #ff0000;       /* cor do voto negativo */
    --downvote-dark: #b20000;  /* variacao escura do voto negativo */

    /* ---- ESPACAMENTO (uma escala de 8px, pra tudo respirar igual) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* ---- RAIOS (o quanto os cantos sao arredondados) ---- */
    --r-sm: 10px;    /* cantos pequenos (inputs, imagens) */
    --r-md: 16px;    /* cantos dos cards */
    --r-pill: 32px;  /* bem redondo, formato de pilula (botoes, avatar) */

    /* ---- TIPOGRAFIA (a fonte e a escala de tamanhos, do "type ramp" do Figma) ---- */
    --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-logo: "Papyrus";
    --fs-logo: 22px;      /* a logo Isumagi la no topo */
    --fs-titulo: 18px;    /* titulo do post (o Heading/M do Figma) */
    --fs-base: 15px;      /* corpo padrao da pagina (o Body/L) */
    --fs-corpo: 14px;     /* textos secundarios e botoes (o Body/M) */
    --fs-legenda: 13px;   /* datas e legendas (o Caption) */
}