:root {
  --primary: #00B2A9;        /* teal - for links and navbar */
  --secondary: #6ECEB2;      /* mint - for headings */
  --accent: #F26522;         /* Gotham/Sirens orange - subtle accents */
  --text: #A5C4C1;           /* desaturated teal - main text (AAA compliant ~8:1) */
  --textMuted: #A5ACAF;      /* Eagles Storm Silver - dates/metadata */
  --darkGray: #222222;
}

body {
  background-color: var(--darkGray);
  color: var(--text);
  padding: 75px;
}

a {
  color: var(--primary);
}

a:hover {
  cursor: pointer;
  color: var(--secondary);
}

.content {
  color: var(--text);
  margin-top: 20px;
  text-align: center;
}

.navbar {
  background-color: var(--primary) !important;
  border-bottom: 2px solid var(--secondary);
}

.navbar-brand,
.navbar .nav-link {
  color: white;
}

.navbar-brand:hover,
.navbar .nav-link:hover {
  color: var(--darkGray);
}

.navbar-toggler {
  background-color: var(--secondary);
}

h1 {
  color: var(--secondary);
  font-size: 250%;
}

h2 {
  color: var(--textMuted);
  font-size: 125%;
}

/* Blog-specific */
.post-list {
  list-style: none;
  padding: 0;
}

.post-list li {
  margin-bottom: 0.5rem;
}

.post-list li a {
  color: var(--secondary);
}

.post-date {
  color: var(--textMuted);
  font-size: 85%;
}

.post-content {
  color: var(--text);
  text-align: left;
}

.post-tags {
  margin-top: 1rem;
}

a.post-tag,
a.post-tag:visited {
  display: inline-block;
  background-color: transparent;
  border: 1px solid var(--accent);
  color: var(--primary) !important;
  padding: 0.2rem 0.6rem;
  margin: 0.2rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 85%;
  text-decoration: none !important;
}

a.post-tag:hover {
  background-color: var(--secondary);
  color: white !important;
  text-decoration: none !important;
}

.tag-filters {
  margin: 1rem 0;
}

.tag-filter-label {
  font-size: 80%;
  color: var(--textMuted);
  margin-bottom: 0.5rem;
}

button.tag-toggle {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  margin: 0.2rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 90%;
  cursor: pointer;
  border: 2px solid var(--accent) !important;
  background-color: transparent !important;
  color: var(--text) !important;
  transition: background-color 0.15s, color 0.15s;
}

button.tag-toggle.active {
  background-color: var(--primary) !important;
  color: white !important;
}

button.tag-toggle:hover {
  background-color: var(--secondary) !important;
  color: white !important;
}

/* Footer */
.site-footer {
  margin-top: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--textMuted);
  text-align: center;
}

.footer-text {
  color: var(--text);
  margin-bottom: 0;
  font-size: 90%;
}

.footer-built {
  color: var(--textMuted);
  margin: 0;
  font-size: 85%;
}

.footer-built a {
  color: var(--primary);
  text-decoration: none;
}

.footer-built a:hover {
  color: var(--secondary);
}