:root {
  --accent-color: #000000; /* logged out = black */
  --background-color: #ffffff; /* logged out = white */
}

body.is-logged-in {
  --accent-color: #52838a; /* logged in = light green/teal */
  --background-color: #faf7f2; /* logged in = beige */
}

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

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: #000000; /* Text always stays black */
  background: var(--background-color);
  font-family: 'Playfair Display', 'Libre Baskerville', 'Georgia', 'Times New Roman', 'Times', serif;
  transition: background-color 0.3s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Global button styles - all buttons should use accent color */
button {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  border: 2px solid var(--accent-color) !important;
  font-family: 'Playfair Display', 'Libre Baskerville', 'Georgia', 'Times New Roman', 'Times', serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button:hover:not(:disabled) {
  background-color: #333333 !important;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Cancel buttons are white with accent color text */
.cancel-button,
.profile-cancel-button,
.email-verify-cancel-button,
.delete-cancel-button {
  background-color: var(--background-color) !important;
  color: var(--accent-color) !important;
  border: 2px solid var(--accent-color) !important;
}

.cancel-button:hover:not(:disabled),
.profile-cancel-button:hover:not(:disabled),
.email-verify-cancel-button:hover:not(:disabled),
.delete-cancel-button:hover:not(:disabled) {
  background-color: #f5f5f5 !important;
}

/* Back buttons are transparent */
.back-button {
  background-color: transparent !important;
  color: var(--accent-color) !important;
  border: 2px solid var(--accent-color) !important;
}

.back-button:hover {
  background-color: #f5f5f5 !important;
}

/* Community tabs - inactive tabs use background, active tab uses accent */
.community-tab {
  background-color: var(--background-color) !important;
  color: var(--accent-color) !important;
  border: 2px solid var(--accent-color) !important;
}

.community-tab:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.community-tab.active {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* Delete confirm buttons are red */
.delete-confirm-button,
.delete-account-button,
.delete-account-button-small,
.delete-event-button,
.reject-button {
  background-color: #dc3545 !important;
  color: #ffffff !important;
  border: 2px solid #dc3545 !important;
}

.delete-confirm-button:hover:not(:disabled),
.delete-account-button:hover:not(:disabled),
.delete-account-button-small:hover:not(:disabled),
.delete-event-button:hover:not(:disabled),
.reject-button:hover:not(:disabled) {
  background-color: #c82333 !important;
  border-color: #c82333 !important;
}

/* Action buttons - standard accent color buttons */
.action-button,
.post-button,
.approve-button,
.remove-button,
.submit-button,
.save-button,
.auth-submit-button,
.join-button {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  border: 2px solid var(--accent-color) !important;
  font-weight: 700 !important;
  font-family: 'Playfair Display', 'Libre Baskerville', 'Georgia', 'Times New Roman', 'Times', serif !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  min-height: 44px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.action-button:hover:not(:disabled),
.post-button:hover:not(:disabled),
.approve-button:hover:not(:disabled),
.remove-button:hover:not(:disabled),
.submit-button:hover:not(:disabled),
.save-button:hover:not(:disabled),
.auth-submit-button:hover:not(:disabled),
.join-button:hover:not(:disabled) {
  opacity: 0.8;
  filter: brightness(0.9);
}

/* Like buttons use background color with accent text */
.like-button {
  background-color: var(--background-color) !important;
  color: var(--accent-color) !important;
  border: 2px solid var(--accent-color) !important;
}

.like-button:hover:not(:disabled) {
  background-color: #f5f5f5 !important;
}

/* Contact Organizer button is grey */
.contact-organizer-button {
  background-color: #666666 !important;
  color: #ffffff !important;
  border: 2px solid #666666 !important;
}

.contact-organizer-button:hover:not(:disabled) {
  background-color: #555555 !important;
  border-color: #555555 !important;
}

/* Links styled as buttons */
a.button {
  display: inline-block;
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  border: 2px solid var(--accent-color) !important;
  font-weight: 700 !important;
  font-family: 'Playfair Display', 'Libre Baskerville', 'Georgia', 'Times New Roman', 'Times', serif !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  min-height: 44px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  text-align: center;
  text-decoration: none;
}

a.button:hover {
  opacity: 0.8;
  filter: brightness(0.9);
}

/* Button class aliases for semantic usage */
.button-primary {
  /* Inherits from action-button, submit-button, etc. */
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  border: 2px solid var(--accent-color) !important;
  font-weight: 700 !important;
  font-family: 'Playfair Display', 'Libre Baskerville', 'Georgia', 'Times New Roman', 'Times', serif !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  min-height: 44px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.button-primary:hover:not(:disabled) {
  opacity: 0.8;
  filter: brightness(0.9);
}

.button-secondary {
  /* Background color button for cancel/secondary actions */
  background-color: var(--background-color) !important;
  color: var(--accent-color) !important;
  border: 2px solid var(--accent-color) !important;
  font-weight: 700 !important;
  font-family: 'Playfair Display', 'Libre Baskerville', 'Georgia', 'Times New Roman', 'Times', serif !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  min-height: 44px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.button-secondary:hover:not(:disabled) {
  background-color: #f5f5f5 !important;
}

.button-danger {
  /* Red button for delete/destructive actions - always red, never changes */
  background-color: #dc3545 !important;
  color: #ffffff !important;
  border: 2px solid #dc3545 !important;
  font-weight: 700 !important;
  font-family: 'Playfair Display', 'Libre Baskerville', 'Georgia', 'Times New Roman', 'Times', serif !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  min-height: 44px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.button-danger:hover:not(:disabled) {
  background-color: #c82333 !important;
  border-color: #c82333 !important;
}

/* Red buttons stay red even when logged in */
body.is-logged-in .button-danger,
body.is-logged-in .delete-confirm-button,
body.is-logged-in .delete-account-button,
body.is-logged-in .delete-account-button-small,
body.is-logged-in .delete-event-button,
body.is-logged-in .reject-button {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}

/* Mobile-first: ensure content is accessible on small screens */
/* Note: Keeping 18px minimum for elder-friendly design */
@media (max-width: 768px) {
  html {
    font-size: 18px; /* Maintain 18px minimum for accessibility */
  }
}