/*
 * tokens.css — Lista de Presentes / Cha de Panela
 *
 * Fonte dos valores: DESIGN.md (Cor, Tipografia, Espaco e ritmo, Motion).
 * Nao inventar valor que nao esteja la.
 *
 * Regras duras deste arquivo (ver CLAUDE.md / PLANO.md hardgates):
 *   1. Nenhuma declaracao `color:` usa --clay ou --ouro. Reprovam em AA
 *      (3,78:1 e 2,04:1). --clay so serve como borda/contorno/superficie
 *      sem texto. --clay-forte e o unico que recebe texto, sempre --papel.
 *   2. Nenhum font-size abaixo de 16px em nenhuma regra.
 *   3. Nenhum #000 nem #fff em superficie de interface.
 *   4. prefers-reduced-motion: reduce zera toda transicao.
 */

@font-face {
  font-family: 'Petrona';
  src: url('/assets/fontes/petrona-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Petrona';
  src: url('/assets/fontes/petrona-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fontes/hanken-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fontes/hanken-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fontes/hanken-grotesk-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


:root {
  /* Cor — DESIGN.md secao "Cor" */
  --papel: #FAF6F0;
  --papel-2: #F3EDE4;
  --tinta: #2C2620;
  --tinta-suave: #68625B;
  --clay: #AE6E54;       /* borda, contorno, superficie. NUNCA texto */
  --clay-forte: #734937; /* fundo com texto --papel por cima, 7,13:1 */
  --ouro: #E5A243;       /* aura e detalhe fino. NUNCA texto */

  /* Etiquetas de estado — DESIGN.md, "Revisao de 2026-08-30: as etiquetas de
     estado ganharam cor". Ate EX-03 as duas eram quase o mesmo cinza a um
     braco de distancia, que e a distancia do publico desta pagina.
     Contrastes medidos (DESIGN.md "Contraste, verificado"):
       disponivel-tinta sobre disponivel-fundo  6,43:1  AA
       reservado-tinta  sobre reservado-fundo   6,51:1  AA
     🔴 A BORDA NAO E ENFEITE. Os dois fundos ficam a 1,09:1 e 1,06:1 do
        --papel: sozinhos eles nao desenham a pilula. Etiqueta sem borda e
        etiqueta que some.
     🔴 Nenhum vermelho. "Reservado" e ambar quente, no matiz 78,8 da familia
        da marca, porque "outra pessoa ja vai dar este" e boa noticia, nao
        alarme (hardgate 6). A cor e redundante: o glifo e a palavra
        continuam sendo a pista principal (hardgate 5). */
  --disponivel-fundo: #E7EFE3;
  --disponivel-tinta: #2E5E3A;
  --disponivel-borda: #4A7A55;
  --reservado-fundo: #FBEEDA;
  --reservado-tinta: #7A4A12;
  --reservado-borda: #B07A2A;

  /* Tipografia — DESIGN.md secao "Tipografia" */
  --fonte-titulo: 'Petrona', Georgia, serif;
  --fonte-corpo: 'Hanken Grotesk', system-ui, sans-serif;
  /* 🔴 A Fragment Mono saiu em EX-07, por decisao do Ygor. O @font-face, o
     woff2 de 25,2 KB e a dependencia @fontsource foram embora junto: o
     unico consumidor da familia e a linha "Codigo" do painel do admin, e
     ali monoespacada do sistema resolve. Sao duas fontes carregadas, nao
     tres. O token FICA, e nao vira literal, porque quem estiliza o codigo
     e admin.css e a decisao de qual monoespacada usar e daqui. */
  --fonte-codigo: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tamanho-corpo: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --tamanho-nome-item: 1.25rem;      /* 20px, fixo */
  --tamanho-etiqueta: 1rem;          /* 16px, fixo — piso absoluto */
  --tamanho-botao: 1.25rem;          /* 20px */
  --tamanho-titulo-modal: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --tamanho-saudacao: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);

  /* Espaco — base 4px, DESIGN.md secao "Espaco e ritmo" */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 72px;

  /* Alvo de toque minimo */
  --alvo-minimo: 48px;

  /* Motion — DESIGN.md secao "Motion" */
  --duracao-rapida: 150ms;
  --duracao-normal: 200ms;
  --easing-padrao: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
}

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