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

:root {
    --color-primary: #7f4629;
    --color-button1: #99582a;
    --color-text1: #402e32;
    --color-text2: #ffffff;
    --color-header: #f3efe7;
    --color-header2: #e6dbcc;
    --color-sidebar: #efeeee;
    --color-background: #fdf8f4;
    --color-hover: #e6dbcc;
    --color-hover2: #a2795c;
    --color-thead: #7f4629;
    --color-border: #7f4629;

    --font-sans: "Vazirmatn", system-ui, sans-serif;
}
.dark {
    --color-primary: #93836c;
    --color-button1: #99582a;
    --color-text1: #fdf8f4;
    --color-text2: #272322;
    --color-header: #342e2c;
    --color-header2: #5e5450;
    --color-sidebar: #564c49;
    --color-background: #272322;
    --color-hover: #5e5450;
    --color-hover2: #a2795c;
    --color-thead: #d9cab3;
    --color-border: #93836c;
}

@theme {
    --font-MyEstedad: "MyEstedad", sans-serif;

    --color-primary: var(--color-primary);
    --color-header: var(--color-header);
    --color-sidebar: var(--color-sidebar);
    --color-background: var(--color-background);
    --color-button1: var(--color-button1);
    --color-text1: var(--color-text1);
    --color-text2: var(--color-text2);
    --color-hover: var(--color-hover);
    --color-hover2: var(--color-hover2);
    --color-thead: var(--color-thead);
    --color-border: var(--color-border);
}

/* Chrome / Edge / Safari autofill FIX (light + dark, no color) */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
    box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
    -webkit-text-fill-color: inherit !important;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark textarea:-webkit-autofill,
.dark textarea:-webkit-autofill:focus,
.dark select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #272322 inset !important;
    box-shadow: 0 0 0 1000px #272322 inset !important;
    -webkit-text-fill-color: inherit !important;
}

.primary {
    color: var(--color-primary);
    background-color: var(--color-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
td,
body {
    color: var(--color-text1);
}

div:hover
{
    color: var(--color-text1);
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark span,
.dark td,
.dark body {
    color: var(--color-text1) !important;
}

.dark div:hover {
    color: var(--color-text1);
}



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;
    /* خوانایی بهتر متن */
}


@font-face {
    font-family: "MyEstedad";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Estedad.ttf") format("truetype");
}



@layer base {
    html {
        direction: rtl;
    }

    body {
        /* @apple font-MyEstedad; */
        font-family: var(--font-MyEstedad);
        direction: rtl;
    }
}



*::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(--color-hover);
    /* بک‌گراند انتخاب */
    color: var(--color-text1);
    /* رنگ متن انتخاب */
}

/* جلوگیری کامل از رینگ / بوردر فوکوس در Recharts */
.recharts-wrapper:focus,
.recharts-wrapper:focus-visible,
.recharts-surface:focus,
.recharts-surface:focus-visible,
.recharts-responsive-container:focus,
.recharts-responsive-container:focus-visible,
.recharts-layer:focus,
.recharts-layer:focus-visible,
svg:focus,
svg:focus-visible,
g:focus,
g:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* برای اطمینان بیشتر روی کل پروژه */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

