frontend/src/app/globals.css

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
}


.glass-panel {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.glass-panel::before,
.glass-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.glass-panel::before {
  top: -20%;
  left: -20%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent);
  transform: rotate(45deg);
}

.glass-panel::after {
  bottom: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}