/* Waafir Design System - Typography */

:root {
  /* Typography System - Font Family */
  --font-family-primary: "Outfit", sans-serif;
  --font-family-secondary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Typography System - Heading Styles */
  /* Display L */
  --display-l-font-size: 64px;
  --display-l-line-height: 68px;
  --display-l-letter-spacing: 0%;
  --display-l-font-weight: 400;

  /* Display M */
  --display-m-font-size: 52px;
  --display-m-line-height: 60px;
  --display-m-letter-spacing: 0%;
  --display-m-font-weight: 400;

  /* Headline xL */
  --headline-xl-font-size: 40px;
  --headline-xl-line-height: 48px;
  --headline-xl-letter-spacing: 0%;
  --headline-xl-font-weight: 400;

  /* Headline L */
  --headline-l-font-size: 36px;
  --headline-l-line-height: 44px;
  --headline-l-letter-spacing: 0%;
  --headline-l-font-weight: 400;

  /* Headline M */
  --headline-m-font-size: 32px;
  --headline-m-line-height: 40px;
  --headline-m-letter-spacing: 0%;
  --headline-m-font-weight: 400;

  /* Headline S */
  --headline-s-font-size: 28px;
  --headline-s-line-height: 38px;
  --headline-s-letter-spacing: 0%;
  --headline-s-font-weight: 400;

  /* Headline xS */
  --headline-xs-font-size-large: 24px;
  --headline-xs-font-size: 22px;
  --headline-xs-line-height: 30px;
  --headline-xs-letter-spacing: 0%;
  --headline-xs-font-weight: 400;

  /* Headline xxS */
  --headline-xxs-font-size: 20px;
  --headline-xxs-line-height: 28px;
  --headline-xxs-letter-spacing: 0%;
  --headline-xxs-font-weight: 400;

  /* Typography System - Body Text Styles */
  /* Text xL */
  --text-xl-font-size: 18px;
  --text-xl-line-height: 28px;
  --text-xl-letter-spacing: 0%;
  --text-xl-font-weight: 400;

  /* Text L */
  --text-l-font-size: 16px;
  --text-l-line-height: 24px;
  --text-l-letter-spacing: 0%;
  --text-l-font-weight: 400;

  /* Text M */
  --text-m-font-size: 15px;
  --text-m-line-height: 22px;
  --text-m-letter-spacing: 0%;
  --text-m-font-weight: 400;

  /* Text S */
  --text-s-font-size: 14px;
  --text-s-line-height: 20px;
  --text-s-letter-spacing: 0%;
  --text-s-font-weight: 400;

  /* Text xS */
  --text-xs-font-size: 12px;
  --text-xs-line-height: 18px;
  --text-xs-letter-spacing: 0%;
  --text-xs-font-weight: 400;

  /* Font Weight Variables */
  --font-weight-regular: 400;
  --font-weight-bold: 700;
}

/* Typography Utility Classes */

/* Font Family Utilities */
.font-primary { font-family: var(--font-family-primary); }
.font-secondary { font-family: var(--font-family-secondary); }

/* Font Weight Utilities */
.font-weight-regular { font-weight: 400; --override-font-weight: 400; }
.font-weight-medium { font-weight: 500; --override-font-weight: 500; }
.font-weight-semibold { font-weight: 600; --override-font-weight: 600; }
.font-weight-bold { font-weight: 700; --override-font-weight: 700; }

/* Display Typography Classes */
.display-l {
  font-family: var(--font-family-primary);
  font-size: var(--display-l-font-size);
  line-height: var(--display-l-line-height);
  letter-spacing: var(--display-l-letter-spacing);
  font-weight: var(--override-font-weight, var(--display-l-font-weight));
}

.display-m {
  font-family: var(--font-family-primary);
  font-size: var(--display-m-font-size);
  line-height: var(--display-m-line-height);
  letter-spacing: var(--display-m-letter-spacing);
  font-weight: var(--override-font-weight, var(--display-m-font-weight));
}

/* Headline Typography Classes */
.headline-xl {
  font-family: var(--font-family-primary);
  font-size: var(--headline-xl-font-size);
  line-height: var(--headline-xl-line-height);
  letter-spacing: var(--headline-xl-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-xl-font-weight));
}

.headline-l {
  font-family: var(--font-family-primary);
  font-size: var(--headline-l-font-size);
  line-height: var(--headline-l-line-height);
  letter-spacing: var(--headline-l-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-l-font-weight));
}

