:root {
  /* ==========================================
     Primary Colors
  ========================================== */
  --color-primary: #a72f3b;

  /* Primary Tints */
  --color-primary-tint-1: #ffffff;
  --color-primary-tint-2: #f6eaeb;
  --color-primary-tint-3: #edd5d8;
  --color-primary-tint-4: #e5c1c4;
  --color-primary-tint-5: #dcacb1;
  --color-primary-tint-6: #ca8289;
  --color-primary-tint-7: #b95962;

  /* Primary Shades */
  --color-primary-shade-1: #000000;
  --color-primary-shade-2: #110506;
  --color-primary-shade-3: #21090c;
  --color-primary-shade-4: #320e12;
  --color-primary-shade-5: #431318;
  --color-primary-shade-6: #641c23;
  --color-primary-shade-7: #86262f;

  /* ==========================================
     Neutral Colors
  ========================================== */
  --color-gray-1: #f8f8f8;
  --color-gray-2: #f0f0f0;
  --color-gray-3: #ededed;
  --color-gray-4: #d6d6d6;
  --color-gray-5: #cbcbcb;
  --color-gray-6: #afafaf;
  --color-gray-7: #898989;
  --color-gray-8: #656565;
  --color-gray-9: #4141c3;
  --color-gray-10: #242424;

  /* ==========================================
     State Colors
  ========================================== */
  --color-error: #c30000;
  --color-error-light: #ed2e2e;
  --color-error-bg: #fff2f2;

  --color-warning: #a9791c;
  --color-warning-light: #f4b740;
  --color-warning-bg: #fff8e1;

  --color-success: #00966d;
  --color-success-light: #00ba88;
  --color-success-bg: #f3fdfa;

  /* ==========================================
     Typography
  ========================================== */
  --text-color-primary: #434343;

  --font-primary: "Vazirmatn", "Vazir", sans-serif;

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --line-height-heading: 140%;
  --line-height-body: 180%;

  /* Headings */
  --fs-h1: 44px;
  --fs-h2: 40px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 18px;

  /* Body */
  --fs-body-1: 20px;
  --fs-body-2: 18px;
  --fs-body-3: 16px;
  --fs-body-4: 14px;
  --fs-body-5: 12px;
  --fs-body-light: 12px;

  /* ==========================================
     Extras
  ========================================== */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --transition: 0.3s ease;
}

/* ==========================================
   Headings
========================================== */

h1 {
  font-family: var(--font-primary);
  font-size: var(--fs-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

h2 {
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

h3 {
  font-family: var(--font-primary);
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

h4 {
  font-family: var(--font-primary);
  font-size: var(--fs-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

h5 {
  font-family: var(--font-primary);
  font-size: var(--fs-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

h6 {
  font-family: var(--font-primary);
  font-size: var(--fs-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}