/* ─── BASE ──────────────────────────────────────────────── */
body, .ui, .columns-area,
.columns-area__panels,
.columns-area__panels__main {
  background-color: #faf0e2 !important;
}

/* ─── LEFT COMPOSE PANEL ────────────────────────────────── */
.column,
.drawer,
.drawer__inner,
.drawer__inner__mastodon,
.navigation-panel {
  background-color: #f0e4d0 !important;
  border-right: 1px solid #ddd0bc !important;
}

/* ─── RIGHT NAV PANEL ───────────────────────────────────── */
.columns-area__panels__pane--navigational {
  background-color: #f0e4d0 !important;
}

/* ─── LOGO / WORDMARK REPLACEMENT ───────────────────────── */
/* Hide the default Mastodon elephant SVG and wordmark text  */
.navigation-panel__logo svg,
.navigation-panel__logo img,
.navigation-panel__logo .logo,
.navigation-panel__logo .logo--wordmark {
  display: none !important;
}

/* Replace with your own text or icon via the logo link itself */
.navigation-panel__logo {
  display: flex !important;
  align-items: center !important;
  color: #2a1a0a !important;          /* was #3d2b1a — darker */
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  padding: 12px 16px !important;
  gap: 10px !important;
}

/* Inject your site name as a CSS pseudo-element */
.navigation-panel__logo::before {
  content: 'Thistle & Fern';
  color: #2a1a0a !important;          /* was #3d2b1a — darker */
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ─── NAV LINKS ─────────────────────────────────────────── */
.column-link,
.navigation-panel .column-link {
  color: #2e1a08 !important;          /* was #5a3e28 — much darker */
  font-weight: 500 !important;        /* was 400 — slightly heavier for legibility */
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.column-link:hover,
.column-link:focus {
  background-color: #e8d9c4 !important;
  color: #a07c1a !important;          /* was #c49a35 — darker gold on hover */
}

.column-link--active,
.column-link--active .column-link__icon {
  color: #a07c1a !important;          /* was #c49a35 — darker gold */
  font-weight: 700 !important;        /* was 600 */
}

/* Nav icons */
.column-link .icon,
.column-link svg {
  color: #5a3e28 !important;          /* was #8a7060 — much darker */
  transition: color 0.2s ease !important;
}

.column-link:hover .icon,
.column-link:hover svg,
.column-link--active .icon,
.column-link--active svg {
  color: #a07c1a !important;          /* was #c49a35 — darker gold */
}

/* ─── CENTER TIMELINE COLUMN ────────────────────────────── */
.column > .scrollable,
.column .scrollable,
.status-list,
.account__section-headline {
  background-color: #fdf8f2 !important;
}

/* ─── COLUMN HEADER ─────────────────────────────────────── */
.column-header,
.column-header__wrapper {
  background-color: #e8d9c4 !important;
  border-bottom: 2px solid #6ab5b0 !important;
  color: #2a1a0a !important;          /* was #3d2b1a — darker */
  font-weight: 600 !important;        /* was 500 */
  letter-spacing: 0.03em !important;
}

.column-header__icon,
.column-header button,
.column-header__title {
  color: #2e1a08 !important;          /* was #5a3e28 — darker */
}

/* ─── TOOTS ──────────────────────────────────────────────── */
.status, .detailed-status {
  background-color: #fdf8f2 !important;
  border-bottom: 1px solid #e8ddd0 !important;
  transition: background 0.15s ease !important;
}

.status:hover {
  background-color: #f5ece0 !important;
}

.status__content, .detailed-status__content {
  color: #1e1008 !important;          /* was #3d2b1a — noticeably darker for body text */
  line-height: 1.6 !important;
  font-size: 0.95rem !important;
}

/* ─── LINKS ──────────────────────────────────────────────── */
a, .status__content a {
  color: #7a5a10 !important;          /* was #b8891e — darker amber, still golden */
  transition: color 0.2s ease !important;
}

a:hover {
  color: #3d8f8a !important;          /* was #6ab5b0 — slightly deeper teal */
}

/* ─── COMPOSE AREA ───────────────────────────────────────── */
.compose-form,
.autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  background-color: #fdfaf6 !important;
  color: #1e1008 !important;          /* was #3d2b1a — darker input text */
  border-color: #d4c4ac !important;
  border-radius: 8px !important;
}

.compose-form__buttons-wrapper {
  background-color: #f0e4d0 !important;
  border-top: 1px solid #d4c4ac !important;
}

/* ─── COMPOSE ICON BUTTONS ───────────────────────────────── */
.compose-form__upload-button-icon,
.icon-button,
.icon-button .icon,
.icon-button svg {
  color: #5a3e28 !important;          /* was #8a7060 — much darker */
  transition: color 0.2s ease !important;
}

.icon-button:hover .icon,
.icon-button:hover svg,
.icon-button:focus .icon {
  color: #a07c1a !important;          /* was #c49a35 — darker gold */
}

/* ─── POST BUTTON ────────────────────────────────────────── */
.button, .compose-form .compose-form__submit .button {
  background-color: #c49a35 !important;
  color: #fdfaf6 !important;
  border-radius: 20px !important;
  font-weight: 600 !important;        /* was 500 — slightly bolder for legibility */
  letter-spacing: 0.04em !important;
  border: none !important;
  transition: background 0.2s ease !important;
}

.button:hover {
  background-color: #3d8f8a !important; /* was #6ab5b0 — deeper teal */
}

/* ─── ACCOUNT NAMES ──────────────────────────────────────── */
.display-name__html,
.account__display-name strong {
  color: #2a1a0a !important;          /* was #3d2b1a — darker */
  font-weight: 600 !important;
}

.display-name__account,
.status__relative-time,
.status__visibility-icon {
  color: #5a4030 !important;          /* was #9a8070 — much darker; this was the worst offender */
}

/* ─── SEARCH ─────────────────────────────────────────────── */
.search__input {
  background-color: #fdfaf6 !important;
  color: #1e1008 !important;          /* was #3d2b1a — darker */
  border: 1px solid #d4c4ac !important;
  border-radius: 20px !important;
}

.search__input::placeholder {
  color: #7a6050 !important;          /* was #b09880 — much darker placeholder */
}

/* ─── TEAL HAIRLINE ──────────────────────────────────────── */
body::before {
  content: '';
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6ab5b0, #c49a35, #6ab5b0) !important;
  z-index: 9999;
}

/* ─── SCROLLBARS ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f0e4d0; }
::-webkit-scrollbar-thumb { background: #c9a84c; border-radius: 4px; }

/* ─── FOOTER / SMALL TEXT ────────────────────────────────── */
.link-footer, .link-footer a, .link-footer p {
  color: #5a4030 !important;          /* was #9a8070 — much darker */
  font-size: 0.8rem !important;
}