@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'Tajawal';
  src: url('./assets/fonts/Tajawal-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('./assets/fonts/Tajawal-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('./assets/fonts/Tajawal-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('./assets/fonts/Tajawal-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('./assets/fonts/Tajawal-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('./assets/fonts/Tajawal-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('./assets/fonts/Tajawal-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Arabic UI language: apply Tajawal app-wide. Driven by the html[dir]
   useLanguageSync sets — see src/hooks/useLanguageSync.js. */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: 'Tajawal', 'Avenir Next LT Pro', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  width: 100%;
  font: 'Avenir Next LT Pro';
  background: #EFEFEF !important
}

.colorful{
    background: linear-gradient(141.85deg, #FFFFFF 12.99%, #E0F8FF 50.21%, #FFFFFF 90.53%);
}
.colorful2{
    background: linear-gradient(90deg, #FFF3F9 0%, #D9F8FF 104.29%);
}

.bg-icon{
    background: #f0f4eb;
}

.no-wrap{
    flex-wrap: nowrap;
}