/* Tokens do portfolio Bruno Closs.
   Fonte unica dos valores: componente e pagina so leem daqui.
   Trocar a direcao = trocar valor aqui, nao cacar cor espalhada. */

:root {
  /* COR
     papel = o fundo de estudio da foto (a pessoa esta DENTRO da pagina, nao numa caixa).
     A interface e neutra: a cor vem das imagens, tirada com o conta-gotas. */
  --papel: #ECEBE7;
  --papel-2: #E2E1DC;
  --papel-3: #D6D5CF;
  --branco: #FAFAF8;
  --tinta: #121212;
  --tinta-2: #45443F;       /* 8,2:1 sobre papel */
  --tinta-3: #65645F;       /* 4,9:1 sobre papel, piso pra texto pequeno */
  --linha: #C9C8C2;
  --linha-forte: #121212;
  --vermelho: #EE3A16;      /* so letreiro, guia e marca de retoque; 3,7:1, texto grande */
  --vermelho-tinta: #C42B0C;/* o vermelho que aguenta texto pequeno, 4,8:1 */
  --ok: #1E6B45;
  --aviso: #8A5A00;
  --erro: #B3261E;
  --formiga-a: #121212;     /* a selecao do Photoshop e sempre preto e branco, em qualquer fundo */
  --formiga-b: #FAFAF8;
  --luz-preto: #000000;     /* fundos de visualizacao do lightbox, como o fundo de tela do Photoshop */
  --luz-cinza: #767676;     /* cinza 18% */
  --luz-branco: #FFFFFF;

  /* FONTE: uma familia so, que estica e aperta (eixo de largura 62 a 125) */
  --fonte: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fonte-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --t-letreiro: clamp(4.5rem, 14.5vw, 16rem);
  --t-titulo-1: clamp(2.75rem, 6vw, 6.5rem);
  --t-titulo-2: clamp(1.5rem, 2.4vw, 2.5rem);
  --t-titulo-3: 1.25rem;
  --t-corpo: 1.0625rem;
  --t-corpo-p: .9375rem;
  --t-legenda: .8125rem;
  --t-rotulo: .6875rem;
  --t-dado: .75rem;

  /* ESPACO: escala de 4 */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --margem: clamp(16px, 3vw, 40px);
  --calha: clamp(12px, 1.6vw, 24px);

  /* CANTO: zero. Canto e da imagem, nao da interface. So o que precisa rolar e redondo. */
  --r-0: 0;
  --r-redondo: 999px;

  /* SOMBRA: dura, sem desfoque, como luz de estudio */
  --sombra-p: 3px 3px 0 var(--tinta);
  --sombra: 6px 6px 0 var(--tinta);
  --sombra-g: 10px 10px 0 var(--tinta);
  --fio: 1px;

  /* MOVIMENTO */
  --d-1: 120ms;
  --d-2: 220ms;
  --d-3: 420ms;
  --d-4: 720ms;
  --curva-sai: cubic-bezier(.16, 1, .3, 1);
  --curva-troca: cubic-bezier(.65, 0, .35, 1);

  /* CAMADAS */
  --z-topo: 50;
  --z-sobre: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* a borda andando da selecao do Photoshop, reutilizada no foco e na marca de selecao */
  --formigas:
    linear-gradient(90deg, var(--formiga-a) 50%, var(--formiga-b) 50%),
    linear-gradient(90deg, var(--formiga-a) 50%, var(--formiga-b) 50%),
    linear-gradient(0deg, var(--formiga-a) 50%, var(--formiga-b) 50%),
    linear-gradient(0deg, var(--formiga-a) 50%, var(--formiga-b) 50%);
}

/* Superficie invertida: a faixa preta da ref 1. Troca o papel dos tokens, os componentes nao mudam. */
.inverso {
  --papel: #121212;
  --papel-2: #1C1C1A;
  --papel-3: #2A2A27;
  --branco: #1C1C1A;
  --tinta: #ECEBE7;
  --tinta-2: #B5B4AE;
  --tinta-3: #8F8E88;
  --linha: #3A3934;
  --linha-forte: #ECEBE7;
  --vermelho-tinta: #FF6A45;
  --sombra-p: 3px 3px 0 var(--tinta);
  --sombra: 6px 6px 0 var(--tinta);
  --sombra-g: 10px 10px 0 var(--tinta);
  background: var(--papel);
  color: var(--tinta);
}