@import url("./font.css");

@theme {
  --font-norsal: "Norsal", sans-serif;

  --color-secondary-0: #ffffff;
  --color-secondary-50: #efedf8;
  --color-secondary-100: #e0dcf1;
  --color-secondary-150: #d0caeb;
  --color-secondary-200: #c0b9e4;
  --color-secondary-300: #a195d6;
  --color-secondary-400: #8172c9;
  --color-secondary-500: #624fbb;
  --color-secondary-600: #4e3f96;
  --color-secondary-700: #3b2f70;
  --color-secondary-800: #27204b;
  --color-secondary-850: #1d1838;
  --color-secondary-900: #141025;
  --color-secondary-950: #0a0813;
  --color-secondary-1000: #000000;
  /* اللون الأساسي DEFAULT */
  --color-secondary: #624fbb;
}

html {
  font-family:
    "Norsal",
    sans-serif,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
  scroll-behavior: smooth;
}

.scroll-thin::-webkit-scrollbar {
  height: 4px;
}

.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-thin::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

/* دعم Firefox */
.scroll-thin::-moz-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.marquee-left {
  animation-name: scroll-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee-right {
  animation-name: scroll-right;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hover-pause:hover {
  animation-play-state: paused;
}