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

:root {
  --bg-color: #f3f4f6;
  --text-color: #1f2937;
  --text-secondary-color: #4b5563;
  --card-bg-color: #ffffff;
  --header-bg-color: #ffffff;
  --prose-color: #374151;
  --prose-headings-color: #111827;
}

.dark {
  --bg-color: #111827;
  --text-color: #f9fafb;
  --text-secondary-color: #d1d5db;
  --card-bg-color: #1f2937;
  --header-bg-color: #1f2937;
  --prose-color: #d1d5db;
  --prose-headings-color: #f9fafb;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
  transition: background-color 0.4s cubic-bezier(0.4,0,0.2,1), color 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* More responsive typography */
h1 {
    @apply text-4xl md:text-5xl;
}

h2 {
    @apply text-2xl md:text-3xl;
}

/* Adding a bit more style to the tool cards on hover */
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.glass-navbar {
  backdrop-filter: blur(24px) saturate(160%);
  background: linear-gradient(90deg, var(--header-bg-color, #fff) 60%, rgba(245,245,255,0.7) 100%);
  border-bottom: 1.5px solid rgba(200,200,220,0.25);
  box-shadow: 0 4px 32px 0 rgba(80,80,120,0.07);
  transition: background 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}
.dark .glass-navbar {
  background: linear-gradient(90deg, var(--header-bg-color, #1f2937) 60%, rgba(40,40,60,0.8) 100%);
  border-bottom: 1.5px solid rgba(80,80,120,0.18);
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.18);
}

input,
select,
textarea {
  background-color: var(--card-bg-color);
  color: var(--text-color);
  border-color: #d1d5db;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.dark input,
.dark select,
.dark textarea {
  background-color: var(--card-bg-color);
  color: var(--text-color);
  border-color: #374151;
}