@import "tailwindcss";

@theme {
  --color-zvupro-dark: #0a0a0a;
  --color-zvupro-gray: #1a1a1a;
  --color-zvupro-red: #dc2626;
  --color-border: rgba(255, 255, 255, 0.1);
  --font-sans: 'Inter', system-ui, sans-serif;
}

@layer base {
  html, body {
    height: 100%;
  }

  body {
    background: var(--color-zvupro-dark);
    color: #f5f5f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      scroll-behavior: auto !important;
    }
  }

  :focus {
    outline: 3px solid rgba(220, 38, 38, 0.25);
    outline-offset: 2px;
  }

  a:focus, a:hover {
    text-decoration: underline;
  }
}

@layer components {
  .card {
    @apply bg-zvupro-dark p-8 rounded-lg border border-border;
  }

  .card-sm {
    @apply bg-zvupro-dark p-6 rounded-lg border border-border;
  }

  .section-title {
    @apply text-3xl md:text-4xl font-bold text-white mb-4 text-center;
  }

  .section-subtitle {
    @apply text-gray-400 text-center mb-12 max-w-2xl mx-auto;
  }

  .btn-primary {
    @apply px-8 py-4 bg-zvupro-red hover:bg-red-700 text-white font-semibold rounded transition-transform hover:-translate-y-1;
  }

  .btn-outline {
    @apply px-8 py-4 border-2 border-zvupro-red text-zvupro-red hover:bg-zvupro-red hover:text-white font-semibold rounded transition;
  }

  .form-input {
    @apply w-full px-4 py-3 bg-zvupro-gray border border-border rounded text-white focus:border-zvupro-red focus:outline-none;
  }

  .form-label {
    @apply block text-sm font-semibold text-gray-300 mb-2;
  }

  .embed-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }

  .embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .social-link {
    @apply text-gray-400 hover:text-zvupro-red transition-colors;
  }

  .nav-link {
    @apply hover:text-zvupro-red transition-colors;
  }
}