/*
================================================================
  🌹 Laura's Mastodon — Dark Rose Theme
  Mastodon 4.7+
================================================================

  Rebuilt for Mastodon's semantic design-token system.

  Palette:
    Main background:     #412740
    Dark background:     #2f1e2e
    Dark accent:         #3c293e
    Highlight surface:   #51344f
    Border:              #694064
    Accent:              #96568d
    Standard text:       #BC99B7
    Bright text:         #ead8e7

  Strategy:
    1. Use Mastodon 4.7 semantic theme tokens
    2. Restore the visual hierarchy of the original theme
    3. Keep only intentional component-level overrides
    4. Avoid the old hardcoded-colour selector war
================================================================
*/


/* ============================================================
   🌹 Laura palette
   ============================================================ */

:root {
  --laura-bg: #412740;
  --laura-bg-dark: #2f1e2e;
  --laura-accent-dark: #3c293e;

  --laura-highlight: #51344f;
  --laura-border: #694064;

  --laura-accent: #96568d;

  --laura-text: #BC99B7;
  --laura-text-bright: #ead8e7;

  --laura-bg-tint: rgba(65, 39, 64, 0.80);
  --laura-modal-bg: rgba(47, 30, 46, 0.94);

  --laura-accent-soft: rgba(150, 86, 141, 0.20);
  --laura-accent-softest: rgba(150, 86, 141, 0.10);

  --laura-hover-overlay: rgba(188, 153, 183, 0.10);

  --avatar-border-radius: 8px;
}


/* ============================================================
   🎨 Mastodon 4.7 semantic design tokens
   ============================================================ */

:root,
html[data-color-scheme='dark'],
html[data-color-scheme='light'] {

  /* ----------------------------------------------------------
     Text hierarchy
     ---------------------------------------------------------- */

  --color-text-primary: var(--laura-text-bright) !important;
  --color-text-secondary: var(--laura-text) !important;
  --color-text-tertiary: var(--laura-accent) !important;

  --color-text-inverted: var(--laura-text-bright) !important;

  --color-text-brand: var(--laura-accent) !important;
  --color-text-brand-soft: var(--laura-accent) !important;
  --color-text-brand-hover: var(--laura-text-bright) !important;

  --color-text-on-brand-base: var(--laura-text-bright) !important;
  --color-text-brand-on-inverted: var(--laura-accent) !important;

  --color-text-error: var(--laura-accent) !important;
  --color-text-on-error-base: var(--laura-text-bright) !important;

  --color-text-warning: var(--laura-accent) !important;
  --color-text-on-warning-base: var(--laura-text-bright) !important;

  --color-text-success: var(--laura-accent) !important;
  --color-text-on-success-base: var(--laura-text-bright) !important;

  --color-text-disabled: var(--laura-accent) !important;
  --color-text-on-disabled: var(--laura-text) !important;

  --color-text-bookmark-highlight: var(--laura-accent) !important;
  --color-text-favourite-highlight: var(--laura-accent) !important;

  --color-text-on-media: var(--laura-text-bright) !important;
  --color-text-status-links: var(--laura-accent) !important;


  /* ----------------------------------------------------------
     Main surface hierarchy

     Primary   = normal timeline
     Secondary = deepest panels / inputs
     Tertiary  = secondary UI
     ---------------------------------------------------------- */

  --color-bg-primary: var(--laura-bg) !important;
  --color-bg-secondary: var(--laura-bg-dark) !important;
  --color-bg-tertiary: var(--laura-accent-dark) !important;


  /* ----------------------------------------------------------
     Mastodon 4.7 surface tokens
     ---------------------------------------------------------- */

  --color-bg-blend: var(--laura-bg-dark) !important;
  --color-bg-highlight: var(--laura-highlight) !important;


  /* ----------------------------------------------------------
     Inverted / overlay / media surfaces
     ---------------------------------------------------------- */

  --color-bg-inverted: var(--laura-bg-dark) !important;

  --color-bg-overlay-base: var(--laura-bg-dark) !important;
  --color-bg-overlay-highlight: var(--laura-hover-overlay) !important;
  --color-bg-overlay: var(--laura-modal-bg) !important;

  --color-bg-media: rgba(47, 30, 46, 0.88) !important;
  --color-bg-media-base: var(--laura-bg-dark) !important;

  --color-bg-disabled: var(--laura-accent-dark) !important;


  /* ----------------------------------------------------------
     Brand / interactive surfaces
     ---------------------------------------------------------- */

  --color-bg-brand-base: var(--laura-accent-dark) !important;
  --color-bg-brand-base-hover: var(--laura-bg-dark) !important;

  --color-bg-brand-soft: var(--laura-highlight) !important;
  --color-bg-brand-softest: var(--laura-accent-dark) !important;


  /* ----------------------------------------------------------
     Error / warning / success

     Retains the old theme's intentionally rose-based treatment.
     ---------------------------------------------------------- */

  --color-bg-error-base: var(--laura-accent-dark) !important;
  --color-bg-error-base-hover: var(--laura-bg-dark) !important;
  --color-bg-error-soft: var(--laura-highlight) !important;
  --color-bg-error-softest: var(--laura-accent-dark) !important;

  --color-bg-warning-base: var(--laura-accent-dark) !important;
  --color-bg-warning-soft: var(--laura-highlight) !important;
  --color-bg-warning-softest: var(--laura-accent-dark) !important;

  --color-bg-success-base: var(--laura-accent-dark) !important;
  --color-bg-success-soft: var(--laura-highlight) !important;
  --color-bg-success-softest: var(--laura-accent-dark) !important;


  /* ----------------------------------------------------------
     Borders

     Stronger than v2 to restore separation between columns,
     cards and highlighted areas.
     ---------------------------------------------------------- */

  --color-border-primary: var(--laura-border) !important;

  --color-border-brand: var(--laura-accent) !important;
  --color-border-brand-soft: var(--laura-border) !important;

  --color-border-strong: var(--laura-accent) !important;

  --color-border-error: var(--laura-accent) !important;
  --color-border-error-soft: var(--laura-border) !important;

  --color-border-warning-soft: var(--laura-border) !important;
  --color-border-success-soft: var(--laura-border) !important;

  --color-border-media: var(--laura-border) !important;


  /* ----------------------------------------------------------
     Rich text / quotes / code
     ---------------------------------------------------------- */

  --rich-text-container-color: var(--laura-accent-dark) !important;
  --rich-text-text-color: var(--laura-text) !important;
  --rich-text-decorations-color: var(--laura-accent) !important;


  /* ----------------------------------------------------------
     Graphs / charts
     ---------------------------------------------------------- */

  --color-graph-primary-stroke: var(--laura-accent) !important;
  --color-graph-primary-fill: var(--laura-accent-dark) !important;

  --color-graph-warning-stroke: var(--laura-accent) !important;
  --color-graph-warning-fill: var(--laura-accent-dark) !important;

  --color-graph-disabled-stroke: var(--laura-text) !important;
  --color-graph-disabled-fill: var(--laura-bg-dark) !important;
}


