/* ================================
   Haunted Lighthouse — Full Theme
   Author: Jason (your tame spectre)
   Notes: lightweight, upgrade-safe
   ================================ */

/* --- Core palette --- */
:root {
  --hl-bg: #0b0f14;           /* abyss */
  --hl-panel: #0e141b;        /* fogged charcoal */
  --hl-panel-glass: rgba(10,14,20,.85);
  --hl-border: #17202a;
  --hl-ink: #d7e6ef;          /* text */
  --hl-ink-dim: #9fb6c3;
  --hl-accent: #5ad1ff;       /* cold beacon blue */
  --hl-accent-dim: #2e91b0;
  --hl-accent-glow: #8fe3ff;
}

/* --- Global reset to dark seas --- */
html, body {
  background: var(--hl-bg) !important;
  color: var(--hl-ink) !important;
}

/* Standard text colouring in stray places */
body, .status__content, .drawer__inner, .column {
  color: var(--hl-ink) !important;
}

/* --- Links & emphasis with a faint glow --- */
a, .status__content a, .link-button {
  color: var(--hl-accent) !important;
  text-decoration: none;
}
a:hover, .status__content a:hover, .link-button:hover {
  color: var(--hl-accent-glow) !important;
  text-shadow: 0 0 6px rgba(138, 228, 255, 0.4);
}

/* --- Panels & columns: fogged glass --- */
.column, .columns-area__panels__main, .drawer, .modal-root__modal {
  background: var(--hl-panel-glass) !important;
  backdrop-filter: blur(2px);
  border: 1px solid var(--hl-border);
  border-radius: 10px;
}

/* Column headers / nav bars */
.ui__header, .drawer .navigation-bar, .account__header, .compose-form__warning {
  background: #0f1520 !important;
  border-bottom: 1px solid #1a2430 !important;
}

/* --- Buttons: beacon blue --- */
.button, .compose-form__publish, button.primary, .report__submit {
  background: var(--hl-accent) !important;
  border-color: var(--hl-accent-dim) !important;
  color: #05131a !important;
}
.button:hover, .compose-form__publish:hover, button.primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 12px rgba(90, 209, 255, .25);
}

/* Secondary/ghost buttons */
.button.button--link, .button.secondary, .icon-button {
  color: var(--hl-ink) !important;
  border-color: var(--hl-border) !important;
}
.button.button--link:hover, .button.secondary:hover {
  background: #101823 !important;
}

/* --- Inputs / compose box --- */
input, textarea, .autosuggest-textarea__textarea, .search__input {
  background: #0e141b !important;
  color: var(--hl-ink) !important;
  border: 1px solid var(--hl-border) !important;
}
input::placeholder, textarea::placeholder { color: #7d95a3 !important; }

/* --- Cards / statuses --- */
.status, .status__wrapper, .account-card, .boxed-group, .picture-in-picture__window {
  border-radius: 10px !important;
  border: 1px solid var(--hl-border) !important;
  background: #0d131a !important;
}

/* Meta chips / hashtags / counts */
.hashtag, .status__meta .icon-button, .notification__filter-bar .pillbar-button {
  color: #a7c7d6 !important;
}
.notification__filter-bar .pillbar-button--selected {
  background: #12202b !important;
  border-color: #1e3342 !important;
}

/* Tasteful lighthouse glyph on hashtags */
.status__content a.hashtag::before {
  content: "⚓";
  margin-right: .3rem;
  opacity: .7;
}

/* --- Public / landing page polish --- */
.public-layout .header, .landing-page__information {
  background: linear-gradient(180deg, rgba(5,10,14,.75), rgba(5,10,14,.9)) !important;
  border-bottom: 1px solid #13202a !important;
}
.public-layout .hero, .landing-page__information .information-board {
  background: rgba(10,14,20,.85) !important;
  border: 1px solid var(--hl-border);
  border-radius: 10px;
}

/* --- Modals --- */
.modal-root__modal {
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

/* --- Scrollbars (Chromium/Firefox) --- */
* {
  scrollbar-color: #1f2c38 #0b0f14;
  scrollbar-width: thin;
}
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: #1f2c38; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #274252; }

/* --- Small screens niceties --- */
@media (max-width: 720px) {
  .ui__header { background: #0e1520 !important; }
  .columns-area__panels__main { border: none; }
}

/* --- Optional: make verified links less garish --- */
.verified__mark { filter: drop-shadow(0 0 2px rgba(90,209,255,.5)); }

/* --- Footer links --- */
.footer a { color: #6faec6 !important; }

/* That’ll do. Keep it classy. */


