/*
Theme Name: Storefront Hakenogen
Template: storefront
Author: Studio Hakenogen
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --cream:#F5F0E4;
  --cream-deep:#EBE1CC;
  --ink:#2B2A20;
  --forest:#3E5A3C;
  --forest-deep:#2A3E29;
  --olive:#6B7A4F;
  --terracotta:#B5652F;
  --terracotta-deep:#8C4A24;
  --mustard:#D3A03E;
}

body{
  background:var(--cream) !important;
  color:var(--ink) !important;
  font-family:'Work Sans',sans-serif !important;
}

h1,h2,h3,h4,.site-title a{
  font-family:'Fraunces',serif !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
}

.site-header{
  background:var(--cream) !important;
  border-bottom:1px solid #2B2A2022;
}

.woocommerce-message, .woocommerce-info{
  border-top-color:var(--forest) !important;
}

.button, button, input[type="submit"], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background-color:var(--ink) !important;
  color:var(--cream) !important;
  border-radius:100px !important;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:0.85rem;
  border:none !important;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{
  background-color:var(--terracotta-deep) !important;
}

.price, .woocommerce-Price-amount{
  font-family:'Space Mono',monospace !important;
  color:var(--terracotta-deep) !important;
}

.storefront-primary-navigation{
  background:var(--cream) !important;
}
.main-navigation ul li a{
  color:var(--ink) !important;
  text-transform:uppercase;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.03em;
}
.main-navigation ul li a:hover{ color:var(--terracotta) !important; }

.storefront-sale-flash, .onsale{
  background:var(--terracotta) !important;
}

footer.site-footer, footer.site-footer a{
  background:var(--ink) !important;
  color:var(--cream) !important;
}