/* ==========================================================
   XOC Social Studio · tokens de marca
   Fonte: IV VIsual XOC/Identidade/Xoc_Brand_1.jpg (paleta)
   Regras de uso: design-system/DESIGN.md
   Os caminhos das fontes partem de design-system/. Se o HTML
   estiver em outra pasta, ajuste o caminho (ex.: ../design-system/fontes/).
   ========================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("fontes/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fontes/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fontes/Jost-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica XOC";
  src: url("fontes/Helvetica-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica XOC";
  src: url("fontes/Helvetica.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica XOC";
  src: url("fontes/Helvetica-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Amoresa";
  src: url("fontes/Amoresa Regular.woff2") format("woff2"),
       url("fontes/Amoresa Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---------- Cores ---------- */
  --cor-primaria: #697662;      /* verde sálvia: logo, títulos, fundos de destaque */
  --cor-apoio: #CF9D7A;         /* terracota: fundos de bloco, flores, detalhes */
  --cor-apoio-escura: #9F7D62;  /* marrom café: fundos de bloco, legendas sobre creme */
  --cor-fundo: #FFF7EE;         /* creme: fundo principal */
  --cor-fundo-branco: #FFFFFF;  /* branco: seções neutras e fichas técnicas */
  --cor-texto: #706970;         /* cinza quente: texto corrido */
  --cor-texto-sobre-escuro: #FFF7EE; /* texto e logo sobre verde ou marrom */

  /* Paleta estendida: tons medidos na proposta e nos stories da XOC (design-system/Referencias/) */
  --cor-chocolate: #523B29;     /* fundo de capa e de seção forte, texto escuro sobre claro */
  --cor-salvia-escura: #4D5745; /* cartões e etiquetas sobre verde */
  --cor-salvia-clara: #8E9A87;  /* fundo de seção suave */
  --cor-pedra: #CBCCBA;         /* papel das notas, letra Amoresa sobre chocolate */

  /* ---------- Fontes ---------- */
  --fonte-titulo: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Helvetica XOC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fonte-detalhe: "Amoresa", "Instrument Serif", serif;  /* só a 1ª letra do título */
  --fonte-apoio: "Jost", "Helvetica Neue", Arial, sans-serif; /* rótulos, botões, caixa-alta */

  /* ---------- Escala de tipo (base 16px) ---------- */
  --tamanho-titulo-xl: 4rem;     /* 64px: capa, hero */
  --tamanho-titulo-l: 2.75rem;   /* 44px: título de seção */
  --tamanho-titulo-m: 2rem;      /* 32px: subtítulo */
  --tamanho-corpo: 1rem;         /* 16px */
  --tamanho-pequeno: 0.8125rem;  /* 13px: legendas */
  --tamanho-rotulo: 0.75rem;     /* 12px: rótulos em caixa-alta */

  --altura-linha-titulo: 1.05;
  --altura-linha-corpo: 1.6;
  --espaco-letras-rotulo: 0.3em; /* rótulos espaçados, como "COLORS" no quadro da marca */

  /* ---------- Forma e espaço ---------- */
  --raio-pequeno: 4px;
  --raio-medio: 12px;
  --raio-pilula: 999px;
  --espaco-1: 0.5rem;
  --espaco-2: 1rem;
  --espaco-3: 1.5rem;
  --espaco-4: 2.5rem;
  --espaco-5: 4rem;
}