/* ================================
   Typography System
   Desktop + Mobile
   ================================ */

:root {
  /* Font Family */
  --font-primary: "IRANYekanX", "IRANYekan", "Vazirmatn", "Tahoma", sans-serif;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --fw-extra-black: 950;

  /* ================================
     Desktop Typography Variables
     ================================ */

  /* Display */
  --fs-d1: 64px;
  --lh-d1: 76px;
  --fw-d1: var(--fw-extra-black);

  --fs-d2: 56px;
  --lh-d2: 68px;
  --fw-d2: var(--fw-black);

  --fs-d3: 48px;
  --lh-d3: 58px;
  --fw-d3: var(--fw-black);

  /* Header */
  --fs-h1: 36px;
  --lh-h1: 44px;
  --fw-h1: var(--fw-bold);

  --fs-h2: 31px;
  --lh-h2: 38px;
  --fw-h2: var(--fw-medium);

  --fs-h3: 27px;
  --lh-h3: 32px;
  --fw-h3: var(--fw-bold);

  --fs-h4: 24px;
  --lh-h4: 28px;
  --fw-h4: var(--fw-bold);

  --fs-h5: 21px;
  --lh-h5: 26px;
  --fw-h5: var(--fw-bold);

  --fs-h6: 18px;
  --lh-h6: 22px;
  --fw-h6: var(--fw-bold);

  --fs-h7: 16px;
  --lh-h7: 22px;
  --fw-h7: var(--fw-bold);

  /* Button */
  --fs-button-1: 18px;
  --lh-button-1: 28px;
  --fw-button-1: var(--fw-medium);

  --fs-button-2: 16px;
  --lh-button-2: 24px;
  --fw-button-2: var(--fw-medium);

  --fs-button-3: 14px;
  --lh-button-3: 20px;
  --fw-button-3: var(--fw-medium);

  /* Body */
  --fs-body-1: 24px;
  --lh-body-1: 40px;
  --fw-body-1: var(--fw-regular);

  --fs-body-2: 20px;
  --lh-body-2: 34px;
  --fw-body-2: var(--fw-regular);

  --fs-body-3: 16px;
  --lh-body-3: 28px;
  --fw-body-3: var(--fw-regular);

  --fs-body-4: 14px;
  --lh-body-4: 24px;
  --fw-body-4: var(--fw-regular);

  /* Caption */
  --fs-caption-1: 14px;
  --lh-caption-1: 20px;
  --fw-caption-1: var(--fw-regular);

  --fs-caption-2: 12px;
  --lh-caption-2: 18px;
  --fw-caption-2: var(--fw-regular);

  --fs-caption-3: 10px;
  --lh-caption-3: 16px;
  --fw-caption-3: var(--fw-regular);
}

/* ================================
   Mobile Typography Variables
   max-width: 767px
   ================================ */

@media (max-width: 767px) {
:root {
    /* Display */
    --fs-d1: 48px;
    --lh-d1: 58px;
    --fw-d1: var(--fw-black);

    --fs-d2: 40px;
    --lh-d2: 50px;
    --fw-d2: var(--fw-black);

    --fs-d3: 34px;
    --lh-d3: 32px;
    --fw-d3: var(--fw-black);

    /* Header */
    --fs-h1: 30px;
    --lh-h1: 36px;
    --fw-h1: var(--fw-bold);

    --fs-h2: 26px;
    --lh-h2: 32px;
    --fw-h2: var(--fw-bold);

    --fs-h3: 22px;
    --lh-h3: 28px;
    --fw-h3: var(--fw-bold);

    --fs-h4: 20px;
    --lh-h4: 26px;
    --fw-h4: var(--fw-bold);

    --fs-h5: 18px;
    --lh-h5: 24px;
    --fw-h5: var(--fw-bold);

    --fs-h6: 16px;
    --lh-h6: 22px;
    --fw-h6: var(--fw-bold);

    --fs-h7: 16px;
    --lh-h7: 22px;
    --fw-h7: var(--fw-bold);

    /* Button */
    --fs-button-1: 18px;
    --lh-button-1: 28px;
    --fw-button-1: var(--fw-medium);

    --fs-button-2: 16px;
    --lh-button-2: 24px;
    --fw-button-2: var(--fw-medium);

    --fs-button-3: 14px;
    --lh-button-3: 20px;
    --fw-button-3: var(--fw-medium);

    /* Body */
    --fs-body-1: 20px;
    --lh-body-1: 32px;
    --fw-body-1: var(--fw-regular);

    --fs-body-2: 18px;
    --lh-body-2: 28px;
    --fw-body-2: var(--fw-regular);

    --fs-body-3: 16px;
    --lh-body-3: 26px;
    --fw-body-3: var(--fw-regular);

    --fs-body-4: 14px;
    --lh-body-4: 22px;
    --fw-body-4: var(--fw-regular);

    /* Caption */
    --fs-caption-1: 12px;
    --lh-caption-1: 18px;
    --fw-caption-1: var(--fw-regular);

    --fs-caption-2: 10px;
    --lh-caption-2: 16px;
    --fw-caption-2: var(--fw-regular);

    --fs-caption-3: 10px;
    --lh-caption-3: 16px;
    --fw-caption-3: var(--fw-regular);
  }
}

