@import "tailwindcss";
@import "./components.css";
@import "./animations.css";

@theme {
    --font-arabic: "Tajawal", sans-serif;

    --color-primary: #0e5278;
    --color-primary-dark: #083b59;
    --color-primary-light: #eaf4f9;

    --color-secondary: #c59a3d;
    --color-secondary-light: #fbf5e7;

    --color-success: #3e9b73;
    --color-success-light: #eaf7f1;

    --color-info: #4f89ae;
    --color-info-light: #edf6fb;

    --color-page: #f7f9fa;
    --color-text-main: #17384d;
    --color-text-muted: #71808c;
    --color-border: #e5eaee;
}

:root {
    --color-primary: #0e5278;
    --color-primary-dark: #083b59;
    --color-primary-light: #eaf4f9;
}

.bg-primary {
    background-color: #0e5278;
}

.text-primary {
    color: #0e5278;
}

.bg-primary-dark {
    background-color: #083b59;
}

.bg-primary-light {
    background-color: #eaf4f9;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Tajawal", sans-serif;
    background: #f7f9fa;
    color: #17384d;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    display: block;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}