/* ==========================================================================
   ESTÚDIO TOHMÉ · tokens
   Cole este arquivo inteiro antes de qualquer outro CSS do projeto.
   Nada no site pode usar cor, fonte, raio ou duração fora daqui.
   ========================================================================== */

/* Gotham é a família completa e é a voz de tudo. A hierarquia vem do PESO.
   Corpo é Book (400), não Bold. Caminhos servindo .woff2 de ../fontes/. */
@font-face{ font-family:"Gotham"; src:url("../fontes/Gotham-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Gotham"; src:url("../fontes/Gotham-Book.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Gotham"; src:url("../fontes/Gotham-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Gotham"; src:url("../fontes/Gotham-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Gotham"; src:url("../fontes/Gotham-Black.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Gotham"; src:url("../fontes/Gotham-Ultra.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Gotham"; src:url("../fontes/Gotham-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Gotham"; src:url("../fontes/Gotham-BoldItalic.woff2") format("woff2");
  font-weight:700; font-style:italic; font-display:swap; }
@font-face{
  /* Arquivo já é o corte itálico da didone. Nunca aplicar font-style:italic nela. */
  font-family:"IvyPresto Display";
  src:url("../fontes/IvyPresto-Display.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
/* Space Mono (OFL) auto-hospedada, para o site ficar self-contained. */
@font-face{
  font-family:"Space Mono";
  src:url("../fontes/SpaceMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("../fontes/SpaceMono-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* ---------- superfícies ---------- */
  --fundo:#DED2B8;        /* fora da folha, a mesa */
  --papel:#F8F1E1;        /* a folha, superfície padrão */
  --papel-alto:#FCF8F0;   /* card sobre a folha */
  --musgo:#3E4E32;        /* superfície de afirmação, hero, faixa final */
  --musgo-fundo:#2E3A26;  /* estado pressionado do musgo */

  /* ---------- cores de papel ---------- */
  --terra:#C4643C;        /* ação, esteira, sinal de atenção */
  --terra-fundo:#A6502E;  /* hover de botão terra */
  --manteiga:#EFCF63;     /* prova, destaque, marca-texto */
  --menta:#C9DCCF;        /* categoria, aba lateral, apoio frio */
  --azul:#35547E;         /* apoio: link, anotação, dado, elemento interativo */
  --areia:#E8CFC4;        /* apoio raro, só em composição de cards */

  /* ---------- texto ---------- */
  --tinta:#242C1D;        /* texto sobre superfície clara */
  --grafite:#6E7362;      /* texto secundário sobre superfície clara */
  --tinta-clara:#F8F1E1;             /* texto sobre musgo */
  --grafite-claro:rgba(248,241,225,.76); /* secundário sobre musgo */

  /* ---------- linhas ---------- */
  --linha:rgba(36,44,29,.16);
  --linha-forte:rgba(36,44,29,.4);   /* usada no tracejado */
  --linha-clara:rgba(248,241,225,.22);

  /* ---------- tipografia ----------
     Gotham é a voz. Hierarquia pelo PESO. IvyPresto só destaque pontual em itálico. */
  --f-base:"Gotham","Helvetica Neue",Arial,sans-serif;
  --f-destaque:"IvyPresto Display",Georgia,"Times New Roman",serif;
  --f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-display:var(--f-base); /* obsoleto: título é Gotham. Alias para não quebrar nada. */

  /* pesos da Gotham */
  --peso-leve:300;    /* Light */
  --peso-corpo:400;   /* Book, o corpo */
  --peso-medio:500;   /* Medium, etiqueta e botão */
  --peso-titulo:700;  /* Bold, títulos */
  --peso-numero:800;  /* Black, número grande e hero */
  --peso-ultra:900;   /* Ultra, tipografia gigante de fundo */

  --t-hero:clamp(34px,5vw,58px);
  --t-secao:clamp(25px,3.2vw,34px);
  --t-card:20px;
  --t-corpo:16px;
  --t-apoio:14px;
  --t-legenda:13px;
  --t-etiqueta:10.5px;

  --entrelinha-titulo:1.05;   /* leading fechado nos títulos */
  --entrelinha-corpo:1.5;     /* corpo um pouco mais discreto */
  --tracking-titulo:-.01em;
  --tracking-etiqueta:.14em;

  /* ---------- forma ---------- */
  --raio-folha:18px;
  --raio-bloco:14px;
  --raio-card:12px;
  --raio-mini:8px;
  --raio-etiqueta:5px;
  --raio-pill:99px;

  --grade-passo:24px;
  --tracejado:1.5px dashed var(--linha-forte);
  --marca-canto:10px;

  /* ---------- espaço ---------- */
  --gap-dobra:24px;                    /* distância entre dobras */
  --pad-bloco:clamp(24px,3.4vw,44px);  /* respiro interno de bloco */
  --pad-lateral:clamp(20px,4.4vw,52px);/* respiro lateral da folha */
  --largura-folha:1000px;
  --medida-texto:52ch;                 /* largura máxima de parágrafo */

  /* ---------- movimento ---------- */
  --dur-rapido:180ms;
  --dur-base:460ms;
  --dur-longo:900ms;
  --ease-saida:cubic-bezier(.4,0,.2,1);
  --ease-carta:cubic-bezier(.34,1.3,.5,1);
}

/* Textura de bancada. Uma superfície por página. */
.grade{
  background-image:
    linear-gradient(rgba(36,44,29,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,44,29,.075) 1px,transparent 1px);
  background-size:var(--grade-passo) var(--grade-passo);
}
.grade-pontos{
  background-image:radial-gradient(rgba(36,44,29,.18) 1.1px,transparent 1.1px);
  background-size:17px 17px;
}

/* Recorte: só em conteúdo lateral ao fluxo principal. */
.corte{border:var(--tracejado);border-radius:var(--raio-card)}

/* Marcas de registro. Sempre as quatro, nunca duas. */
.marcado{position:relative}
.marcado .tk{position:absolute;width:var(--marca-canto);height:var(--marca-canto);opacity:.5;pointer-events:none}
.marcado .tk.a{top:-1px;left:-1px;border-top:1.5px solid var(--tinta);border-left:1.5px solid var(--tinta)}
.marcado .tk.b{top:-1px;right:-1px;border-top:1.5px solid var(--tinta);border-right:1.5px solid var(--tinta)}
.marcado .tk.c{bottom:-1px;left:-1px;border-bottom:1.5px solid var(--tinta);border-left:1.5px solid var(--tinta)}
.marcado .tk.d{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--tinta);border-right:1.5px solid var(--tinta)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}