@import "tailwindcss";
@import "./styles/layouts.css";
/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;


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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

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


/* дальше — ваши кастом-стили */
@layer base {
  h1 {
    @apply text-3xl font-bold;
  }
  h2 {
    @apply text-2xl font-bold;
  }
  h3 {
    @apply text-xl font-bold;
  }
  p {
    @apply text-base;
  }
}
@layer components {
  .btn {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
  .btn:hover {
    @apply bg-blue-700;
  }
}
@layer utilities {
  .bg-custom {
    @apply bg-blue-100;
  }
  .text-custom {
    @apply text-blue-500;
  }
}
@layer screens {
  @screen sm {
    .text-sm {
      @apply text-xs;
    }
  }
  @screen md {
    .text-md {
      @apply text-base;
    }
  }
  @screen lg {
    .text-lg {
      @apply text-lg;
    }
  }
}
@layer forms {
  .form-input {
    @apply border-gray-300 rounded-md shadow-sm;
  }
  .form-input:focus {
    @apply border-blue-500 ring-blue-500;
  }
}
@layer typography {
  .prose {
    @apply prose-lg;
  }
  .prose h1 {
    @apply text-3xl font-bold;
  }
  .prose h2 {
    @apply text-2xl font-bold;
  }
  .prose h3 {
    @apply text-xl font-bold;
  }
}
@layer animations {
  .fade-in {
    @apply transition-opacity duration-500 ease-in;
  }
  .fade-out {
    @apply transition-opacity duration-500 ease-out;
  }
}
@layer transitions {
  .transition-all {
    @apply transition-all duration-300 ease-in-out;
  }
  .transition-colors {
    @apply transition-colors duration-300 ease-in-out;
  }
}
@layer shadows {
  .shadow-custom {
    @apply shadow-lg;
  }
  .shadow-none {
    @apply shadow-none;
  }
}
@layer borders {
  .border-custom {
    @apply border-2 border-blue-500;
  }
  .border-none {
    @apply border-none;
  }
}
@layer spacing {
  .p-custom {
    @apply p-4;
  }
  .m-custom {
    @apply m-4;
  }
}
@layer flex {
  .flex-center {
    @apply flex items-center justify-center;
  }
  .flex-column {
    @apply flex flex-col;
  }
}
@layer grid {
  .grid-custom {
    @apply grid grid-cols-3 gap-4;
  }
  .grid-center {
    @apply grid place-items-center;
  }
}
@layer typography {
  .prose {
    @apply prose-lg;
  }
  .prose h1 {
    @apply text-3xl font-bold;
  }
  .prose h2 {
    @apply text-2xl font-bold;
  }
  .prose h3 {
    @apply text-xl font-bold;
  }
}