/*
 * Theme customization - edit these variables to change the look and feel.
 * No need to modify templates or Python code.
 */

:root {
  /* Pastel aqua & lavender theme - soft, cozy feel */

  /* Primary - pastel aqua (softer than bright cyan) */
  --theme-primary: #7ab8c4;

  /* Secondary - muted blue-lavender */
  --theme-secondary: #a8bdd4;

  /* Navbar - slightly deeper pastel aqua for contrast */
  --theme-navbar-bg: #6baab6;

  /* Body background - soft lavender */
  --theme-body-bg: #f3edf8;

  /* Success - soft sage green (pastel) */
  --theme-success: #6b9b7a;

  /* Danger - muted coral (pastel) */
  --theme-danger: #c97a7a;

  /* Cozy rounded font - Nunito (loaded in base.html) */
  --theme-font-family: "Nunito", system-ui, -apple-system, sans-serif;

  /* Logo height in navbar (e.g. 32px, 40px) */
  --theme-logo-height: 40px;

  /* Tag badge - pastel lavender */
  --theme-tag-bg: #b8a5d0;

  /* Slightly deeper pastel aqua for primary button hover (stays soft, no blue) */
  --theme-primary-hover: #65a3af;

  /* Bootstrap 5.3 – primary and hover so buttons stay pastel aqua (no default blue) */
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: 122, 184, 196;
  --bs-focus-ring-color: rgba(122, 184, 196, 0.25);
  --bs-btn-hover-bg: var(--theme-primary-hover);
  --bs-btn-hover-border-color: var(--theme-primary-hover);
  --bs-btn-active-bg: var(--theme-primary-hover);
  --bs-btn-active-border-color: var(--theme-primary-hover);
}

/* Apply theme to body */
body {
  background-color: var(--theme-body-bg);
  font-family: var(--theme-font-family);
  font-weight: 400;
}

/* Cozy heading weight - Nunito looks friendly when semibold */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* Navbar theming */
#app-navbar.navbar {
  background-color: var(--theme-navbar-bg) !important;
}

/* Logo in navbar */
.navbar-logo {
  height: var(--theme-logo-height);
  width: auto;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Optional: hide site name and show logo only */
/* .navbar-brand-text { display: none; } */

/* Bootstrap overrides using theme variables */
.btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active {
  background-color: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
}

.btn-success {
  background-color: var(--theme-success);
  border-color: var(--theme-success);
}

.btn-danger {
  background-color: var(--theme-danger);
  border-color: var(--theme-danger);
}

.btn-outline-primary {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.btn-outline-primary:hover {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 0.25rem rgba(122, 184, 196, 0.5);
}

.btn-outline-primary:active {
  border-color: var(--theme-primary);
}

/* Links */
a {
  color: var(--theme-primary);
}

/* Cards - soft border that fits pastel palette */
.card {
  border-color: rgba(184, 165, 208, 0.35);
  border-radius: 0.75rem;
}

/* Page transition animation */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main.container {
  animation: pageFadeIn 0.25s ease-out forwards;
}

/* Preserve line breaks in recipe instructions */
.recipe-instructions {
  white-space: pre-wrap;
}

/* Recipe tag badges */
.badge.recipe-tag {
  background-color: var(--theme-tag-bg);
}