/* ================================
   Base
   ================================ */

html {
  font-family: var(--font-primary);
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  direction: rtl;
  text-align: right;
}

/* برای حذف margin پیش‌فرض در متن‌ها */
.text-reset {
  margin: 0;
}

/* ================================
   Display Classes
   ================================ */

.text-d1,
.typography-d1 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-d1);
  line-height: var(--lh-d1);
  font-weight: var(--fw-d1);
}

.text-d2,
.typography-d2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-d2);
  line-height: var(--lh-d2);
  font-weight: var(--fw-d2);
}

.text-d3,
.typography-d3 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-d3);
  line-height: var(--lh-d3);
  font-weight: var(--fw-d3);
}

/* ================================
   Header Classes
   ================================ */

.text-h1,
.typography-h1 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
}

.text-h2,
.typography-h2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
}

.text-h3,
.typography-h3 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
}

.text-h4,
.typography-h4 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-h4);
}

.text-h5,
.typography-h5 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-h5);
}

.text-h6,
.typography-h6 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  font-weight: var(--fw-h6);
}

.text-h7,
.typography-h7 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h7);
  line-height: var(--lh-h7);
  font-weight: var(--fw-h7);
}

/* ================================
   Button Classes
   ================================ */

.text-button-1,
.typography-button-1 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-button-1);
  line-height: var(--lh-button-1);
  font-weight: var(--fw-button-1);
}

.text-button-2,
.typography-button-2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-button-2);
  line-height: var(--lh-button-2);
  font-weight: var(--fw-button-2);
}

.text-button-3,
.typography-button-3 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-button-3);
  line-height: var(--lh-button-3);
  font-weight: var(--fw-button-3);
}

/* نام‌های کوتاه برای Button */
.text-btn-1 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-button-1);
  line-height: var(--lh-button-1);
  font-weight: var(--fw-button-1);
}

.text-btn-2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-button-2);
  line-height: var(--lh-button-2);
  font-weight: var(--fw-button-2);
}

.text-btn-3 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-button-3);
  line-height: var(--lh-button-3);
  font-weight: var(--fw-button-3);
}

/* ================================
   Body Classes
   ================================ */

.text-body-1,
.typography-body-1 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body-1);
  line-height: var(--lh-body-1);
  font-weight: var(--fw-body-1);
}

.text-body-2,
.typography-body-2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body-2);
  line-height: var(--lh-body-2);
  font-weight: var(--fw-body-2);
}

.text-body-3,
.typography-body-3 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body-3);
  line-height: var(--lh-body-3);
  font-weight: var(--fw-body-3);
}

.text-body-4,
.typography-body-4 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body-4);
  line-height: var(--lh-body-4);
  font-weight: var(--fw-body-4);
}

.text-body-lg-medium,
.typography-lg-medium {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body-3);
  line-height: 160%;
  font-weight: var(--fw-regular);
}

.text-body-md-medium,
.typography-md-medium {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body-4);
  line-height: 160%;
  font-weight: var(--fw-regular);
}

