/* ==========================================================================
   Tokens — Gramim Marmoraria
   Fonte: design system definitivo (gramim-design-system/tokens.css).
   Monocromática com um acento: Carrara 60% · Nero/Grafite 38% · Vermelho 2%.
   Cantos retos, hierarquia por fios (nunca por sombras), uma única família.
   ========================================================================== */

/* Outfit (SIL Open Font License), pesos 300 a 600 num só arquivo variável.
   Hospedada no próprio site: sem pedir nada ao Google a cada visita. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/Outfit-Variable-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores — nomes de pedra, porque vêm dela */
  --nero: #121110;        /* principal */
  --grafite: #2a2826;     /* par do Nero; hover de botões */
  --pedra: #6b655d;       /* texto secundário (tinta-suave) */
  --pedra-clara: #a39c92; /* texto secundário sobre Nero (tinta-suave do tema Nero) */
  --travertino: #e7e1d7;  /* apoio, painéis (fundo-alt) */
  --carrara: #f5f3ef;     /* fundo */
  --branco: #ffffff;      /* superfície: cartões e campos */
  --fio: #d6cfc3;         /* linha: divisórias de 1px */
  --fio-forte: var(--nero); /* linha-forte: abre blocos de especificação */
  --fio-escuro: #3a3734;  /* linha sobre Nero */

  /* Acento — Vermelho Gramim: links e um detalhe por peça. Nunca fundo */
  --vermelho: #c0392b;
  --vermelho-oxido: #9a2c21;  /* hover de links */
  --vermelho-claro: #e06a5c;  /* link e foco sobre Nero */

  /* Tipografia — uma família, a hierarquia vem dos pesos */
  --fonte: "Outfit", Arial, sans-serif;
  --fonte-titulo: var(--fonte);
  --fonte-mono: var(--fonte);  /* medidas e números: a mesma Outfit, com algarismos tabulares */
  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;

  --texto-titulo-1: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);     /* titulo-1: Light 64px */
  --texto-titulo-2: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); /* titulo-2: SemiBold 36px */
  --texto-subtitulo: 0.8125rem;                              /* subtitulo: SemiBold 13px, caixa alta */
  --texto-corpo: 1rem;                                       /* corpo: Regular 16px */
  --texto-legenda: 0.8125rem;                                /* legenda: Medium 13px */

  --entrelinha-corpo: 1.5;
  --espacamento-subtitulo: 0.24em;

  /* Linhas */
  --linha: 1px solid currentColor;

  /* Cantos: pedra cortada a esquadro */
  --raio-sm: 0;
  --raio-md: 0;

  /* Sem sombras: a separação vem de fios e tons */
  --sombra-flutuante: none;

  /* Grafismos: o G ampliado em marca-d'água fica entre 6% e 8% */
  --marca-dagua: 0.07;

  /* Espaçamento entre seções */
  --secao-y: clamp(3rem, 2rem + 4vw, 6rem);
}