/* Custom colors for Friendly Nudge based on Bootstrap 5 */

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

body {
  font-family: 'DynaPuff', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Define all color variables globally using :root */
:root {
  /* Primary Color: Soft Teal ()  */
  --bs-primary: #80CBC4;
  --bs-primary-dark: #65C0B7;
  --bs-primary-light: #DEEDEC;
  /* Secondary Color: Warm Peach */
  --bs-secondary: #FFDAB9;
  --bs-secondary-dark: #FFC693;
  --bs-secondary-light: #EDE5DE;
}

/* Button styles that use the global variables */
.btn-primary {
  /* Colour on display */
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  /* ... when hovered */
  --bs-btn-hover-bg: var(--bs-primary-dark);
  --bs-btn-hover-border-color: var(--bs-primary-dark);
  /* ... when clicked */
  --bs-btn-active-bg: var(--bs-primary-light);
  --bs-btn-active-border-color: var(--bs-primary-light);
  /* Text color for the button */  
  --bs-btn-color: #fff;
}

.btn-secondary {
  /* Colour on display */
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-color: #000;
  /* ... when hovered */
  --bs-btn-hover-bg: var(--bs-secondary-dark);
  --bs-btn-hover-border-color: var(--bs-secondary-dark);
  --bs-btn-hover-color: #000;
  /* ... when clicked */
  --bs-btn-active-bg: var(--bs-secondary-light);
  --bs-btn-active-border-color: var(--bs-secondary-light);
  --bs-btn-active-color: #000;
  /* Text color for the button */  
}

/* Background colors */
.bg-primary {
  background-color: var(--bs-primary) !important;
}
.bg-primary-light {
  background-color: var(--bs-primary-light) !important;
}
.bg-primary-dark {
  background-color: var(--bs-primary-dark) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}
.bg-secondary-light {
  background-color: var(--bs-secondary-light) !important;
}
.bg-secondary-dark {
  background-color: var(--bs-secondary-dark) !important;
}

/* Text colors */
.text-primary {
  color: var(--bs-primary) !important;
}
.text-primary-light {
  color: var(--bs-primary-light) !important;
}
.text-primary-dark {
  color: var(--bs-primary-dark) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}
.text-secondary-light {
  color: var(--bs-secondary-light) !important;
}
.text-secondary-dark {
  color: var(--bs-secondary-dark) !important;
}

/* Component-specific styles */
/* Navbar styles */
.navbar {
  background-color: var(--bs-primary) !important;
}

.navbar .navbar-nav .nav-link {
  color: var(--bs-secondary) !important;
  font-weight: bold;
  transition: color 0.2s ease-in-out;
}

.navbar .navbar-nav .nav-link:hover {
  color: var(--bs-secondary-dark) !important;
}

.card {
  border-color: #e0e0e0; /* A slightly darker neutral for card borders */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-3px);
}

/* Example usage for a gentle background highlight */
.nudge-highlight {
  background-color: rgba(128, 203, 196, 0.15); /* Soft Teal with low opacity */
  padding: 1rem;
  border-radius: 0.25rem;
}

/* Footer styles */
.footer {
  background-color: var(--bs-primary) !important;
  color: var(--bs-secondary) !important;
}

.footer .nav-link {
  color: var(--bs-secondary) !important;
  transition: color 0.2s ease-in-out;
}

.footer .nav-link:hover {
  color: var(--bs-secondary-dark) !important;
}