client/src/app/globals.css

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

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-primary: #850E35;
  --bg-secondary: rgba(238, 105, 131, 0.2);
  --bg-card: rgba(238, 105, 131, 0.15);
  --bg-card-hover: rgba(238, 105, 131, 0.25);
  --bg-input: rgba(255, 196, 196, 0.1);

  --border-subtle: rgba(255, 196, 196, 0.2);
  --border-focus: #FFC4C4;

  --text-primary: #FCF5EE;
  --text-secondary: #FFC4C4;
  --text-muted: rgba(252, 245, 238, 0.65);

  --accent-primary: #FFC4C4;
  --accent-secondary: #FCF5EE;
  --accent-tertiary: #EE6983;
  --accent-gradient: linear-gradient(135deg, #FFC4C4 0%, #EE6983 100%);
  --accent-glow: 0 0 20px rgba(255, 196, 196, 0.4);

  --success: #2ecc71;
  --warning: #f1c40f;
  --danger: #e74c3c;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 2px 8px rgba(133, 14, 53, 0.06);
  --shadow-md: 0 4px 16px rgba(133, 14, 53, 0.1);
  --shadow-lg: 0 8px 32px rgba(133, 14, 53, 0.15);

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--accent-primary);
  color: white;
}

button {
  cursor: pointer;
  font-family: var(--font-family);
  border: none;
  outline: none;
}

input,
select,
textarea {
  font-family: var(--font-family);
  outline: none;
}

select {
  appearance: none;
  color: var(--text-primary);
  background: #850E35;
}

/* Maintain visibility fix in dropdowns */
option {
  background-color: #850E35;
  color: var(--text-primary);
  padding: 10px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.fade-in-up {
  animation: fadeInUp var(--transition-slow) both;
}

.stagger-1 {
  animation-delay: 0.1s;
}

.stagger-2 {
  animation-delay: 0.2s;
}

.stagger-3 {
  animation-delay: 0.3s;
}

.stagger-4 {
  animation-delay: 0.4s;
}