/* TODO: style 404 page */
/* TODO: overflow menu style when logged out on profile page to share */

:root {
  --gr-color-bg-primary: #FFF;
  --gr-color-bg-secondary: #DDD;
  --gr-color-bg-tertiary: rgb(249 247 247);
  --gr-color-primary: rgba(193, 34, 34, 0.8);
  --gr-color-primary-muted: rgba(193, 34, 34, 0.1);
  --gr-color-primary-alpha-0: rgba(193, 34, 34, 0);
  --gr-color-primary-alpha-25: rgba(193, 34, 34, 0.25);
  --gr-color-primary-alpha-30: rgba(193, 34, 34, 0.3);
  --gr-color-primary-alpha-40: rgba(193, 34, 34, 0.4);
  --gr-color-primary-alpha-60: rgba(193, 34, 34, 0.6);
  --gr-color-secondary: rgba(119, 178,85, 0.8);
  --gr-color-secondary-muted: rgba(119, 178, 85, 0.1);
}

[data-color-scheme="light"] {
  --color-bg-brand-base: var(--gr-color-primary);
  --color-bg-brand-base-hover: var(--gr-color-primary-alpha-60);
  --color-bg-brand-soft: var(--gr-color-primary-muted);
  --color-bg-brand-softest: var(--gr-color-bg-tertiary);
  --color-bg-success-base: var(--gr-color-secondary);
  --color-bg-success-soft: var(--gr-color-secondary-muted);
  --color-bg-success-softest: var(--gr-color-secondary-muted);
  --color-border-brand-soft: var(--gr-color-bg-secondary);
  --color-border-success-soft: var(--gr-color-secondary);
  --color-success-base: var(--gr-color-secondary);
  --color-success-soft: var(--gr-color-secondary-muted);
  --color-success-softest: var(--gr-color-secondary-muted);
  --color-text-brand: var(--gr-color-primary);
  --color-text-brand-soft: var(--gr-color-primary-alpha-60);
  --color-text-success: var(--gr-color-secondary);
  /*
  --color-text-brand-on-inverted
  --rich-text-container-color
  --rich-text-text-color
  --rich-text-decoration-color
  */
}

/*******************************************************************************
 * Global background
 ******************************************************************************/

body,
.tabs-bar__wrapper {
  border-top-color: transparent;
  background: linear-gradient(
    var(--gr-color-bg-secondary),
    var(--gr-color-bg-primary) 50px
  );
  background-attachment: fixed;
}

/*******************************************************************************
 * Logo
 ******************************************************************************/

#logo-symbol-wordmark > path[fill="url(#paint0_linear_89_11)"] {
  fill: var(--gr-color-primary);
}

.logo.logo--icon {
  filter: hue-rotate(105deg) saturate(0.8);
}

/*******************************************************************************
 * Boosted posts
 ******************************************************************************/

.status__wrapper:has(> .status__prepend > .status__prepend__icon > .icon-retweet) {
  background-color: var(--gr-color-secondary-muted);
}

.status__wrapper:has(> .status__prepend > .status__prepend__icon > .icon-retweet) .icon-button.active {
  --default-icon-color: var(--gr-color-secondary);
  --hover-icon-color: var(--gr-color-secondary);
}