frontend/src/index.css

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

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

* {
  @apply m-0 p-0 box-border;
}

html {
  @apply scroll-smooth;
}

body {
  @apply bg-dark-900 text-white antialiased;
}

/* Scrollbar — gold on dark */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-dark-850;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary-500 rounded-full hover:bg-primary-600 transition-colors;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-primary-600;
}

/* Glass morphism — warm-tinted glass */
.glass {
  @apply bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl;
}

.glass-sm {
  @apply bg-white/5 backdrop-blur-lg border border-white/10 rounded-lg;
}

.glass-lg {
  background: rgba(20, 16, 8, 0.55);
  @apply backdrop-blur-2xl border border-white/10 rounded-3xl;
}

/* Gradient text — gold to amber (matches chainstreet logo palette) */
.gradient-text {
  background: linear-gradient(135deg, #E8A020 0%, #FFB800 60%, #F5C842 100%);
  @apply bg-clip-text text-transparent;
}

.gradient-text-sm {
  background: linear-gradient(135deg, #E8A020 0%, #FFB800 100%);
  @apply bg-clip-text text-transparent;
}

/* Glow borders */
.glow-border {
  @apply border border-primary-500/50 shadow-glow;
}

.glow-border-animated {
  @apply animate-glow border border-primary-500 shadow-glow;
}

.glow-border-amber {
  @apply border border-accent-500/50 shadow-glow-amber;
}

/* Upload zone */
.upload-zone {
  @apply glass p-8 rounded-3xl border-2 border-dashed border-primary-500/30
         hover:border-primary-500 transition-all duration-300 cursor-pointer
         hover:bg-primary-500/5 hover:shadow-glow;
}

.upload-zone.dragover {
  @apply border-primary-500 bg-primary-500/10 shadow-glow-lg;
}

/* Cards */
.card-hover {
  @apply transition-all duration-300 hover:shadow-glow hover:shadow-lg hover:scale-105;
}

.card-hover-sm {
  @apply transition-all duration-200 hover:shadow-lg hover:scale-105;
}

/* Buttons — gold gradient */
.btn-primary {
  background: linear-gradient(135deg, #E8A020, #D4901A);
  @apply text-black px-6 py-2 rounded-lg font-semibold transition-all duration-200
         hover:shadow-glow hover:shadow-lg active:scale-95;
}

.btn-primary-lg {
  background: linear-gradient(135deg, #E8A020, #D4901A);
  @apply text-black px-8 py-3 rounded-xl font-bold transition-all duration-200
         hover:shadow-glow-lg hover:shadow-lg active:scale-95;
}

.btn-secondary {
  @apply bg-white/10 hover:bg-white/20 text-white px-6 py-2 rounded-lg font-semibold
         transition-all duration-200 border border-white/20;
}

.btn-secondary-lg {
  @apply bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-xl font-semibold
         transition-all duration-200 border border-white/20;
}

.btn-ghost {
  @apply text-white/70 hover:text-white transition-colors duration-200;
}

/* Inputs */
.input-field {
  @apply bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white
         placeholder-white/40 focus:outline-none focus:border-primary-500/60
         focus:ring-1 focus:ring-primary-500/30 transition-all duration-200;
}

.input-field-lg {
  @apply bg-white/5 border border-white/10 rounded-xl px-6 py-3 text-white
         placeholder-white/40 focus:outline-none focus:border-primary-500/60
         focus:ring-1 focus:ring-primary-500/30 transition-all duration-200;
}

/* Badges */
.badge {
  @apply inline-block px-3 py-1 rounded-full text-sm font-medium
         bg-primary-500/20 text-primary-400 border border-primary-500/30;
}

.badge-amber {
  @apply inline-block px-3 py-1 rounded-full text-sm font-medium
         bg-accent-500/20 text-accent-400 border border-accent-500/30;
}

.badge-success {
  @apply inline-block px-3 py-1 rounded-full text-sm font-medium
         bg-green-500/20 text-green-400 border border-green-500/30;
}

/* Progress bar — gold gradient */
.progress-gradient {
  background: linear-gradient(90deg, #E8A020, #FFB800, #F5C842);
  @apply h-1 rounded-full transition-all duration-300;
}

/* Overlay */
.overlay {
  @apply fixed inset-0 bg-black/50 backdrop-blur-sm;
}

/* Utility */
.transition-smooth { @apply transition-all duration-300 ease-out; }
.truncate-line      { @apply line-clamp-1; }
.truncate-2         { @apply line-clamp-2; }
.truncate-3         { @apply line-clamp-3; }

.focus-visible {
  @apply focus:outline-none focus:ring-2 focus:ring-primary-500/50
         focus:ring-offset-2 focus:ring-offset-dark-900;
}

.center       { @apply flex items-center justify-center; }
.flex-center  { @apply flex items-center justify-center; }
.flex-between { @apply flex items-center justify-between; }
.flex-col-center { @apply flex flex-col items-center justify-center; }
.text-balance { text-wrap: balance; }

/* Shimmer loading effect */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}

.shimmer {
  animation: shimmer 2s infinite;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(232,160,32,0.08),
    rgba(255,255,255,0)
  );
  background-size: 1000px 100%;
}

/* Aspect ratio helpers */
.aspect-9-16  { @apply aspect-[9/16]; }
.aspect-4-5   { @apply aspect-[4/5]; }
.aspect-16-9  { @apply aspect-[16/9]; }