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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 7%;

    --card: 0 0% 98%;
    --card-foreground: 0 0% 7%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 7%;

    --primary: 0 0% 7%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 7%;

    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 45%;

    --accent: 0 0% 7%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 7%;

    --radius: 0.75rem;

    /* Primary/Accent variations for visual variety */
    --primary-muted: 0 0% 85%;
    --accent-muted: 0 0% 85%;

    /* Chart colors - grayscale variants */
    --chart-1: 0 0% 7%;
    --chart-2: 0 0% 30%;
    --chart-3: 0 0% 50%;
    --chart-4: 0 0% 70%;
    --chart-5: 0 0% 85%;

    --gradient-primary: linear-gradient(135deg, hsl(0 0% 7%) 0%, hsl(0 0% 30%) 100%);
    --gradient-hero: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 96%) 100%);
    --gradient-card: linear-gradient(135deg, hsl(0 0% 100% / 0.9) 0%, hsl(0 0% 98% / 0.7) 100%);
    --gradient-glow: radial-gradient(ellipse at center, hsl(0 0% 7% / 0.05) 0%, transparent 70%);
    
    --shadow-glow: 0 0 60px hsl(0 0% 7% / 0.1);
    --shadow-card: 0 8px 32px hsl(0 0% 0% / 0.08);
    --shadow-button: 0 4px 24px hsl(0 0% 7% / 0.15);

    --glass-bg: hsl(0 0% 100% / 0.85);
    --glass-border: hsl(0 0% 7% / 0.08);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 0 0% 7%;
    --sidebar-primary: 0 0% 7%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 94%;
    --sidebar-accent-foreground: 0 0% 7%;
    --sidebar-border: 0 0% 90%;
    --sidebar-ring: 0 0% 7%;
  }

  .dark {
    --background: 0 0% 4%;
    --foreground: 0 0% 98%;

    --card: 0 0% 7%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 7%;

    --secondary: 0 0% 12%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 60%;

    --accent: 0 0% 100%;
    --accent-foreground: 0 0% 7%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: 0 0% 100%;

    /* Primary/Accent variations for visual variety */
    --primary-muted: 0 0% 25%;
    --accent-muted: 0 0% 25%;

    /* Chart colors - grayscale variants */
    --chart-1: 0 0% 100%;
    --chart-2: 0 0% 80%;
    --chart-3: 0 0% 60%;
    --chart-4: 0 0% 40%;
    --chart-5: 0 0% 25%;

    --gradient-primary: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 70%) 100%);
    --gradient-hero: linear-gradient(180deg, hsl(0 0% 4%) 0%, hsl(0 0% 8%) 100%);
    --gradient-card: linear-gradient(135deg, hsl(0 0% 10% / 0.8) 0%, hsl(0 0% 7% / 0.6) 100%);
    --gradient-glow: radial-gradient(ellipse at center, hsl(0 0% 100% / 0.08) 0%, transparent 70%);
    
    --shadow-glow: 0 0 60px hsl(0 0% 100% / 0.1);
    --shadow-card: 0 8px 32px hsl(0 0% 0% / 0.5);
    --shadow-button: 0 4px 24px hsl(0 0% 100% / 0.15);

    --glass-bg: hsl(0 0% 8% / 0.8);
    --glass-border: hsl(0 0% 100% / 0.08);

    --sidebar-background: 0 0% 7%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 0 0% 100%;
    --sidebar-primary-foreground: 0 0% 7%;
    --sidebar-accent: 0 0% 12%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 18%;
    --sidebar-ring: 0 0% 100%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Geist', system-ui, sans-serif;
    letter-spacing: -0.01em;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Geist', system-ui, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 600;
  }
}

@layer components {
  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
  }

  .gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-border {
    position: relative;
  }

  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .glow-effect {
    box-shadow: var(--shadow-glow);
  }

  .hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: var(--gradient-glow);
    filter: blur(80px);
    pointer-events: none;
  }
}

@layer utilities {
  /* Spacing utilities for consistent rhythm */
  .section-padding {
    @apply py-16 md:py-24 lg:py-32;
  }
  
  .section-padding-sm {
    @apply py-10 md:py-14 lg:py-18;
  }
  
  .section-padding-lg {
    @apply py-20 md:py-32 lg:py-40;
  }
  
  .container-padding {
    @apply px-4 md:px-6 lg:px-8;
  }
  
  .card-padding {
    @apply p-4 md:p-6 lg:p-8;
  }
  
  .card-padding-sm {
    @apply p-3 md:p-4 lg:p-5;
  }
  
  .card-padding-lg {
    @apply p-6 md:p-8 lg:p-10;
  }
  
  .stack-sm {
    @apply space-y-2 md:space-y-3;
  }
  
  .stack-md {
    @apply space-y-4 md:space-y-6;
  }
  
  .stack-lg {
    @apply space-y-6 md:space-y-8 lg:space-y-10;
  }
  
  .stack-xl {
    @apply space-y-8 md:space-y-12 lg:space-y-16;
  }
  
  .inline-sm {
    @apply space-x-2 md:space-x-3;
  }
  
  .inline-md {
    @apply space-x-4 md:space-x-6;
  }
  
  .inline-lg {
    @apply space-x-6 md:space-x-8;
  }
  
  .gap-grid {
    @apply gap-4 md:gap-6 lg:gap-8;
  }
  
  .gap-grid-sm {
    @apply gap-3 md:gap-4 lg:gap-5;
  }
  
  .gap-grid-lg {
    @apply gap-6 md:gap-8 lg:gap-10;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Safe area for mobile bottom nav */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Hide scrollbar utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
