/* Font import */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* Base setup */
:root {
  --font-base: 'IBM Plex Sans Arabic', sans-serif;

  /* الأبعاد للعرض */
  --font-size-2xl: 4.5rem;
  /* 72px */
  --line-height-2xl: 5.625rem;
  /* 90px */
  --letter-spacing-2xl: -2%;

  --font-size-xl: 3.75rem;
  /* 60px */
  --line-height-xl: 4.5rem;
  /* 72px */
  --letter-spacing-xl: -2%;

  --font-size-lg: 3rem;
  /* 48px */
  --line-height-lg: 3.75rem;
  /* 60px */
  --letter-spacing-lg: -2%;

  --font-size-md: 2.25rem;
  /* 36px */
  --line-height-md: 2.75rem;
  /* 44px */
  --letter-spacing-md: -2%;

  --font-size-sm: 1.875rem;
  /* 30px */
  --line-height-sm: 2.375rem;
  /* 38px */

  --font-size-xs: 1.5rem;
  /* 24px */
  --line-height-xs: 2rem;
  /* 32px */

  /* النصوص */
  --font-size-text-xl: 1.25rem;
  /* 20px */
  --line-height-text-xl: 1.875rem;
  /* 30px */

  --font-size-text-lg: 1.125rem;
  /* 18px */
  --line-height-text-lg: 1.75rem;
  /* 28px */

  --font-size-text-md: 1rem;
  /* 16px */
  --line-height-text-md: 1.5rem;
  /* 24px */

  --font-size-text-small: 0.875rem;
  /* 14px */
  --line-height-text-small: 1.25rem;
  /* 20px */

  --font-size-text-xs: 0.75rem;
  /* 12px */
  --line-height-text-xs: 1.125rem;
  /* 18px */

  --font-size-text-2xs: 0.625rem;
  /* 10px */
  --line-height-text-2xs: 0.875rem;
  /* 14px */

  /* Font weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Colors */
  --gray-950: #0d121c;
  --gray-900: #111927;
  --gray-800: #1f2a37;
  --gray-700: #384250;
  --gray-600: #4d5761;
  --gray-500: #6c737f;
  --gray-400: #9da4ae;
  --gray-300: #d2d6db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --gray-25: #fcfcfc;
  --white: #ffffff;

  --primary: #0d6efd;
  --secondary: #6c737f;
  --gold: #f5bd02;
  --lavender: #80519f;
  --success: #17b26a;
  --info: #2e90fa;
  --warning: #f79009;
  --danger: #f04438;

  /* Shadows */
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

  --shadow-sm:
    0px 1px 3px 0px rgba(16, 24, 40, 0.10),
    0px 1px 2px 0px rgba(16, 24, 40, 0.06);

  --shadow-md:
    0px 4px 8px -2px rgba(16, 24, 40, 0.10),
    0px 2px 4px -2px rgba(16, 24, 40, 0.06);

  --shadow-lg:
    0px 12px 16px -6px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);

  --shadow-xl:
    0px 20px 24px -4px rgba(16, 24, 40, 0.08),
    0px 8px 8px -4px rgba(16, 24, 40, 0.03);

  --shadow-2xl: 0px 48px 240px -12px rgba(16, 24, 40, 0.18);

  --shadow-3xl: 0px 64px 32px -12px rgba(16, 24, 40, 0.14);

  /* blur */
  --backdrop-blur-sm: blur(8px);
  --backdrop-blur-sm-2: blur(16px);

  --backdrop-blur-lg: blur(24px);
  --backdrop-blur-lg-2: blur(40px);

  /* icons size  */
  --icon-xxs: 10px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-sm-alt: 18px;
  --icon-md-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 28px;
  --icon-xl: 32px;
  /* Spacing */
  --spacing-none: 0rem;
  /* 0px */
  --spacing-xxs: 0.125rem;
  /* 2px */
  --spacing-xs: 0.25rem;
  /* 4px */
  --spacing-sm: 0.375rem;
  /* 6px */
  --spacing-md: 0.5rem;
  /* 8px */
  --spacing-lg: 0.75rem;
  /* 12px */
  --spacing-xl: 1rem;
  /* 16px */
  --spacing-2xl: 1.25rem;
  /* 20px */
  --spacing-3xl: 1.5rem;
  /* 24px */
  --spacing-4xl: 2rem;
  /* 32px */
  --spacing-5xl: 2.5rem;
  /* 40px */
  --spacing-6xl: 3rem;
  /* 48px */
  --spacing-7xl: 5rem;
  /* 64px */
  --spacing-8xl: 6rem;
  /* 80px */
  --spacing-9xl: 7rem;
  /* 96px */
  --spacing-10xl: 8rem;
  /* 128px */
  --spacing-11xl: 11rem;
  /* 160px */

  /* Widths */
  --width-xxs: 20rem;
  /* 320px */
  --width-xs: 24rem;
  /* 384px */
  --width-sm: 30rem;
  /* 480px */
  --width-md: 35rem;
  /* 560px */
  --width-lg: 40rem;
  /* 640px */
  --width-xl: 48rem;
  /* 768px */
  --width-2xl: 64rem;
  /* 1024px */
  --width-3xl: 80rem;
  /* 1280px */
  --width-4xl: 90rem;
  /* 1440px */
  --width-5xl: 100rem;
  /* 1600px */
  --width-6xl: 120rem;
  /* 1920px */

  /* Containers */
  --container-padding-mobile: 1rem;
  /* 16px */
  --container-padding-desktop: 2rem;
  /* 32px */
  --container-max-width-desktop: 80rem;
  /* 1280px */

  /* Paragraph max width */
  --paragraph-max-width: 45rem;
}

/* Small devices (Mobile) */
@media (max-width: 599px) {}

/* Medium devices (Tablet) */
@media (min-width: 600px) and (max-width: 959px) {}

/* Large devices (Desktop) */
@media (min-width: 960px) and (max-width: 1279px) {}

/* Extra Large devices (Desktop) */
@media (min-width: 1280px) {}

/* General font styling */
body {
  font-family: var(--font-base);
}

/* Text colors */
.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-success {
  color: var(--success);
}

.text-info {
  color: var(--info);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

/* Background colors */
.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-success {
  background-color: var(--success);
}

.bg-info {
  background-color: var(--info);
}

.bg-warning {
  background-color: var(--warning);
}

.bg-danger {
  background-color: var(--danger);
}

.bg-white {
  background-color: var(--white);
}

.bg-gray-100 {
  background-color: var(--gray-100);
}

/* Box Shadows */
.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

/* Spacing (Padding and Margin) */
.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.m-xs {
  margin: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

/* Width */
.width-xs {
  width: var(--width-xs);
}

.width-sm {
  width: var(--width-sm);
}

.width-md {
  width: var(--width-md);
}

.width-lg {
  width: var(--width-lg);
}



/* Mobile */
@media (max-width: 599px) {}

/* Tablet */
@media (min-width: 600px) and (max-width: 959px) {}

/* Desktop */
@media (min-width: 960px) and (max-width: 1279px) {}

/* Extra Large Desktop */
@media (min-width: 1280px) {}

/* Button styles */
.btn {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--primary);
  color: var(--white);
  font-size: var(--font-size-text-lg);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  background-color: var(--primary);
  box-shadow: var(--shadow-md);
}