/* ================================
   Caption Classes
   ================================ */

.text-caption-1,
.typography-caption-1 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  font-weight: var(--fw-caption-1);
}

.text-caption-2,
.typography-caption-2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-caption-2);
  line-height: var(--lh-caption-2);
  font-weight: var(--fw-caption-2);
}

.text-caption-3,
.typography-caption-3 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-caption-3);
  line-height: var(--lh-caption-3);
  font-weight: var(--fw-caption-3);
}

/* ================================
   Mobile-Only Typography Helpers
   max-width: 767px
   ================================ */

@media (max-width: 767px) {
  .text-reset--mobile {
    margin: 0;
  }

  .text-d1--mobile,
  .typography-d1--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-d1);
    line-height: var(--lh-d1);
    font-weight: var(--fw-d1);
  }

  .text-d2--mobile,
  .typography-d2--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-d2);
    line-height: var(--lh-d2);
    font-weight: var(--fw-d2);
  }

  .text-d3--mobile,
  .typography-d3--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-d3);
    line-height: var(--lh-d3);
    font-weight: var(--fw-d3);
  }

  .text-h1--mobile,
  .typography-h1--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-h1);
  }

  .text-h2--mobile,
  .typography-h2--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-h2);
  }

  .text-h3--mobile,
  .typography-h3--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-h3);
  }

  .text-h4--mobile,
  .typography-h4--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    font-weight: var(--fw-h4);
  }

  .text-h5--mobile,
  .typography-h5--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    font-weight: var(--fw-h5);
  }

  .text-h6--mobile,
  .typography-h6--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    font-weight: var(--fw-h6);
  }

  .text-h7--mobile,
  .typography-h7--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-h7);
    line-height: var(--lh-h7);
    font-weight: var(--fw-h7);
  }

  .text-button-1--mobile,
  .typography-button-1--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-button-1);
    line-height: var(--lh-button-1);
    font-weight: var(--fw-button-1);
  }

  .text-button-2--mobile,
  .typography-button-2--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-button-2);
    line-height: var(--lh-button-2);
    font-weight: var(--fw-button-2);
  }

  .text-button-3--mobile,
  .typography-button-3--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-button-3);
    line-height: var(--lh-button-3);
    font-weight: var(--fw-button-3);
  }

  .text-btn-1--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-button-1);
    line-height: var(--lh-button-1);
    font-weight: var(--fw-button-1);
  }

  .text-btn-2--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-button-2);
    line-height: var(--lh-button-2);
    font-weight: var(--fw-button-2);
  }

  .text-btn-3--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-button-3);
    line-height: var(--lh-button-3);
    font-weight: var(--fw-button-3);
  }

  .text-body-1--mobile,
  .typography-body-1--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-body-1);
    line-height: var(--lh-body-1);
    font-weight: var(--fw-body-1);
  }

  .text-body-2--mobile,
  .typography-body-2--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-body-2);
    line-height: var(--lh-body-2);
    font-weight: var(--fw-body-2);
  }

  .text-body-3--mobile,
  .typography-body-3--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-body-3);
    line-height: var(--lh-body-3);
    font-weight: var(--fw-body-3);
  }

  .text-body-4--mobile,
  .typography-body-4--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-body-4);
    line-height: var(--lh-body-4);
    font-weight: var(--fw-body-4);
  }

  .text-body-lg-medium--mobile,
  .typography-lg-medium--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-body-3);
    line-height: 160%;
    font-weight: var(--fw-regular);
  }

  .text-body-md-medium--mobile,
  .typography-md-medium--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-body-4);
    line-height: 160%;
    font-weight: var(--fw-regular);
  }

  .text-caption-1--mobile,
  .typography-caption-1--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-caption-1);
    line-height: var(--lh-caption-1);
    font-weight: var(--fw-caption-1);
  }

  .text-caption-2--mobile,
  .typography-caption-2--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-caption-2);
    line-height: var(--lh-caption-2);
    font-weight: var(--fw-caption-2);
  }

  .text-caption-3--mobile,
  .typography-caption-3--mobile {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-caption-3);
    line-height: var(--lh-caption-3);
    font-weight: var(--fw-caption-3);
  }
}