client/src/index.css

@import 'tailwindcss';

@theme {
  --bio-green: #16a34a;
  --bio-blue: #2563eb;
  --bio-purple: #9333ea;
  --bio-orange: #ea580c;
  --bio-yellow: #ca8a04;
  --bio-pink: #db2777;
  --bio-teal: #0d9488;
  --bio-cyan: #0891b2;
  --bio-lime: #65a30d;
}

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

:root {
  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: #334155;
  background-color: #f8fafc;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  transition: background-color 0.3s, color 0.3s;
  
  /* Enhanced font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Vibrant background gradient */
  background: linear-gradient(135deg, #f0f9ff 0%, #fdf2f8 50%, #f0fdf4 100%);
}

.dark body {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #052e16 100%);
}

h1, h2, h3, h4, h5, h6 {
  /* Improved font rendering for headings */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 800;
  
  /* Gradient text for headings */
  background: linear-gradient(90deg, var(--bio-green), var(--bio-blue), var(--bio-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  background: linear-gradient(90deg, #4ade80, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

button, a {
  /* Improved font rendering for interactive elements */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

/* Dark mode styles */
.dark {
  color: #f1f5f9;
  background-color: #0f172a;
}

/* Improved font rendering for all elements */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Gradient text utility class */
.text-gradient {
  background: linear-gradient(90deg, var(--bio-green), var(--bio-blue), var(--bio-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .text-gradient {
  background: linear-gradient(90deg, #4ade80, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient backgrounds */
.bg-gradient-bio {
  background: linear-gradient(135deg, var(--bio-green), var(--bio-blue), var(--bio-purple));
}

.bg-gradient-bio-alt {
  background: linear-gradient(135deg, var(--bio-pink), var(--bio-orange), var(--bio-yellow));
}

.bg-gradient-bio-light {
  background: linear-gradient(135deg, var(--bio-cyan), var(--bio-teal), var(--bio-lime));
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}