@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("../assets/fontes/fraunces-variavel.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("../assets/fontes/fraunces-italico-variavel.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fontes/hanken-grotesk-variavel.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fontes/hanken-grotesk-italico-variavel.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fontes/geist-mono-variavel.woff2") format("woff2");
}


@font-face {
  font-family: "Fraunces Reserva";
  src: local("Palatino Linotype"), local("Palatino"), local("Georgia");
  size-adjust: 83.1%;
  ascent-override: 118%;
  descent-override: 31.3%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  
  --verde-profundo:  #1d5d57;  
  --verde-noite:     #0f2a27;  
  --verde-musgo:     #3b5841;  
  --salvia:          #9fb09a;  
  --salvia-clara:    #dfe6da;  
  --terracota:       #b5613f;  
  --terracota-escura:#8f4a2f;  
  --terracota-cheia: color-mix(in oklab, #b5613f 85%, #12211d); 
  --brasa:           #7a3b22;  
  --papel:           #f3eee4;  
  --areia:           #e6dccc;  
  --areia-escura:    #d3c4ad;  
  --madeira:         #8a6a4b;  
  --madeira-escura:  #5c4532;  
  --ouro:            #c9a86a;  
  --mar:             #123338;  
  --mar-profundo:    #0b2226;  
  --tinta:           #12211d;  

  
  --fundo:          var(--papel);
  --fundo-2:        var(--areia);            
  --texto:          var(--tinta);
  --texto-2:        color-mix(in oklab, var(--tinta) 62%, var(--papel)); 
  --linha:          color-mix(in oklab, var(--tinta) 16%, transparent);  
  --linha-forte:    color-mix(in oklab, var(--tinta) 38%, transparent);  
  --acento:         var(--terracota);        
  --acento-escuro:  var(--terracota-escura); 
  --acento-cheio:   var(--terracota-cheia);  
  --acento-texto:   var(--terracota-escura); 
  --sobre-acento:   var(--papel);            
  --marca:          var(--verde-profundo);   
  --foco:           var(--terracota);        
  --selecao:        var(--terracota);
  
  --marca-dagua:    color-mix(in oklab, var(--verde-noite) 22%, transparent);
  --grao-modo:      multiply;                
  --grao-opacidade: .06;

  
  --fonte-display: "Fraunces", "Fraunces Reserva", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fonte-texto:   "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-dados:   "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  
  --passo--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9rem);   
  --passo-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      
  --passo-1:  clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);      
  --passo-2:  clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);      
  --passo-3:  clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);        
  --passo-4:  clamp(2.5rem, 1.4rem + 5vw, 7rem);            
  --passo-5:  clamp(2.25rem, 0.5rem + 8vw, 9.5rem);         
  --passo-6:  clamp(3rem, 1rem + 12vw, 13rem);              

  --entrelinha-display: .95;   
  --entrelinha-titulo:  1.02;
  --entrelinha-texto:   1.55;
  --entrelinha-dados:   1;

  --espaco-letras-display: -0.01em;  
  --espaco-letras-titulo:  -0.015em;
  --espaco-letras-dados:   -0.03em;
  --espaco-letras-rotulo:   0.08em;  

  --peso-fino:    300;
  --peso-normal:  400;
  --peso-medio:   500;
  --peso-forte:   600;

  
  --fraunces-display: "SOFT" 40, "WONK" 0;
  --fraunces-enfase:  "SOFT" 60, "WONK" 1;

  
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: 1rem;
  --esp-4: 1.5rem;
  --esp-5: 2rem;
  --esp-6: 3rem;
  --esp-7: 4rem;
  --esp-8: 6rem;

  --secao:          clamp(5rem, 10vw, 10rem);   
  --secao-apertada: clamp(3rem, 6vw, 6rem);     
  --margem:         clamp(1rem, 4vw, 4rem);     
  --calha:          clamp(1rem, 2vw, 2rem);     
  --largura:        90rem;                      
  --largura-texto:  72rem;                      
  --medida:         62ch;                       
  --medida-curta:   38ch;                       
  --altura-cabecalho: 4.5rem;
  --altura-cabecalho-celular: 4rem;

  
  --raio-0:      0;
  --raio-fino:   2px;     
  --raio-pilula: 999px;   
  --raio-arco:   999px 999px 0 0; 

  --espessura-linha: 1px;

  
  --sombra-1: 0 1px 2px color-mix(in oklab, var(--tinta) 8%, transparent);
  --sombra-2: 0 12px 40px -12px color-mix(in oklab, var(--tinta) 28%, transparent);

  
  --suave:  cubic-bezier(.16, 1, .3, 1);
  --corte:  cubic-bezier(.77, 0, .18, 1);
  --saida:  cubic-bezier(.4, 0, 1, 1);

  --dur-toque:   300ms;
  --dur-cheio:   500ms;   
  --dur-entrada: 800ms;
  --dur-corte:   1100ms;
  --dur-menu:    450ms;
  --dur-tema:    400ms;   
  --escalonar:   70ms;    

  --deslocamento-entrada: 24px;  

  
  --z-grao:      1;
  --z-conteudo:  2;
  --z-flutuante: 40;
  --z-cabecalho: 50;
  --z-menu:      60;
  --z-pular:     70;
}




.tema-papel {
  --fundo: var(--papel);
  --fundo-2: var(--areia);
  --texto: var(--tinta);
  --texto-2: color-mix(in oklab, var(--tinta) 62%, var(--papel));
  --linha: color-mix(in oklab, var(--tinta) 16%, transparent);
  --linha-forte: color-mix(in oklab, var(--tinta) 38%, transparent);
  --acento: var(--terracota);
  --acento-escuro: var(--terracota-escura);
  --acento-cheio: var(--terracota-cheia);
  --acento-texto: var(--terracota-escura);
  --sobre-acento: var(--papel);
  --marca: var(--verde-profundo);
  --foco: var(--terracota);
  --marca-dagua: color-mix(in oklab, var(--verde-noite) 22%, transparent);
  --grao-modo: multiply;
  --grao-opacidade: .06;
  color-scheme: light;
}


