/* Zilen — tokens do design system
   Toda cor, tipo, espaço, raio e movimento do site sai daqui.
   Componentes ficam em estilo.css; a vitrine fica em /design-system/. */

/* Fontes de reserva com métricas ajustadas às do site, para a troca de fonte não mexer no layout */
@font-face { font-family: "Manrope reserva"; src: local("Arial"); size-adjust: 101%; ascent-override: 106%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader reserva"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; size-adjust: 95%; ascent-override: 78%; descent-override: 28%; line-gap-override: 0%; }

:root {
  /* Cor — neutros */
  --papel: #f3f0e8;        /* fundo principal, off-white quente */
  --papel-2: #ebe7dd;      /* superfícies e cartões sobre o papel */
  --papel-3: #dfdace;      /* bordas fortes e gradientes */
  --carbono: #1b1c1e;      /* texto principal e seções escuras */
  --carbono-2: #26282b;    /* superfícies sobre o carbono */
  --carbono-3: #34373b;    /* bordas e detalhes sobre o carbono */
  --grafite: #55585c;      /* texto secundário sobre o papel */

  /* Cor — sálvia, o acento da marca */
  --salvia-50: #eef3ea;    /* fundo de seção com tom de sálvia */
  --salvia-100: #dfe9d8;   /* superfícies sobre o sálvia-50 */
  --salvia-300: #b6cfac;   /* seleção, detalhes e acento sobre o carbono */
  --salvia: #8cb082;       /* acento: pontos, setas, barras, chamada final */
  --salvia-700: #4b6b45;   /* texto em sálvia sobre fundos claros (AA) */
  --salvia-800: #3e5a39;   /* texto em sálvia sobre a imagem da abertura */

  /* Cor — transparências */
  --linha: rgba(27, 28, 30, 0.12);
  --linha-clara: rgba(243, 240, 232, 0.14);
  --texto-claro-2: rgba(243, 240, 232, 0.7);

  /* Tipografia */
  --sans: "Manrope", "Manrope reserva", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", "Newsreader reserva", Georgia, "Times New Roman", serif;
  --serif-peso: 500;      /* itálico de destaque; a Newsreader vai de 200 a 800 */

  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --texto-lead: clamp(1.1875rem, 1.05rem + 0.45vw, 1.35rem);  /* no celular, ao menos 18% maior que o corpo */
  --titulo-3: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  --titulo-2: clamp(2.1rem, 1.4rem + 3.2vw, 4.2rem);
  --titulo-1: clamp(2.625rem, 1.2rem + 4.8vw, 6rem);

  --entrelinha-titulo: 1.15;  /* espaço para descendentes (g, p) e acentos (ã, é) */
  --entrelinha-texto: 1.6;

  /* Espaço */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;
  --espaco-9: 96px;
  --margem: clamp(20px, 4vw, 48px);
  --secao: clamp(88px, 12vw, 168px);
  --largura: 1240px;

  /* Raio */
  --raio-sm: 10px;
  --raio: 18px;
  --raio-lg: 28px;
  --raio-pilula: 999px;

  /* Movimento */
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 0.3s;
  --medio: 0.6s;
  --lento: 1.1s;
  --espera-abertura: 0.5s;  /* as aberturas de página e de seção começam meio segundo depois */

  /* Camadas */
  --z-topo: 50;
  --z-progresso: 60;
  --z-grao: 100;

  /* Aliases usados nos componentes */
  --salvia-escuro: var(--salvia-700);
  --salvia-claro: var(--salvia-300);
}