
:root {
  /* Fonts */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;

  /* Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-primary: #29352F;
  --color-secondary: #5F4815;
  --color-accent: #7C6A41;
  --color-muted: #626B61;
  --color-background: #F2F1EC;
  --color-cream: #F5EADA;
  --color-highlight: #FBB004;
  --color-danger: #A55F4F;

  /* Heading Sizes */
  --fs-h1: 105px;
  --fs-h2: 65px;
  --fs-h3: 50px; 
  --fs-h4: 45px;
  --fs-h5: 35px;
  --fs-h6: 27px;
  --fs-heading-small: 25px;

  /* Body Sizes */
  --fs-text-30: 30px;
  --fs-text-22: 22px;
  --fs-text-20: 20px;
  --fs-text-18: 18px;
  --fs-text-16: 16px;
  --fs-text-14: 14px;
}

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
  padding-inline: 15px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-text-16);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-primary);
}

/* Common Heading Styles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.text-25 {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0;
}

/* Headings */
h1, .h1 {
  font-size: var(--fs-h1);
  line-height: 1.18;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: 1.2;
}

h5, .h5 {
  font-size: var(--fs-h5);
  line-height: 1.2;
}

h6, .h6 {
  font-size: var(--fs-h6);
  line-height: 1.2;
}

.text-25 {
  font-size: var(--fs-heading-small);
  line-height: 1.2;
}

/* Body Typography */
.text-30,
.text-22,
.text-20,
.text-18,
.text-16,
.text-14 {
  font-family: var(--font-body);
  font-weight: 400;
  margin: 0;
}

.text-30 {
  font-size: var(--fs-text-30);
  line-height: 1.65;
}

.text-22 {
  font-size: var(--fs-text-22);
  line-height: 1.65;
}

.text-20 {
  font-size: var(--fs-text-20);
  line-height: 1.65;
}

.text-18 {
  font-size: var(--fs-text-18);
  line-height: 1.65;
}

.text-16 {
  font-size: var(--fs-text-16);
  line-height: 1.65;
}

.text-14 {
  font-size: var(--fs-text-14);
  line-height: 1.57;
}

/* Font Weights */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Line Height Utilities */
.lh-1 { line-height: 1; }
.lh-12 { line-height: 1.2; }
.lh-13 { line-height: 1.3; }
.lh-14 { line-height: 1.4; }
.lh-15 { line-height: 1.5; }
.lh-165 { line-height: 1.65; }
.lh-2 { line-height: 2; }

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-muted); }
.text-white { color: var(--color-white); }

/* Responsive: 1700px */
@media (max-width: 1700px) {
  :root {
    --fs-h1: 96px;
    --fs-h2: 60px;
    --fs-h3: 48px;
    --fs-h4: 42px;
    --fs-h5: 34px;
    --fs-h6: 27px;
    --fs-heading-small: 25px;

    --fs-text-30: 28px;
    --fs-text-22: 22px;
    --fs-text-20: 20px;
    --fs-text-18: 18px;
    --fs-text-16: 16px;
    --fs-text-14: 14px;
  }
}

/* Responsive: 1400px */
@media (max-width: 1400px) {
  :root {
    --fs-h1: 84px;
    --fs-h2: 54px;
    --fs-h3: 44px;
    --fs-h4: 38px;
    --fs-h5: 32px;
    --fs-h6: 26px;
    --fs-heading-small: 24px;

    --fs-text-30: 26px;
    --fs-text-22: 21px;
    --fs-text-20: 19px;
    --fs-text-18: 18px;
  }
}

/* Responsive: 1200px */
@media (max-width: 1200px) {
  :root {
    --fs-h1: 70px;
    --fs-h2: 48px;
    --fs-h3: 40px;
    --fs-h4: 35px;
    --fs-h5: 30px;
    --fs-h6: 25px;
    --fs-heading-small: 23px;

    --fs-text-30: 24px;
    --fs-text-22: 20px;
    --fs-text-20: 18px;
    --fs-text-18: 17px;
  }
}

/* Responsive: 991px */
@media (max-width: 991px) {
  :root {
    --fs-h1: 58px;
    --fs-h2: 44px;
    --fs-h3: 36px;
    --fs-h4: 32px;
    --fs-h5: 28px;
    --fs-h6: 24px;
    --fs-heading-small: 22px;

    --fs-text-30: 22px;
    --fs-text-22: 19px;
    --fs-text-20: 18px;
    --fs-text-18: 17px;
  }
  h2 em{
    display: inline;
  }
}

/* Responsive: 767px */
@media (max-width: 767px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 38px;
    --fs-h3: 32px;
    --fs-h4: 29px;
    --fs-h5: 26px;
    --fs-h6: 23px;
    --fs-heading-small: 21px;

    --fs-text-30: 21px;
    --fs-text-22: 18px;
    --fs-text-20: 17px;
    --fs-text-18: 16px;
    --fs-text-16: 16px;
    --fs-text-14: 14px;
  }
}

/* Responsive: 575px */
@media (max-width: 575px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-h3: 30px;
    --fs-h4: 27px;
    --fs-h5: 25px;
    --fs-h6: 22px;
    --fs-heading-small: 20px;

    --fs-text-30: 20px;
    --fs-text-22: 18px;
    --fs-text-20: 17px;
    --fs-text-18: 16px;
    --fs-text-16: 16px;
    --fs-text-14: 14px;
  }
}
