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&family=Poppins:wght@400;500;600;700&display=swap');

/* Import image protection styles */
@import './styles/image-protection.css';

@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;
    --heading-font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, sans-serif;
    --border-radius: 0.5rem;
    --font-size-base: 16px;
    --shadow-default: 0 4px 6px rgba(0,0,0,0.1);
    
    /* 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);
    font-size: var(--font-size-base);
    @apply antialiased;
    overflow-x: hidden;
  }
  
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--background-pattern);
    background-size: var(--background-pattern-size);
    opacity: 1;
    pointer-events: none;
    z-index: -1;
  }

  /* 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;
    box-shadow: var(--shadow-default);
  }

  .card-hover {
    @apply card transition-all duration-200 hover:translate-y-[-2px];
  }
  
  /* Headings with custom font */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
  }

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

  /* 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 - Updated */
  input[type="range"].slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #d4d4d4 !important;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    position: relative;
  }

  /* Webkit browsers like Chrome/Safari */
  input[type="range"].slider::-webkit-slider-track {
    width: 100%;
    height: 8px;
    background: #d4d4d4 !important;
    border-radius: 4px;
    border: none;
  }

  input[type="range"].slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #5C8762;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px; /* Center the thumb vertically */
    transition: all 0.2s ease;
  }

  input[type="range"].slider::-webkit-slider-thumb:hover {
    background: #4a6f4f;
    transform: scale(1.1);
  }

  /* Firefox */
  input[type="range"].slider::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #d4d4d4 !important;
    border-radius: 4px;
    border: none;
  }

  input[type="range"].slider::-moz-range-thumb {
    border: none;
    width: 20px;
    height: 20px;
    background: #5C8762;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  input[type="range"].slider::-moz-range-thumb:hover {
    background: #4a6f4f;
    transform: scale(1.1);
  }

  /* IE/Edge */
  input[type="range"].slider::-ms-track {
    width: 100%;
    height: 8px;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }

  input[type="range"].slider::-ms-fill-lower {
    background: #d4d4d4;
    border-radius: 4px;
  }

  input[type="range"].slider::-ms-fill-upper {
    background: #d4d4d4;
    border-radius: 4px;
  }

  input[type="range"].slider::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #5C8762;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0;
  }
}