/* Trusted Nanny Website Styles */

/* Import component styles */
@import url('./components/navbar.css');
@import url('./components/footer.css');
@import url('./components/search-form.css');
@import url('./components/agent-card.css');

/* CSS Variables for consistent theming - Official Brand Colors */
:root {
  /* Main brand colors (from COLOR_SCHEME_IMPLEMENTATION.md) */
  --color-primary: #FF66C4;      /* Vibrant pink (Primary) */
  --color-secondary: #F5F4F4;    /* Light gray (Secondary) */
  --color-dark: #0F0F0F;         /* Deep black (Dark) */
  --color-white: #FFFFFF;        /* Pure white (White) */

  /* Primary pink variations */
  --color-pink-500: #FF66C4;     /* Primary pink (base) */
  --color-pink-600: #E653B3;     /* Darker pink */
  --color-pink-700: #CC4099;     /* Dark pink */

  /* Gray scale */
  --color-gray-50: #FAFAFA;      /* Lightest gray */
  --color-gray-100: #F5F4F4;     /* Secondary color (base) */
  --color-gray-200: #EEEEEE;     /* Light gray */
  --color-gray-300: #E0E0E0;     /* Medium light gray */
  --color-gray-500: #9E9E9E;     /* Gray */
  --color-gray-600: #757575;     /* Medium dark gray */
  --color-gray-700: #616161;     /* Dark gray */

  /* Legacy variable names for backward compatibility */
  --primary-color: var(--color-primary);
  --primary-dark: var(--color-pink-600);
  --accent-color: var(--color-pink-700);
  --text-primary: var(--color-dark);
  --text-secondary: var(--color-gray-600);
  --border-color: var(--color-gray-300);
  --bg-light: var(--color-gray-50);
  --bg-white: var(--color-white);
  --secondary-color: var(--color-secondary);
}

/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: #f8fafc;
  margin: 0;
  padding: 0;
}

.trusted-nanny-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Common utility classes */
.text-center {
  text-align: center;
}

.section-padding {
  padding: 5rem 0;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
}

/* Button styles */
.btn-primary {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-1px);
  color: white;
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-secondary:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Loading states */
.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Fade transitions */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .section-padding {
    padding: 3rem 0;
  }
}