@import "tailwindcss";
/* @custom-variant dark (&:where(.dark, .dark *)); */


:root {
  --color-text1: #F3EFE7;
  --color-text2: #878687;
  --color-text3: #402E32;

  --color-button1: #99582A;
  --color-button2: #7F4629;
  --color-button3: #996B54;

  --color-background: #FDF9F6;

  --font-sans: "Vazirmatn", system-ui, sans-serif;
}

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

body {
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  /* فاصله مناسب خطوط متن */
  -webkit-font-smoothing: antialiased;
  /* نرم‌تر شدن فونت */
  text-rendering: optimizeLegibility;
  /* خوانایی بهتر متن */
}



/* Tailwind Configuration */
@theme {
  --color-text1: var(--color-text1);
  --color-text2: var(--color-text2);
  --color-text3: var(--color-text3);

  --color-btn1: var(--color-button1);
  --color-btn2: var(--color-button2);
  --color-btn3: var(--color-button3);

  --color-bg1: var(--color-background);
  
}




*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* دکمه‌ها فونت پروژه رو بگیرن */
button {
  font-family: inherit;
  cursor: pointer;
}

/* تصاویر و مدیاها ریسپانسیو باشن */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* رنگ انتخاب متن (drag select) */
::selection {
  background-color: var(--primary-200);
  /* بک‌گراند انتخاب */
  color: var(--primary-foreground);
  /* رنگ متن انتخاب */
}