/* /assets/css/design-system-typography-vf.css */
@font-face{
  font-family:"Titles VF";
  src:url("/wp-content/themes/hello-theme-child/assets/fonts/TitlesVF[wght].woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Body VF";
  src:url("/wp-content/themes/hello-theme-child/assets/fonts/BodyVF[wght].woff2") format("woff2-variations");
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}
:root{
  --font-titles:"Titles VF", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body:"Body VF", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
html{font-family:var(--font-body);}
.h-hero,.hero-title{font-family:var(--font-titles);font-weight:700;}


/* design-system-typography-vf.css
   Variable Fonts, self-hosted (WOFF2-variations) for Hello Child
   Titles: Roboto Condensed; Body: Open Sans
*/

/* --- @font-face blocks (upright + italic) --- */
/* Roboto Condensed (Titles) */
@font-face{
  font-family:"Roboto Condensed";
  src:url("../fonts/RobotoCondensed-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Roboto Condensed";
  src:url("../fonts/RobotoCondensed-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* Open Sans (Body) */
@font-face{
  font-family:"Open Sans";
  src:url("../fonts/OpenSans-VariableFont_wdth,wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:75% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Open Sans";
  src:url("../fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:75% 125%;
  font-style:italic;
  font-display:swap;
}

/* Montserrat */
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* Nunito */
@font-face{
  font-family:"Nunito";
  src:url("../fonts/Nunito-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nunito";
  src:url("../fonts/Nunito-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* Rubik */
@font-face{
  font-family:"Rubik";
  src:url("../fonts/Rubik-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Rubik";
  src:url("../fonts/Rubik-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* Root variables and scale */
:root{
  --font-title:"Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Fluid sizes */
  --step--1: clamp(0.85rem, 0.81rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.3vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.10rem + 0.8vw, 1.5rem);
  --step-2:  clamp(1.563rem, 1.25rem + 1.4vw, 1.95rem);
  --step-3:  clamp(1.95rem, 1.45rem + 2.4vw, 2.44rem);
  --step-4:  clamp(2.44rem, 1.8rem + 3.6vw, 3.05rem);
  --step-5:  clamp(3.05rem, 2.1rem + 4.8vw, 3.81rem);
}

html{font-family:var(--font-body); font-size:16px; text-rendering:optimizeLegibility;}
body{font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;}

/* Headings */
h1,h2,h3,h4,h5,h6{font-family:var(--font-title); line-height:1.15; letter-spacing:0.005em; font-variation-settings:"wght" 650;}
h1{font-size:var(--step-5);}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-3);}
h4{font-size:var(--step-2);}
h5{font-size:var(--step-1);}
h6{font-size:var(--step-0);}

/* Utilities */
.title-strong{font-family:var(--font-title); font-variation-settings:"wght" 700;}
.body-strong{font-family:var(--font-body); font-variation-settings:"wght" 650;}
.text-xs{font-size:var(--step--1);}
.text-sm{font-size:var(--step-0);}
.text-lg{font-size:var(--step-1);}
.text-xl{font-size:var(--step-2);}
.hero-title{font-family:var(--font-title); font-size:var(--step-5); font-variation-settings:"wght" 720;}