/* ============================================================
   🧱 Column / navigation hierarchy

   Restores the lighter plum header treatment visible in the
   original Dark Rose theme.
   ============================================================ */

.column-header,
.column-header__wrapper {
  background-color: var(--laura-highlight) !important;
  color: var(--laura-text-bright) !important;
}


.column-header__button,
.column-header__back-button,
.column-back-button {
  color: var(--laura-text) !important;
}


.notification__filter-bar,
.account__section-headline {
  background-color: var(--laura-accent-dark) !important;
}


/* ============================================================
   ✏️ Inputs and compose fields
   ============================================================ */

input,
textarea,
select,
.select,
.dropdown-button,
.compose-form__highlightable,
.compose-form__autosuggest-wrapper,
.spoiler-input__input,
.simple_form input,
.simple_form textarea {
  background-color: var(--laura-bg-dark) !important;
  color: var(--laura-text) !important;
  border-color: var(--laura-border) !important;
}


input::placeholder,
textarea::placeholder {
  color: var(--laura-text) !important;
  opacity: 0.72;
}


input:focus,
textarea:focus,
select:focus,
.select:focus,
.dropdown-button:focus,
.compose-form__autosuggest-wrapper:focus-within,
.simple_form input:focus,
.simple_form textarea:focus {
  background-color: var(--laura-bg-dark) !important;
  border-color: var(--laura-accent) !important;
  outline-color: var(--laura-accent) !important;
}


/* Compose panel */

.compose-panel,
.compose-panel__footer {
  background-color: var(--laura-bg) !important;
}


/* Search / autocomplete / hovercard surfaces */

.search-suggestion,
.search__popout,
.account-hovercard {
  background-color: var(--laura-bg-dark) !important;
  color: var(--laura-text) !important;
  border-color: var(--laura-border) !important;
}


/* ============================================================
   🔘 Buttons
   ============================================================ */

.button,
.button--primary,
.dropdown-button {
  background-color: var(--laura-accent-dark) !important;
  color: var(--laura-accent) !important;
  border-color: var(--laura-accent) !important;
}


.button:hover,
.button:focus,
.button--primary:hover,
.button--primary:focus,
.dropdown-button:hover,
.dropdown-button:focus {
  background-color: var(--laura-bg-dark) !important;
  color: var(--laura-text-bright) !important;
  border-color: var(--laura-accent) !important;
}


