/*
Theme Name: Labcraft Boutique
Theme URI: https://labcraftboutique.com
Description: Child theme of Kadence implementing the Labcraft Boutique "Atelier" design system.
Author: Labcraft
Template: kadence
Version: 1.0.0
Text Domain: labcraft
*/

/* ---------------------------------------------------------
   1. Self-hosted typefaces (SIL Open Font License)
   --------------------------------------------------------- */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/cormorant-garamond.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("fonts/dm-sans.woff2") format("woff2");
  font-weight:100 1000; font-style:normal; font-display:swap;
}

/* ---------------------------------------------------------
   2. Design tokens -> Kadence global palette
      Rule from the design system: never pure black or white.
   --------------------------------------------------------- */
:root{
  --lc-parchment:#FDF6EC;
  --lc-cream:#F5EDE0;
  --lc-leather:#6B4226;
  --lc-charcoal:#2A2520;
  --lc-gold:#C9A84C;
  --lc-sage:#8E9E89;
  --lc-tan:#A0714F;
  --lc-blush:#E8D5C0;

  --lc-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --lc-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

:root,
body,
.wp-site-blocks{
  --global-palette1:#6B4226;  /* leather  - primary, buttons, links */
  --global-palette2:#C9A84C;  /* gold     - highlight, sale, accents */
  --global-palette3:#6B4226;  /* leather  - headings */
  --global-palette4:#2A2520;  /* charcoal - body text */
  --global-palette5:#8E9E89;  /* sage     - muted text, tags */
  --global-palette6:#E8D5C0;  /* blush    - borders, dividers */
  --global-palette7:#F5EDE0;  /* cream    - alternating sections */
  --global-palette8:#FDF6EC;  /* parchment- page base */
  --global-palette9:#FDF6EC;  /* parchment- base (never #FFF) */

  --global-body-font-family:var(--lc-body);
  --global-heading-font-family:var(--lc-display);
}

body{
  background-color:var(--lc-parchment);
  color:var(--lc-charcoal);
  font-family:var(--lc-body);
  line-height:1.68;               /* design system: 1.65-1.7 */
}

h1,h2,h3,h4,.entry-title,.woocommerce-loop-product__title,.product_title{
  font-family:var(--lc-display);
  font-weight:400;
  color:var(--lc-leather);
}
h1{font-size:clamp(32px,4.6vw,44px);}
h2{font-size:clamp(25px,3.2vw,30px);}
h3{font-size:clamp(21px,2.6vw,24px);}

/* body copy stays readable: ~65-70 characters */
.entry-content p{max-width:68ch;}

/* nav + buttons: tracked-out uppercase per the type scale */
.main-navigation .menu-container > ul > li > a,
.header-navigation ul li a{
  font-family:var(--lc-body);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.wp-block-button__link,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  font-family:var(--lc-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-radius:0;               /* editorial, not rounded */
}

/* prices are data - line them up */
.woocommerce .price,
.woocommerce-Price-amount{
  font-family:var(--lc-body);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--lc-leather);
}

/* product tags / badges */
.woocommerce span.onsale{
  background:var(--lc-gold);
  color:var(--lc-charcoal);
  border-radius:0;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------------------------------------------------------
   3. Header wordmark — design system: Cormorant, tracked,
      uppercase, leather brown, on a parchment header.
   --------------------------------------------------------- */
.site-branding .site-title,
.site-title a,
.site-branding a.brand{
  font-family:var(--lc-display);
  font-weight:400;
  font-size:clamp(20px,3vw,30px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lc-leather);
  line-height:1;
}
.site-branding .site-description{
  font-family:var(--lc-body);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lc-sage);
}
#main-header,
.site-header-wrap,
.site-header-row{
  background-color:var(--lc-parchment);
}
.site-header-wrap{border-bottom:1px solid var(--lc-blush);}