/* STREAMING_CHUNK: Base Light Mode Variables */
:root {
  --bg-main: #f8fafc; /* slate-50 */
  --bg-card: #ffffff; /* white */
  --text-main: #0f172a; /* slate-900 */
  --text-muted: #475569; /* slate-600 */
  --border-muted: #e2e8f0; /* slate-200 */

  /* Vibrant Purple & Green accents for light mode */
  --theme-purple: #7e22ce; /* purple-700 */
  --theme-purple-hover: #9333ea; /* purple-600 */
  --theme-green: #15803d; /* green-700 */
  --theme-green-hover: #16a34a; /* green-600 */
}

/* STREAMING_CHUNK: Dark Mode Variables */
.dark {
  --bg-main: #0f172a; /* slate-900 */
  --bg-card: #1e293b; /* slate-800 */
  --text-main: #f8fafc; /* slate-50 */
  --text-muted: #cbd5e1; /* slate-300 */
  --border-muted: #334155; /* slate-700 */

  /* Lighter, neon-leaning Purple & Green accents for dark mode contrast */
  --theme-purple: #a855f7; /* purple-500 */
  --theme-purple-hover: #c084fc; /* purple-400 */
  --theme-green: #22c55e; /* green-500 */
  --theme-green-hover: #4ade80; /* green-400 */
}

/* STREAMING_CHUNK: Base Layout Styling */
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* STREAMING_CHUNK: Custom Utility Classes */
.gradient-text {
  background: linear-gradient(
    to right,
    var(--theme-purple),
    var(--theme-green)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-link {
  position: relative;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--theme-green);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}