*{
    direction: rtl;
}

::selection{
    background-color: #A72F3B;
    color: #fff;
}

@font-face {
    font-family: 'Estedad';
    src: url(../fonts/Estedad[wght\,kshd].woff2);
}

button,
input{
    outline: none;
}


:root {
  /* Primary */
  --color-primary: #A72F3B;
  --color-primary-tint-7: #B95562;
  --color-primary-tint-6: #CA8269;
  --color-primary-tint-5: #DCACB1;
  --color-primary-tint-4: #E5C1C4;
  --color-primary-tint-3: #EDD5D8;
  --color-primary-tint-2: #F6EAEB;
  --color-primary-tint-1: #FFFFFF;

  --color-primary-shade-7: #68262F;
  --color-primary-shade-6: #461C23;
  --color-primary-shade-5: #431318;
  --color-primary-shade-4: #320E12;
  --color-primary-shade-3: #21090C;
  --color-primary-shade-2: #110506;
  --color-primary-shade-1: #000000;

  /* Neutral */
  --gray-1: #FAFAFA;
  --gray-2: #F0F0F0;
  --gray-3: #EDEDED;
  --gray-4: #D6D6D6;
  --gray-5: #BCBCBC;
  --gray-6: #AFAFAF;
  --gray-7: #888889;
  --gray-8: #656565;
  --gray-9: #641C23;
  --gray-10: #242424;

  /* States */
  --color-error: #C30000;
  --color-error-light: #ED2E2E;
  --color-warning: #A9791C;
  --color-warning-light: #F48740;
  --color-success: #00966D;
  --color-success-light: #00BA88;

  /* State backgrounds */
  --color-error-bg: #FFF2F2;
  --color-warning-bg: #FFF8E1;
  --color-success-bg: #F3FDFA;

  /* Border radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;

  /* Typography */
  --font-family-base: 'Estedad', sans-serif;

  --heading-1: 800 44px/140% var(--font-family-base);
  --heading-2: 800 40px/140% var(--font-family-base);
  --heading-3: 800 32px/140% var(--font-family-base);
  --heading-4: 800 24px/140% var(--font-family-base);
  --heading-5: 800 20px/140% var(--font-family-base);
  --heading-6: 800 18px/140% var(--font-family-base);

  --caption-1: 400 14px/180% var(--font-family-base);
  --caption-3: 400 10px/180% var(--font-family-base);
  --caption-4: 200 10px/180% var(--font-family-base);

  --button-2: 400 16px/180% var(--font-family-base);

  --body-1: 200 20px/180% var(--font-family-base);
  --body-2: 200 18px/180% var(--font-family-base);
  --body-3: 200 16px/180% var(--font-family-base);
  --body-4: 200 14px/180% var(--font-family-base);
  --body-5: 200 12px/180% var(--font-family-base);
}


.container{
    margin: 0 auto;
    padding: 0.6rem;
    max-width: 1300px;
}

.heading-1{
    font: var(--heading-1);
}
.heading-2{
    font: var(--heading-2);
}
.heading-3{
    font: var(--heading-3);
}
.heading-4{
    font: var(--heading-4);
}
.heading-5{
    font: var(--heading-5);
}
.heading-6{
    font: var(--heading-6);
}

.caption-1{
    font: var(--caption-1);
}
.caption-3{
    font: var(--caption-3);
}
.caption-4{
    font: var(--caption-4);
}

.button-2{
    font: var(--button-2);
}

.body-1{
    font: var(--body-1);
}
.body-2{
    font: var(--body-2);
}
.body-3{
    font: var(--body-3);
}
.body-4{
    font: var(--body-4);
}
.body-5{
    font: var(--body-5);
}