:root{
    --title-font: 'DM Serif Display', serif;
    --subtitle-font: 'Raleway', sans-serif;
    --main-font: 'Work Sans', sans-serif;

    /* Back Stage Palette */
    --primary: #5D1E21;
    --primary-dark: #4D191C;
    --primary-light: #AD383E;
    --primary-hover: rgba(93, 30, 33, 0.06);

    --secondary: #154230;
    --secondary-dark: #0C271C;
    --secondary-light: #257450;
    --secondary-hover: rgba(21, 66, 48, 0.06);

    --tertiary: #A6824A;
    --tertiary-dark: #7B6137;
    --tertiary-light: #C0A272;
    --tertiary-hover: rgba(166, 130, 74, 0.06);

    --charcoal-black: #101111;
    --soft-cream: #E6E2DA;
    --white: #FFFFFF;

    --mud-palette-gray-default: #9E9E9E;
    --mud-palette-gray-light: #BDBDBD;
    --mud-palette-gray-lighter: #E0E0E0;
    --mud-palette-gray-dark: #757575;
    --mud-palette-gray-darker: #616161;

    --mud-palette-info: #2196F3;
    --mud-palette-info-darken: #0C80DF;
    --mud-palette-info-lighten: #47A7F5;
    --mud-palette-info-hover: rgba(33, 150, 243, 0.06);

    --mud-palette-success: #00C853;
    --mud-palette-success-darken: #00A344;
    --mud-palette-success-lighten: #00EB62;
    --mud-palette-success-hover: rgba(0, 200, 83, 0.06);

    --mud-palette-warning: #FF9800;
    --mud-palette-warning-darken: #D68100;
    --mud-palette-warning-lighten: #FFA724;
    --mud-palette-warning-hover: rgba(255, 152, 0, 0.06);

    --mud-palette-error: #F44336;
    --mud-palette-error-darken: #F21C0D;
    --mud-palette-error-lighten: #F66055;
    --mud-palette-error-hover: rgba(244, 67, 54, 0.06);
}

@font-face {
    font-family: 'DM Serif Display';
    src: url(fonts/DMSerifDisplay-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Raleway';
    src: url(fonts/Raleway-VariableFont_wght.ttf) format('truetype');
}

@font-face {
    font-family: 'Work Sans';
    src: url(fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
}

html, body {
    font-family: var(--main-font)
}

h1 {
    font-family: var(--title-font);
}

h2, h3, h4, h5, h6 {
    font-family: var(--subtitle-font);
}

/*Desktop (default, ≥ 391 px)*/

h1 {
  font-weight: 400; 
  font-size: 40px;
  line-height: 1.25; 
}

h2 {
  font-weight: 600; 
  font-size: 30px;
  line-height: 1.35; 
}

h3 {
  font-weight: 600;  
  font-size: 24px;
  line-height: 1.50; 
}

/* ---------- Body / UI text --------------------------------- */
p .subtitle-1 {
  font-weight: 500;  
  font-size: 18px;
  line-height: 1.80;  
}

p .subtitle-2 {
  font-weight: 500; 
  font-size: 16px;
  line-height: 1.75;  
}

p .body-1 {
  font-weight: 400; 
  font-size: 18px;
  line-height: 1.45; 
}

p .body-2 {
  font-weight: 400; 
  font-size: 16px;
  line-height: 1.50; 
}

/* ---------- Input / button -------------------------------- */
input,
textarea {
  font-weight: 400; 
  font-size: 18px;
  line-height: 1.35; 
}

button {
  font-weight: 500; 
  font-size: 16px;
  line-height: 1.75;  
}

/* ---------- Small‑text helpers ----------------------------- */
p .caption {
  font-weight: 400;  
  font-size: 14px;
  line-height: 1.45;  
}

p .overline {
  font-weight: 400; 
  font-size: 14px;
  line-height: 2.75; 
}

/*Typography – Mobile (≤ 390 px)*/
@media (max-width: 390px) {
  /* ---------- Header styles -------------------------------- */
  h1 {
    font-size: 32px;
    line-height: 1.25; 
  }

  h2 {
    font-size: 24px;
    line-height: 1.35; 
  }

  h3 {
    font-size: 20px;
    line-height: 1.35; 
  }

  /* ---------- Body / UI text ------------------------------ */
  p .subtitle-1 {
    font-size: 18px;
    line-height: 1.35; 
  }

  p .subtitle-2 {
    font-size: 14px;
    line-height: 1.45;  
  }

  p .body-1 {
    font-size: 16px;
    line-height: 1.40;  
  }

  p .body-2 {
    font-size: 14px;
    line-height: 1.45;  
  }

  input,
  textarea {
    font-size: 16px;
    line-height: 1.25; 
  }

  button {
    font-size: 14px;
    line-height: 1.75; 
  }

  p .caption {
    font-size: 12px;
    line-height: 1.35; 
  }

  p .overline {
    font-size: 12px;
    line-height: 2.70; 
  }
}