/* Tokens da prumie lab (identidade/design-guide.md). Cor fora daqui não entra no site. */
:root {
  --swan: #F5F0E9;
  --royal: #112250;
  --sapphire: #3C507D;
  --sand: #E0C58F;
  --rubi: #CF1830; /* vermelho que substitui o areia no site (texto em cima dele: swan ou papel) */
  --stone: #D9CBC2;
  --papel: #FBF8F3; /* swan mais claro, só para papel e cartão sobre o fundo */

  --texto: var(--royal);
  --fundo: var(--swan);
  --apagado: color-mix(in srgb, var(--royal) 52%, var(--swan)); /* 3:1 no fundo, mínimo para texto grande */

  --fonte: 'Poppins', system-ui, sans-serif;
  --fonte-display: 'Fraunces', Georgia, serif; /* serifa macia e gorda, de rótulo antigo */
  --fonte-grotesca: 'Inter Tight', 'Poppins', system-ui, sans-serif; /* pesada e junta: lista de exemplos, como funciona e nomes dos trabalhos */
  /* grão de papel: ruído fraco por cima do creme, para tudo parecer impresso */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .13 0 0 0 0 .31 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --angulo: 32deg;
  --raio: 10px;
  --raio-g: 28px;

  --margem: clamp(16px, 4vw, 56px);
  --secao: clamp(96px, 16vh, 200px);
  --largura: 1440px;

  --t-gigante: clamp(3.4rem, 13vw, 13.5rem);
  --t-grande: clamp(2.6rem, 8vw, 8rem);
  --t-medio: clamp(1.8rem, 4.2vw, 3.6rem);
  --t-corpo: clamp(1rem, 1.1vw, 1.15rem);
  --t-pequeno: 0.85rem;
  /* padrão de tamanho do site: título de seção (e o que tem peso de título), subtítulo, descrição e rótulo (--t-pequeno) */
  --fs-titulo: clamp(2.2rem, min(5.4vw, (100svh - 156px) / 9.36), 6rem); /* a altura garante que a lista de exemplos caiba inteira */
  --fs-subtitulo: clamp(1.8rem, min(4vw, 7svh), 4.6rem);
  --fs-texto: clamp(1.02rem, min(1.4vw, 2.6svh), 1.4rem);

  --ease: cubic-bezier(.2, .7, .1, 1);
}

@media (max-width: 700px) {
  :root {
    --fs-titulo: clamp(1.8rem, 8.6vw, 2.6rem);
    --fs-subtitulo: clamp(1.6rem, 8vw, 2.2rem);
    --fs-texto: 1rem;
  }
}