.headline-m {
  font-family: var(--font-family-primary);
  font-size: var(--headline-m-font-size);
  line-height: var(--headline-m-line-height);
  letter-spacing: var(--headline-m-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-m-font-weight));
}

.headline-s {
  font-family: var(--font-family-primary);
  font-size: var(--headline-s-font-size);
  line-height: var(--headline-s-line-height);
  letter-spacing: var(--headline-s-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-s-font-weight));
}

.headline-xs {
  font-family: var(--font-family-primary);
  font-size: var(--headline-xs-font-size);
  line-height: var(--headline-xs-line-height);
  letter-spacing: var(--headline-xs-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-xs-font-weight));
}

.headline-xs {
  font-family: var(--font-family-primary);
  font-size: var(--headline-xs-font-size-large);
  line-height: var(--headline-xs-line-height);
  letter-spacing: var(--headline-xs-letter-spacing);
  font-weight: var(--font-weight-bold);

}

.headline-xxs {
  font-family: var(--font-family-primary);
  font-size: var(--headline-xxs-font-size);
  line-height: var(--headline-xxs-line-height);
  letter-spacing: var(--headline-xxs-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-xxs-font-weight));
}

/* Body Text Typography Classes */
.text-xl {
  font-family: var(--font-family-primary);
  font-size: var(--text-xl-font-size);
  line-height: var(--text-xl-line-height);
  letter-spacing: var(--text-xl-letter-spacing);
  font-weight: var(--override-font-weight, var(--text-xl-font-weight));
}

.text-l {
  font-family: var(--font-family-primary);
  font-size: var(--text-l-font-size);
  line-height: var(--text-l-line-height);
  letter-spacing: var(--text-l-letter-spacing);
  font-weight: var(--override-font-weight, var(--text-l-font-weight));
}

.text-m {
  font-family: var(--font-family-primary);
  font-size: var(--text-m-font-size);
  line-height: var(--text-m-line-height);
  letter-spacing: var(--text-m-letter-spacing);
  font-weight: var(--override-font-weight, var(--text-m-font-weight));
}

.text-s {
  font-family: var(--font-family-primary);
  font-size: var(--text-s-font-size);
  line-height: var(--text-s-line-height);
  letter-spacing: var(--text-s-letter-spacing);
  font-weight: var(--override-font-weight, var(--text-s-font-weight));
}

.text-xs {
  font-family: var(--font-family-primary);
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
  letter-spacing: var(--text-xs-letter-spacing);
  font-weight: var(--override-font-weight, var(--text-xs-font-weight));
}

/* Semantic HTML Element Typography */
h1, .h1 {
  font-family: var(--font-family-primary);
  font-size: var(--headline-xl-font-size);
  line-height: var(--headline-xl-line-height);
  letter-spacing: var(--headline-xl-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-xl-font-weight));
}

h2, .h2 {
  font-family: var(--font-family-primary);
  font-size: var(--headline-l-font-size);
  line-height: var(--headline-l-line-height);
  letter-spacing: var(--headline-l-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-l-font-weight));
}

h3, .h3 {
  font-family: var(--font-family-primary);
  font-size: var(--headline-m-font-size);
  line-height: var(--headline-m-line-height);
  letter-spacing: var(--headline-m-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-m-font-weight));
}

h4, .h4 {
  font-family: var(--font-family-primary);
  font-size: var(--headline-s-font-size);
  line-height: var(--headline-s-line-height);
  letter-spacing: var(--headline-s-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-s-font-weight));
}

h5, .h5 {
  font-family: var(--font-family-primary);
  font-size: var(--headline-xs-font-size);
  line-height: var(--headline-xs-line-height);
  letter-spacing: var(--headline-xs-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-xs-font-weight));
}

h6, .h6 {
  font-family: var(--font-family-primary);
  font-size: var(--headline-xxs-font-size);
  line-height: var(--headline-xxs-line-height);
  letter-spacing: var(--headline-xxs-letter-spacing);
  font-weight: var(--override-font-weight, var(--headline-xxs-font-weight));
}

/* Default body text styling */
body {
  font-family: var(--font-family-primary);
  font-size: var(--text-m-font-size);
  line-height: var(--text-m-line-height);
  letter-spacing: var(--text-m-letter-spacing);
  font-weight: var(--override-font-weight, var(--text-m-font-weight));
}