/* home.akhilbee.dev/theme.css */

:root {
  /* Light Mode Palette */
  --bg-color: #EFEFD0;
  --text-color: #000000;
  --heading-color: #FF6B35;
  --subheading-color: #F7C59F;
  --card-bg: #FFFFFF;
  --border-color: #F7C59F;

  /* Tag colors for Light Mode */
  --tag-bg: #FF6B35;
  --tag-text: #FFFFFF;
}

body.dark-mode {
  /* Dark Mode Palette */
  --bg-color: #004E89;
  --text-color: #FFFFFF;
  --heading-color: #75BBF1;
  --subheading-color: #1A659E;
  --card-bg: #003a66;
  --border-color: #1A659E;

  /* Tag colors for Dark Mode */
  --tag-bg: #1A659E;   /* Darker blue chip */
  --tag-text: #FFFFFF; /* White text stays crisp and readable */
}

/* Base styles automatically applied to all pages */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

.subheading, p.subtitle, h3.subheading {
  color: var(--subheading-color);
}

/* Badge / Tag Styles */
.tag {
  display: inline-block;
  background-color: var(--tag-bg);
  color: var(--tag-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  align-self: flex-start;
  transition: background-color 0.3s ease, color 0.3s ease;
}