/* Each style changes colors, typography, image shape and component finishes. */ html[data-theme="sand"] {
  --bg:#fbf8f0;
  --ink:#42372c;
  --accent:#77583d;
  --muted:#746757;
  --soft:#eee6d7;
  --line:#d8cbbb;
  --display:Georgia,serif;
  --radius:30px;
  --image-radius:180px 180px 180px 8px
}

 html[data-theme="sand"] h1 {
  font-size:clamp(51px,5vw,72px);
  line-height:1.13;
  letter-spacing:-3px
}

 html[data-theme="sand"] h2 {
  font-size:clamp(40px,3.8vw,54px);
  line-height:1.13
}

 html[data-theme="sand"] .brand>span {
  font-size:30px
}

 html[data-theme="sand"] .category h3 {
  font-size:28px
}

 html[data-theme="sage"] {
  --bg:#f6f8f4;
  --ink:#243d32;
  --accent:#365b4b;
  --muted:#586c60;
  --soft:#e5ebe2;
  --line:#c9d5c8;
  --display:'DM Sans',Arial,sans-serif;
  --radius:6px;
  --image-radius:8px 100px 8px 8px
}

 html[data-theme="sage"] h1 {
  font-size:clamp(50px,5vw,72px);
  line-height:1.1;
  letter-spacing:-3px;
  font-weight:450
}

 html[data-theme="sage"] h2 {
  font-size:clamp(38px,3.8vw,54px);
  line-height:1.15;
  font-weight:450
}

 html[data-theme="sage"] .brand>span {
  font-size:29px;
  font-weight:500
}

 html[data-theme="sage"] .category h3 {
  font-size:27px;
  letter-spacing:-1px
}

 html[data-theme="sage"] .hero-visual {
  transform:none
}

 @media(max-width:760px) {
  html[data-theme="sand"] h1,html[data-theme="sage"] h1 {
    font-size:clamp(32px,10vw,53px)
  }

  html[data-theme="sand"] .category h3,html[data-theme="sage"] .category h3 {
    font-size:23px
  }
}