/* TOKENS DE ESCALA (nao sao cor): espacos, raios, tempos, tipografia fluida, layout.
   Carregado por todos os kits. Cor fica em paletas/ (primitivos) e tokens-semanticos.css (papeis).
   Breakpoints (media query nao aceita var(), entao ficam aqui como referencia unica):
     600px  duas colunas simples     900px  composicao de desktop     1100px  galeria larga */
:root {
  --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;
  --espaco-10: 128px;

  --raio-0: 0;
  --raio-1: 2px;
  --raio-total: 50%;    /* circulo: logo redondo, carimbo */

  --dur-1: 150ms;
  --dur-2: 400ms;
  --dur-3: 800ms;
  --dur-deriva: 16s;    /* faixas da abertura; as outras derivam em multiplos deste valor */
  --ease: cubic-bezier(.2, .7, .1, 1);

  --fonte-titulo: "Unbounded", "Arial Black", Impact, sans-serif;
  --fonte-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-rotulo: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;   /* rotulos, chips, numeros */

  /* Jeito do titulo. Uma paleta pode trocar junto com --fonte-titulo
     (ex.: fonte de letreiro que pede caixa alta ou outro peso). */
  --titulo-peso: 900;
  --titulo-caixa: none;
  --titulo-entrelinha: .95;
  --titulo-tracking: -.04em;

  /* Formas do Grafismo. Uma paleta pode trocar o modulo do friso (outro desenho, mesma estrutura):
     SVG em data-URI usado como mascara; a cor vem de --cor-friso-figura. Dentro do SVG so preto e transparente.
     --friso-modulo repete na horizontal (proporcao 5:2); --friso-modulo-v e o mesmo desenho em pe (2:5). */
  --friso-modulo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Cg filter='url(%23p)'%3E%3Cpath fill='none' stroke='black' stroke-width='9' d='M100 8 L136 40 L100 72 L64 40 Z'/%3E%3Cpath d='M82 40 Q100 24 118 40 Q100 56 82 40Z'/%3E%3Cpath fill='none' stroke='black' stroke-width='9' d='M14 14V66 M30 26V54 M46 14V66 M4 14H56 M154 14V66 M170 26V54 M186 14V66 M144 66H196'/%3E%3C/g%3E%3C/svg%3E");
  --friso-modulo-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Cg filter='url(%23p)'%3E%3Cg transform='rotate(90) translate(0 -80)'%3E%3Cpath fill='none' stroke='black' stroke-width='9' d='M100 8 L136 40 L100 72 L64 40 Z'/%3E%3Cpath d='M82 40 Q100 24 118 40 Q100 56 82 40Z'/%3E%3Cpath fill='none' stroke='black' stroke-width='9' d='M14 14V66 M30 26V54 M46 14V66 M4 14H56 M154 14V66 M170 26V54 M186 14V66 M144 66H196'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --friso-altura: clamp(30px, 4.6vw, 62px);
  --lado-largura: clamp(56px, 6vw, 96px);    /* faixa lateral com friso em pe (a partir de 900px) */
  --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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --filete: 4px;                             /* regua grossa das listas e bordas */

  --gutter: 16px;
  --largura: 1280px;

  /* Escala de texto, do menor ao maior. Componentes so usam estes tamanhos.
     Calibrada para a fonte de titulo larga (Unbounded). */
  --fs-micro: .7rem;                                     /* selo, tag */
  --fs-kicker: clamp(.72rem, .7rem + .15vw, .82rem);     /* rotulo mono em caixa alta, chip, legenda */
  --fs-corpo: clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-corpo-g: clamp(1.1rem, 1.04rem + .3vw, 1.25rem);  /* redes, avisos */
  --fs-frase: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  --fs-h4: clamp(1.05rem, .95rem + .6vw, 1.5rem);        /* titulo de clipe */
  --fs-marca: 1.2rem;                                    /* nome na barra superior */
  --fs-h3: clamp(1.2rem, .95rem + 1.2vw, 2.1rem);
  --fs-titulo-m: clamp(1.45rem, 1rem + 2.1vw, 3rem);     /* bio curta, estilos, rodape */
  --fs-titulo-g: clamp(1.15rem, .4rem + 3.4vw, 3.6rem);  /* email de contato */
  --fs-h2: clamp(2.1rem, .6rem + 6.6vw, 7.4rem);
  --fs-nome: clamp(4.4rem, 21.5vw, 12rem);               /* nome na abertura (celular) */
  --fs-nome-largo: min(12.5vw, 21vh, 15rem);             /* nome na abertura a partir de 900px */
}