/* ============================================================
   💗 Interactive text and icons
   ============================================================ */

.icon-button,
.icon-button--muted,
.column-header__button,
.column-back-button,
.drawer__tab,
.navigation-bar .icon-button,
.compose-form__actions .icon-button,
.status__action-bar .icon-button,
.status__info .icon-button,
.status__relative-time,
.status__prepend,
.status__content a,
.status__content a.unhandled-link,
.reply-indicator__content a,
.edit-indicator__content a,
.load-more,
.character-counter {
  color: var(--laura-accent) !important;
}


/* Hover provides a little extra contrast */

.icon-button:hover,
.icon-button.active,
.column-header__button:hover,
.column-back-button:hover,
.drawer__tab:hover,
.navigation-bar .icon-button:hover {
  color: var(--laura-text-bright) !important;
}


/* ============================================================
   🪪 Primary names / headings

   This is one of the biggest contrast restorations versus v2.
   Names were noticeably brighter in the original theme.
   ============================================================ */

.status__display-name .display-name strong,
.account__display-name .display-name strong,
.detailed-status__display-name,
.navigation-bar .display-name strong,
.notification-group__main__header__label strong,
.notification-group__main__header__label bdi,
.account__header__tabs__name h1,
.column-header__wrapper h1,
.column-header__wrapper strong {
  color: var(--laura-text-bright) !important;
}


/* ============================================================
   📝 Normal body copy

   Keep this at the original #BC99B7 so headings/names stand out.
   ============================================================ */

.reply-indicator__content,
.edit-indicator__content,
.status__content,
.empty-column-indicator,
.timeline-hint,
.getting-started,
.link-footer,
.account__header__bio .account__header__content {
  color: var(--laura-text) !important;
}


/* ============================================================
   🪶 Secondary metadata
   ============================================================ */

.status__relative-time,
.status__prepend,
.detailed-status__meta,
.account__header__tabs__name h1 small,
.account__header__bio .account__header__fields dt,
.account__header__extra__links a,
.notification-group__main__additional-content {
  color: var(--laura-accent) !important;
}


/* ============================================================
   🃏 Preview cards / embedded statuses
   ============================================================ */

.status-card__content,
.status-card__media,
.status-card__image-preview,
.notification-group__embedded-status__content,
.notification-group__embedded-status__footer,
.account__domain-pill {
  background-color: var(--laura-accent-dark) !important;
  border-color: var(--laura-border) !important;
}


.status-card__title {
  color: var(--laura-text-bright) !important;
}


.status-card__host,
.status-card__description,
.status-card__author,
.status-card__time,
.notification-group__embedded-status__account {
  color: var(--laura-text) !important;
}


/* ============================================================
   💬 Selected / highlighted content

   Gives private mentions, selected notifications and similar
   UI a visibly separate plum layer.
   ============================================================ */

.notification-group--unread,
.notification-group--direct,
.notification-group--mention {
  border-color: var(--laura-border) !important;
}


/* ============================================================
   👤 Avatar shape
   ============================================================ */

.account__avatar,
.account__avatar img {
  border-radius: 8px !important;
}


/* ============================================================
   📌 Active navigation accents
   ============================================================ */

.notification__filter-bar button.active::before,
.account__section-headline a.active::before {
  background-color: var(--laura-accent) !important;
}


/* ============================================================
   📈 Trend graph
   ============================================================ */

.trends__item__sparkline path:first-child {
  fill: var(--laura-accent-dark) !important;
}


.trends__item__sparkline path:last-child {
  stroke: var(--laura-accent) !important;
}


/* ============================================================
   🔔 Notification icons
   ============================================================ */

.notification-group--follow .notification-group__icon,
.notification-group--follow-request .notification-group__icon,
.notification-group--favourite .notification-group__icon,
.notification-group--reblog .notification-group__icon,
.search__icon .icon {
  color: var(--laura-accent) !important;
}


/* ============================================================
   🛡️ Admin UI compatibility
   ============================================================ */

.admin-wrapper .content__heading__tabs a,
.admin-wrapper .admin-menu__link {
  color: var(--laura-text) !important;
}


.admin-wrapper .content__heading__tabs a:hover,
.admin-wrapper .admin-menu__link:hover {
  background-color: var(--laura-accent-dark) !important;
  color: var(--laura-text-bright) !important;
}


.admin-wrapper .button--secondary,
.admin-wrapper .button--tertiary {
  background-color: var(--laura-accent-dark) !important;
  border-color: var(--laura-accent) !important;
  color: var(--laura-accent) !important;
}


/* ============================================================
   🖱️ Scrollbars
   ============================================================ */

* {
  scrollbar-color: var(--laura-text) var(--laura-bg-dark);
}