picpeak/frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    /* Theme CSS Variables */
    --color-primary: #5C8762;
    --color-primary-light: #7aa583;
    --color-primary-dark: #4a6f4f;
    --color-accent: #22c55e;
    --color-background: #fafafa;
    --color-text: #171717;
    --font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, sans-serif;
    --border-radius: 0.5rem;
    
    /* Tailwind RGB values for primary color */
    --tw-color-primary: 92 135 98;
    --radius: 0.5rem;
  }

  * {
    font-family: var(--font-family);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-text);
    @apply antialiased;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-neutral-100;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-neutral-300 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-400;
  }
}

@layer components {
  /* Button styles */
  .btn {
    @apply inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
    border-radius: var(--border-radius);
  }

  .btn-primary {
    background-color: var(--color-primary);
    color: white;
    @apply hover:opacity-90 focus-visible:ring-2;
  }
  
  .btn-primary:hover {
    background-color: var(--color-primary-dark);
  }

  .btn-secondary {
    @apply bg-neutral-200 text-neutral-900 hover:bg-neutral-300 focus-visible:ring-neutral-400;
  }

  .btn-outline {
    @apply border border-neutral-300 bg-transparent text-neutral-700 hover:bg-neutral-100 focus-visible:ring-neutral-400;
  }

  .btn-sm {
    @apply h-9 px-3 text-sm;
  }

  .btn-md {
    @apply h-10 px-4 py-2;
  }

  .btn-lg {
    @apply h-11 px-8 text-lg;
  }

  /* Input styles */
  .input {
    @apply flex h-10 w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Card styles */
  .card {
    @apply rounded-xl border border-neutral-200 bg-white shadow-soft;
  }

  .card-hover {
    @apply card transition-all duration-200 hover:shadow-medium hover:translate-y-[-2px];
  }

  /* Container */
  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }

  /* Image loading skeleton */
  .skeleton {
    @apply animate-pulse bg-neutral-200 rounded-lg;
  }

  /* Gallery grid - Mobile optimized */
  .gallery-grid {
    @apply grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
  }

  /* Modal overlay */
  .modal-overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm animate-fade-in;
  }

  /* Badge */
  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
  }

  .badge-success {
    @apply bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply bg-amber-100 text-amber-800;
  }

  .badge-danger {
    @apply bg-red-100 text-red-800;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Text gradient */
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary-800;
  }

  /* Smooth scroll */
  .smooth-scroll {
    scroll-behavior: smooth;
  }

  /* Custom range slider styles */
  .slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  .slider::-webkit-slider-track {
    @apply bg-neutral-200 h-2 rounded-lg;
  }

  .slider::-moz-range-track {
    @apply bg-neutral-200 h-2 rounded-lg;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    @apply bg-primary-600 h-5 w-5 rounded-full cursor-pointer transition-all;
    margin-top: -6px;
  }

  .slider::-moz-range-thumb {
    @apply bg-primary-600 h-5 w-5 rounded-full cursor-pointer transition-all border-0;
  }

  .slider:hover::-webkit-slider-thumb {
    @apply bg-primary-700 scale-110;
  }

  .slider:hover::-moz-range-thumb {
    @apply bg-primary-700 scale-110;
  }
}