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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 228 18% 7%;
    --foreground: 210 20% 95%;
    --card: 225 15% 12%;
    --card-foreground: 210 20% 95%;
    --popover: 225 15% 12%;
    --popover-foreground: 210 20% 95%;
    --primary: 24 95% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 225 12% 15%;
    --secondary-foreground: 210 20% 90%;
    --muted: 225 12% 15%;
    --muted-foreground: 215 12% 50%;
    --accent: 24 80% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 210 20% 95%;
    --border: 220 10% 20%;
    --input: 220 10% 20%;
    --ring: 24 95% 53%;
    --chart-1: 24 95% 53%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 1rem;
    --glass: 225 15% 14%;
    --glass-border: 220 15% 24%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Apple Frosted Glass utilities */
@layer components {
  .glass {
    @apply border-white/[0.08] bg-white/[0.04] backdrop-blur-2xl;
  }
  .glass-strong {
    @apply border-white/[0.12] bg-white/[0.07] backdrop-blur-3xl;
  }
  .glass-card {
    @apply rounded-2xl border border-white/[0.08] bg-white/[0.05] backdrop-blur-2xl shadow-lg shadow-black/10;
  }
  .glass-input {
    @apply rounded-xl border border-white/[0.1] bg-white/[0.06] backdrop-blur-xl text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary/30 transition-all;
  }
  .glass-button {
    @apply rounded-xl border border-white/[0.1] bg-white/[0.06] backdrop-blur-xl text-foreground transition-all hover:bg-white/[0.1] active:scale-[0.98];
  }
  .glass-nav {
    @apply border-t border-white/[0.08] bg-black/40 backdrop-blur-3xl supports-[backdrop-filter]:bg-black/30;
  }
  .glass-header {
    @apply border-b border-white/[0.06] bg-background/60 backdrop-blur-2xl supports-[backdrop-filter]:bg-background/40;
  }
  .glass-tag {
    @apply rounded-full border border-white/[0.1] bg-white/[0.06] px-2.5 py-0.5 text-[10px] font-medium backdrop-blur-sm;
  }
  .glass-avatar {
    @apply rounded-full border border-white/[0.1] bg-white/[0.08] backdrop-blur-xl;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbar for mobile app feel */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Safe area for PWA */
@supports(padding: max(0px)) {
  .safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Subtle noise texture for depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}