:root {
  /* Mastodon dark palette */
  --masto-bg1:      #191b22;   /* deepest background (body) */
  --masto-bg2:      #282c37;   /* panel / card background */
  --masto-bg3:      #313543;   /* elevated elements */
  --masto-bg4:      #393f4f;   /* hover / borders */

  --masto-fg1:      #ffffff;   /* primary text */
  --masto-fg2:      #d9e1e8;   /* secondary text */
  --masto-fg3:      #9baec8;   /* muted / reduced text */

  --masto-purple1:  #c8c3f8;   /* light purple (links / highlights) */
  --masto-purple2:  #858afa;   /* medium purple */
  --masto-purple3:  #6364ff;   /* Mastodon signature purple */
  --masto-purple4:  #563acc;   /* button / accent */
  --masto-purple5:  #2a2060;   /* deep purple */

  --masto-blue:     #2b90d9;   /* info / link blue */
  --masto-green:    #79bd9a;   /* success / boosted */
  --masto-red:      #df405a;   /* danger / error */
  --masto-yellow:   #ca8f04;   /* warning */

  /* ── Map GoToSocial variables to Mastodon colours ── */

  /* Page background & foreground */
  --bg:             var(--masto-bg1);
  --bg-accent:      var(--masto-bg2);
  --fg:             var(--masto-fg2);
  --fg-reduced:     var(--masto-fg3);

  /* Profile page */
  --profile-bg:     var(--masto-bg2);

  /* Buttons */
  --button-bg:      var(--masto-purple4);
  --button-fg:      var(--masto-fg1);

  /* Statuses */
  --status-bg:           var(--masto-bg2);
  --status-focus-bg:     var(--masto-bg3);
  --status-info-bg:      var(--masto-bg3);
  --status-focus-info-bg:var(--masto-bg4);

  /* Links */
  --link-fg:        var(--masto-purple2);

  /* Input fields */
  --input-bg:       var(--masto-bg3);
  --input-fg:       var(--masto-fg1);

  /* Box-shadow border */
  --boxshadow-border: 0.08rem solid var(--masto-bg4);

  /* Override blue shades used throughout */
  --blue1: var(--masto-purple1);
  --blue2: var(--masto-purple2);
  --blue3: var(--masto-purple3);

  /* Orange trim → use Mastodon purple */
  --orange2: var(--masto-purple3);
}

/* ── Body background ── */
body {
  background: linear-gradient(180deg, var(--masto-bg1) 0%, #0d0f17 100%);
}

/* ── Scrollbar ── */
html, body {
  scrollbar-color: var(--masto-purple3) var(--masto-bg2);
}

/* ── Links ── */
a, a:visited {
  color: var(--masto-purple2);
}
a:hover {
  color: var(--masto-purple1);
  text-decoration: underline;
}

/* ── Profile fields ── */
.profile .about-user .fields .field {
  border-bottom: 0.1rem solid var(--masto-bg4);
}
.profile .about-user .fields .field:first-child {
  border-top: 0.1rem solid var(--masto-bg4);
}

/* Verified profile fields */
.profile .about-user .fields .field.verified {
  border-color: var(--masto-green);
}
.profile .about-user .fields .field.verified a {
  color: var(--masto-green);
}

/* ── Status media ── */
.status .media .media-wrapper {
  border: 0.08rem solid var(--masto-bg4);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
  color: var(--masto-fg3);
}
.status .media .media-wrapper details video.plyr-video {
  background: var(--masto-bg2);
}

/* ── Status polls ── */
.status .text .poll {
  background-color: var(--masto-bg3);
}
.status .text .poll .poll-info {
  background-color: var(--masto-bg2);
}
.status .text .poll .poll-option label::before {
  border-color: var(--masto-purple3);
}

/* ── Code snippets ── */
pre, pre[class*="language-"],
code, code[class*="language-"] {
  background-color: var(--masto-bg3);
  color: var(--masto-fg3);
  border: 0.08rem solid var(--masto-bg4);
}

/* ── Block quotes ── */
blockquote {
  background-color: var(--masto-bg3);
  color: var(--masto-fg3);
  border-left: 0.25rem solid var(--masto-purple3);
}

/* ── Buttons ── */
.button, button {
  background-color: var(--masto-purple4);
  color: var(--masto-fg1);
  border-radius: 4px;
}
.button:hover, button:hover {
  background-color: var(--masto-purple3);
}


/* ── Hashtag / mention chips ── */
.mention, .hashtag {
  color: var(--masto-purple2);
}