:root {
  /* Backgrounds */
  --color-bg-primary: #0a0a12;
  --color-bg-secondary: #1c1530;
  --color-bg-elevated: #1c1530;
  --color-bg-brand-base: #8b5cf6;

  /* Text */
  --color-text-primary: #e5e5f0;
  --color-text-secondary: #cce0ff;
  --color-text-on-brand-base: #ffffff;

  /* Accents */
  --color-accent-base: #8b5cf6;
  --color-accent-soft: #c164e5;
  --color-border-primary: #2a2a44;

  /* Status colors */
  --color-error: #f52b0b;
  --color-success: #0e9175;
}


/* ── Fallback selectors ──────────────────────
   For pieces the tokens above don't reach.
   If something still looks default, it's
   probably styled here. */

/* Main columns and panels */
.column,
.drawer,
.ui__header,
.compose-panel {
  background: #0a0a12;
  border-color: #2a2a44;
}

/* The compose box */
.compose-form__textarea,
.autosuggest-textarea__textarea {
  background: #1c1530;
  color: #e5e5f0;
  border-color: #2a2a44;
}

/* Buttons */
.button,
.icon-button {
  background: #1c1530;
  border-color: #2a2a44;
  color: #e5e5f0;
}

.button:hover,
.icon-button:hover {
  background: #2a2a44;
  border-color: #8b5cf6;
}

/* Primary action buttons */
.button--primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #c164e5 100%);
  border: none;
  color: #ffffff;
}

.button--primary:hover {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

/* Links */
a,
.status__display-name,
.status__relative-time {
  color: #8b5cf6;
}

a:hover {
  color: #c164e5;
}

/* Status (post) cards */
.status {
  border-bottom: 1px solid #2a2a44;
}

.status:hover {
  background: rgba(139, 92, 246, 0.05);
}

/* Avatars — violet ring */
.account__avatar img,
.status__avatar img {
  border: 2px solid #8b5cf6;
  border-radius: 50%;
}

/* Boost and favourite buttons */
.status__action-bar-button {
  color: #cce0ff;
}

.status__action-bar-button:hover {
  color: #8b5cf6;
}

.status__action-bar-button.active {
  color: #c164e5;
}

/* Hashtags in posts */
.hashtag {
  color: #8b5cf6;
}

.hashtag:hover {
  color: #c164e5;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1c1530;
}

::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c164e5;
}

/* Selection */
::selection {
  background: rgba(139, 92, 246, 0.4);
  color: #ffffff;
}