@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;

  --primary: #19647d;
  --primary-foreground: #171717;
  --secondary: #ff6419;
  --secondary-foreground: #171717;
  --third-color: #f3c623;
  --third-text: #888888;
  --primary-text: #171717;
  --secondary-text: #7c858f;
}

@theme inline {
  --color-primary-text: var(--primary-text);
  --color-secondary-text: var(--secondary-text);
  --color-third-text: var(--third-text);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #19647d;
    --primary-foreground: oklch(0.985 0 0);
    --secondary: #ff6419;
    --third-color: #888888;
    --secondary-foreground: oklch(0.205 0 0);
    --primary-text: #393a47;
    --secondary-text: #7c858f;
    --third-text: #888888;
    --background: #f9fdff;
    --foreground: oklch(0.145 0 0);
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;

  @layer components {
    .custom-container {
      @apply container mx-auto px-6 md:px-12 lg:px-20 xl:px-24 2xl:px-32;
    }
    .h1Text {
      @apply font-bold text-2xl sm:text-3xl md:text-4xl lg:text-5xl min-[1600px]:text-6xl min-[2000px]:text-7xl tracking-[0.05em];
    }

    .h2Text {
      @apply font-bold text-lg md:text-xl lg:text-4xl min-[1600px]:text-5xl min-[2000px]:text-6xl tracking-[0.05em];
    }

    .h3Text {
      @apply font-semibold text-base md:text-lg lg:text-xl min-[1600px]:text-2xl min-[2000px]:text-3xl tracking-[0.05em];
    }

    .h4Text {
      @apply font-semibold md:text-lg xl:text-xl min-[2000px]:text-2xl tracking-[0.05em];
    }

    .h5Text {
      @apply font-semibold text-sm md:text-base lg:text-lg min-[2000px]:text-xl tracking-[0.05em];
    }

    .h6Text {
      @apply font-semibold text-sm lg:text-base tracking-[0.05em];
    }

    body,
    p,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 a,
    button {
      @apply tracking-[0.05em];
    }

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

    .text-third {
      color: var(--third-text);
    }
  }
}
html[dir="rtl"] .h4Text {
  @apply text-base md:text-lg;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.animate-shimmer {
  animation: shimmer 2s linear infinite;
  background-size: 200% 100%;
}