portfolio/app/globals.css

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

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

:root {
  /* Organic Modern Palette */
  --background: #FDFCF8; /* Cream */
  --foreground: #292524; /* Warm Grey */
  --card: rgba(255, 255, 255, 0.6);
  --card-foreground: #292524;
  --popover: #FFFFFF;
  --popover-foreground: #292524;
  --primary: #292524;
  --primary-foreground: #FDFCF8;
  --secondary: #E7E5E4;
  --secondary-foreground: #292524;
  --muted: #F5F5F4;
  --muted-foreground: #78716C;
  --accent: #F3F1E7; /* Sand */
  --accent-foreground: #292524;
  --destructive: #EF4444;
  --destructive-foreground: #FDFCF8;
  --border: #E7E5E4;
  --input: #E7E5E4;
  --ring: #A7F3D0; /* Mint ring */
  --radius: 1rem;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Custom Selection */
::selection {
  background: #A7F3D0; /* Mint */
  color: #292524;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Liquid Glass Effects */
.glass-panel {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px -1px rgba(0, 0, 0, 0.02),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.05),
    0 10px 10px -5px rgba(0, 0, 0, 0.01),
    inset 0 0 20px rgba(255, 255, 255, 0.8);
  transform: translateY(-4px) scale(1.005);
  border-color: #ffffff;
}

/* Typography & Headings */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

/* Utility for the liquid melt effect container */
.liquid-container {
  filter: url('#goo');
}

/* Hide scrollbar but keep functionality */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #D6D3D1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A8A29E;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

@keyframes liquid-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Liquid Blobs Background */
.liquid-bg-blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.6;
  z-index: -1;
  animation: float 10s ease-in-out infinite;
}

/* Markdown Specifics for Blog/Projects */
.markdown h1 {
  @apply text-4xl font-bold mb-6 text-stone-800 tracking-tight;
}
.markdown h2 {
  @apply text-2xl font-semibold mt-8 mb-4 text-stone-800 tracking-tight;
}
.markdown p {
  @apply mb-4 leading-relaxed text-stone-600;
}
.markdown a {
  @apply text-stone-800 underline decoration-liquid-mint decoration-2 underline-offset-2 hover:text-black transition-colors;
}
.markdown ul {
  @apply list-disc list-inside mb-4 space-y-2 text-stone-600;
}
.markdown code {
  @apply bg-stone-100 px-1.5 py-0.5 rounded text-sm text-stone-800 font-mono;
}
.markdown pre {
  @apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6;
}