.tema-areia {
  --fundo: var(--areia);
  --fundo-2: var(--papel);
  --texto: var(--tinta);
  --texto-2: var(--madeira-escura);
  --linha: color-mix(in oklab, var(--tinta) 18%, transparent);
  --linha-forte: color-mix(in oklab, var(--tinta) 40%, transparent);
  --acento: var(--terracota);
  --acento-escuro: var(--terracota-escura);
  --acento-cheio: var(--terracota-cheia);
  --acento-texto: var(--terracota-escura);
  --sobre-acento: var(--papel);
  --marca: var(--verde-profundo);
  --foco: var(--terracota);
  
  --marca-dagua: color-mix(in oklab, var(--verde-noite) 18%, transparent);
  --grao-modo: multiply;
  --grao-opacidade: .07;
  color-scheme: light;
}


.tema-salvia {
  --fundo: var(--salvia);
  --fundo-2: color-mix(in oklab, var(--salvia) 80%, var(--papel));
  --texto: var(--tinta);
  --texto-2: color-mix(in oklab, var(--tinta) 80%, var(--salvia)); 
  --linha: color-mix(in oklab, var(--tinta) 22%, transparent);
  --linha-forte: color-mix(in oklab, var(--tinta) 45%, transparent);
  --acento: var(--terracota);
  --acento-escuro: var(--terracota-escura);
  --acento-cheio: var(--terracota-cheia);
  --acento-texto: var(--verde-noite); 
  --sobre-acento: var(--papel);
  --marca: var(--verde-noite);
  --foco: var(--verde-noite); 
  --marca-dagua: color-mix(in oklab, var(--verde-noite) 22%, transparent);
  --grao-modo: multiply;
  --grao-opacidade: .08;
  color-scheme: light;
}


.tema-salvia-clara {
  --fundo: var(--salvia-clara);
  --fundo-2: var(--papel);
  --texto: var(--tinta);
  --texto-2: color-mix(in oklab, var(--tinta) 62%, var(--salvia-clara));
  --linha: color-mix(in oklab, var(--tinta) 16%, transparent);
  --linha-forte: color-mix(in oklab, var(--tinta) 38%, transparent);
  --acento: var(--terracota);
  --acento-escuro: var(--terracota-escura);
  --acento-cheio: var(--terracota-cheia);
  --acento-texto: var(--terracota-escura);
  --sobre-acento: var(--papel);
  --marca: var(--verde-profundo);
  --foco: var(--terracota);
  --marca-dagua: color-mix(in oklab, var(--tinta) 12%, transparent);
  --grao-modo: multiply;
  --grao-opacidade: .06;
  color-scheme: light;
}


.tema-noite {
  --fundo: var(--verde-noite);
  --fundo-2: var(--verde-musgo);
  --texto: var(--papel);
  --texto-2: color-mix(in oklab, var(--papel) 66%, var(--verde-noite));
  --linha: color-mix(in oklab, var(--papel) 18%, transparent);
  --linha-forte: color-mix(in oklab, var(--papel) 40%, transparent);
  --acento: var(--terracota);
  --acento-escuro: var(--terracota-escura);
  --acento-cheio: var(--terracota-cheia);
  --acento-texto: color-mix(in oklab, var(--terracota) 70%, var(--papel));
  --sobre-acento: var(--papel);
  --marca: var(--papel);
  --foco: var(--terracota);
  --marca-dagua: color-mix(in oklab, var(--papel) 12%, transparent);
  --grao-modo: soft-light;
  --grao-opacidade: .12;
  color-scheme: dark;
}


.tema-mar {
  --fundo: var(--mar);
  --fundo-2: var(--mar-profundo);
  --texto: var(--papel);
  --texto-2: color-mix(in oklab, var(--papel) 64%, var(--mar));
  --linha: color-mix(in oklab, var(--papel) 18%, transparent);
  --linha-forte: color-mix(in oklab, var(--papel) 40%, transparent);
  --acento: var(--terracota);
  --acento-escuro: var(--terracota-escura);
  --acento-cheio: var(--terracota-cheia);
  --acento-texto: color-mix(in oklab, var(--terracota) 70%, var(--papel));
  --sobre-acento: var(--papel);
  --marca: var(--papel);
  --foco: var(--terracota);
  --marca-dagua: color-mix(in oklab, var(--papel) 12%, transparent);
  --grao-modo: soft-light;
  --grao-opacidade: .12;
  color-scheme: dark;
}


.tema-brasa {
  --fundo: var(--brasa);
  --fundo-2: var(--terracota-escura);
  --texto: var(--papel);
  --texto-2: color-mix(in oklab, var(--papel) 80%, var(--brasa)); 
  --linha: color-mix(in oklab, var(--papel) 22%, transparent);
  --linha-forte: color-mix(in oklab, var(--papel) 45%, transparent);
  --acento: var(--papel);
  --acento-escuro: var(--areia);
  --acento-cheio: var(--papel);
  --acento-texto: var(--papel);
  --sobre-acento: var(--brasa);
  --marca: var(--papel);
  --foco: var(--papel);
  --marca-dagua: color-mix(in oklab, var(--papel) 12%, transparent);
  --grao-modo: soft-light;
  --grao-opacidade: .14;
  color-scheme: dark;
}