frontend/src/styles/globals.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

:root {
  color-scheme: dark;
  --bg-base: #050816;
  --bg-surface: #0b1020;
  --bg-surface-2: #0f172a;
  --accent: #22c55e;
  --accent-soft: rgba(34, 197, 94, 0.16);
}

html {
  scroll-behavior: smooth;
}

body {
  @apply text-slate-50;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.10), transparent 32%),
    linear-gradient(135deg, var(--bg-base) 0%, var(--bg-surface) 52%, #08111a 100%);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #07101c;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #134e4a 0%, #15803d 100%);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0f766e 0%, #22c55e 100%);
}

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

/* Selection */
::-moz-selection {
  @apply bg-emerald-500 text-white;
}

::selection {
  background: rgba(34, 197, 94, 0.35);
  color: #fff;
}

/* Input placeholders */
::placeholder {
  color: #7c8aa5;
}

/* Form elements */
input[type='checkbox'],
input[type='radio'] {
  @apply cursor-pointer;
}

/* Links */
a {
  transition: color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

/* Code blocks */
code {
  @apply font-mono text-sm;
}

/* Focus rings */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(5, 8, 22, 1), 0 0 0 4px rgba(34, 197, 94, 0.5);
}