@import "tailwindcss";
@import "poyraz-ui/preset.css";

@source "../app/**/*.{js,ts,jsx,tsx,mdx}";
@source "../components/**/*.{js,ts,jsx,tsx,mdx}";
@source "../config/**/*.{js,ts,jsx,tsx,mdx}";

@layer base {
  :root {
    --poyraz-font-primary: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  }

  * {
    @apply border-border;
  }

  html {
    color-scheme: light;
  }

  :root.dark {
    color-scheme: dark;
  }

  body {
    @apply min-h-screen bg-background text-foreground antialiased;
    font-size: 14px;
    letter-spacing: 0;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--poyraz-surface) inset !important;
    -webkit-text-fill-color: var(--poyraz-foreground) !important;
    transition: background-color 5000s ease-in-out 0s;
  }
}

@layer utilities {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--poyraz-primary) 45%, transparent) transparent;
  }

  *::-webkit-scrollbar,
  .tiny-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  *::-webkit-scrollbar-track,
  .tiny-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb,
  .tiny-scrollbar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--poyraz-primary) 36%, transparent);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }

  *::-webkit-scrollbar-thumb:hover,
  .tiny-scrollbar::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--poyraz-primary) 58%, transparent);
    background-clip: padding-box;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 1ms !important;
    }
  }
}