@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply antialiased;
    height: 100%;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    @apply bg-black text-white;
    min-height: 100%;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior-y: none;
  }

  #__next {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
}

@layer components {
  .example-button {
    @apply px-6 py-2.5 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition-colors duration-200;
  }

  .input-field {
    @apply flex-1 px-6 py-4 bg-zinc-900 border border-zinc-800 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-zinc-700 transition-colors;
  }

  .generate-button {
    @apply px-8 py-4 rounded-xl font-medium transition-colors duration-200;
  }

  .generate-button-enabled {
    @apply bg-white text-black hover:bg-gray-100;
  }

  .generate-button-disabled {
    @apply bg-zinc-800 text-gray-400 cursor-not-allowed;
  }

  .preview-container {
    @apply w-full aspect-square bg-zinc-900 border border-zinc-800 rounded-2xl flex items-center justify-center overflow-hidden;
  }

  .canvas-container {
    @apply w-[600px] h-[600px] relative;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  @apply w-2 h-2;
}

::-webkit-scrollbar-track {
  @apply bg-zinc-900;
}

::-webkit-scrollbar-thumb {
  @apply bg-zinc-700 rounded-sm hover:bg-zinc-600;
}

/* Test class to verify CSS is loading */
.test-style {
  @apply bg-red-500;
}

@font-face {
  font-family: 'Google Sans Display';
  src: url('/fonts/GoogleSansDisplay-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Google Sans Mono';
  src: url('/fonts/GoogleSansMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --font-google-sans-display: 'Google Sans Display', system-ui, -apple-system;
  --font-google-sans-mono: 'Google Sans Mono', monospace;
  --foreground: #ffffff;
  --background: #000000;
}

.code-panel {
  font-family: var(--font-google-sans-mono);
}

.output-panel {
  display: flex;
  width: 414px;
  height: 779px;
  padding: 23px 25px;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.05);
}

input::placeholder {
  color: #666;
}

button:focus {
  outline: none;
}