/* Piupoca · tokens da marca (gerado por marca/gerador/tokens.py; não edite à mão)
   Paleta de 8 cores, fontes da marca (OFL, woff2 em fonts/), escala tipográfica, traço, sombra dura,
   raios e espaçamentos. Regras de cor: texto sempre em chocolate amargo sobre creme ou manteiga;
   creme sobre cacau; mel só no escuro; caramelo só em letra grande (3,8:1 no creme); cereja só fio. */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-italico.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ------------------------------------------------ cores (as 8 da marca, nada fora delas) */
  --cor-creme: #FFF8EA;             /* Creme: papel, miolo do selo e o sabor Ninho */
  --cor-chocolate-amargo: #2A1A12;  /* Chocolate amargo: tinta: traço, texto e sombra dura */
  --cor-cacau: #4B2C20;             /* Cacau: selo, botão, ícone e o Chocolate Blend */
  --cor-caramelo: #AD7222;          /* Caramelo: o “piu”, filetes, bico e o sabor Paçoca */
  --cor-mel: #E6B04C;               /* Mel: asa, pipoca caramelada e o “piu” no escuro */
  --cor-manteiga: #F5D98B;          /* Manteiga: canarinho, adesivos e fundos suaves */
  --cor-kraft: #C8A172;             /* Kraft: saquinho, etiquetas e papelaria */
  --cor-cereja: #B4412F;            /* Cereja: herança do selo antigo: só um fio fino */

  /* papéis: use estes nos componentes */
  --papel: var(--cor-creme);
  --tinta: var(--cor-chocolate-amargo);
  --superficie-escura: var(--cor-cacau);
  --destaque: var(--cor-caramelo);             /* o "piu", filetes; texto só grande */
  --destaque-no-escuro: var(--cor-mel);
  --suave: var(--cor-manteiga);                /* adesivos, faixas, fundos suaves */
  --papelaria: var(--cor-kraft);
  --fio: var(--cor-cereja);                    /* só um fio fino */
  --texto: var(--tinta);
  --texto-no-escuro: var(--cor-creme);

  /* cor de cada sabor (bolinha, faixa, cartão). O Ninho é creme na embalagem, mas no site o creme
     some no papel: o chip do Ninho é manteiga (e todo chip leva --borda) */
  --sabor-ninho: var(--cor-manteiga);
  --sabor-chocolate-blend: var(--cor-cacau);
  --sabor-pacoca: var(--cor-caramelo);

  /* ------------------------------------------------ fontes */
  --fonte-serifa: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --fonte-texto: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* estilos da marca: font-family + font-weight + font-variation-settings (SOFT já vem fixo em 100 no woff2) */
  --titulo-peso: 650;
  --titulo-eixos: 'WONK' 1, 'opsz' 96;          /* Fraunces romano */
  --sabor-peso: 600;
  --sabor-eixos: 'WONK' 0, 'opsz' 72;           /* Fraunces itálico (font-style: italic): Ninho, Chocolate Blend, Paçoca */
  --linha-fina-peso: 500;
  --linha-fina-eixos: 'WONK' 0, 'opsz' 36;      /* Fraunces itálico, frases curtas */
  --versalete-peso: 640;
  --versalete-eixos: 'WONK' 0, 'opsz' 24;       /* Fraunces em caixa-alta: o único versalete do sistema */
  --versalete-espaco: 0.2em;
  --corpo-peso: 400;
  --ficha-peso: 500;
  --botao-peso: 600;

  /* ------------------------------------------------ escala tipográfica (fluida entre 360 px e 1280 px) */
  --texto-xs: 0.8125rem;                                   /* 13 px: rodapé, rótulos */
  --texto-sm: 0.9375rem;                                   /* 15 px: fichas */
  --texto-base: 1.0625rem;                                 /* 17 px: corpo */
  --texto-lg: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);  /* 18–20 px: abertura */
  --titulo-sm: clamp(1.375rem, 1.27rem + 0.43vw, 1.625rem);/* 22–26 px */
  --titulo-md: clamp(1.75rem, 1.55rem + 0.87vw, 2.25rem);  /* 28–36 px */
  --titulo-lg: clamp(2.25rem, 1.86rem + 1.74vw, 3.25rem);  /* 36–52 px */
  --titulo-xl: clamp(2.75rem, 2.06rem + 3.04vw, 4.5rem);   /* 44–72 px */
  --versalete-tam: 0.8125rem;                              /* 13 px, sempre com --versalete-espaco */
  --entrelinha-titulo: 1.08;
  --entrelinha-texto: 1.55;
  --medida-texto: 62ch;

  /* ------------------------------------------------ traço e sombra dura (sem desfoque, nunca)
     A regra da marca é 3,5 px de traço e 4 px de sombra por 1000 px de página. Num layout de ~900 px
     de conteúdo isso dá 3,15 px e 3,6 px: arredondado pra 3 px de traço e 4 px de sombra (a sombra
     arredonda pra cima pra não sumir). As ilustrações usam o mesmo traço no tamanho em que aparecem:
     as pipocas avulsas (pipoca/*.svg) têm 3 px de traço e 4 px de sombra em 200 px, então use-as
     entre 160 e 240 px (--pipoca-avulsa); pra outro tamanho, gere de novo (pipoca.avulsa(lado=N)). */
  --traco: 3px;
  --traco-fino: 2px;                                       /* fios, divisórias, dobras */
  --traco-grosso: 4px;                                     /* só em peça grande (herói, cartaz) */
  --borda: var(--traco) solid var(--tinta);
  --sombra-desloc: 4px;
  --sombra-dura: var(--sombra-desloc) var(--sombra-desloc) 0 0 var(--tinta);
  --sombra-dura-sm: 2px 2px 0 0 var(--tinta);              /* chips e peças miúdas (com --traco-fino) */
  --sombra-dura-hover: 6px 6px 0 0 var(--tinta);           /* levanta: translate(-2px, -2px) */
  --sombra-dura-apertado: 1px 1px 0 0 var(--tinta);        /* afunda: translate(3px, 3px) */
  --pipoca-avulsa: 200px;                                  /* tamanho de uso das pipocas avulsas (160–240 px) */

  /* ------------------------------------------------ raios */
  --raio-sm: 8px;
  --raio: 14px;
  --raio-lg: 22px;
  --raio-pilula: 999px;

  /* ------------------------------------------------ espaçamentos (base 4 px) */
  --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;

  /* ------------------------------------------------ o tempero de cartum */
  --torto-esq: -3deg;                                      /* adesivos levemente tortos, de −3° a 4° */
  --torto-dir: 2deg;
  --torto-max: 4deg;
  --pulo: cubic-bezier(0.34, 1.56, 0.64, 1);               /* entrada com pulinho */
  --suave-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --duracao-rapida: 120ms;
  --duracao: 220ms;
  --duracao-lenta: 420ms;

  /* ------------------------------------------------ fundo de rabiscos (azulejo de 600 px) */
  --rabiscos-tam: 600px 600px;
}

/* Fundo de rabiscos: classes em vez de variável, porque url() dentro de variável CSS é resolvida
   de jeitos diferentes pelos navegadores; aqui o caminho é sempre relativo a este arquivo. */
.fundo-rabiscos-claro {
  background: var(--cor-creme) url('fundo/rabiscos-claro.svg') repeat;
  background-size: var(--rabiscos-tam);
}
.fundo-rabiscos-escuro {
  background: var(--cor-cacau) url('fundo/rabiscos-escuro.svg') repeat;
  background-size: var(--rabiscos-tam);
}