/* =========================================
 * GIRLY / FEMININE COLOR THEME
 * Mastodon 4.6.x
 *
 * Compact timeline is preserved.
 * ========================================= */

:root {
  /* -----------------------------------------
   * Base
   * ----------------------------------------- */

  --fur-bg-primary: #faf4f5;
  --fur-bg-secondary: #f3e7e9;
  --fur-bg-tertiary: #ead8dc;

  /* Cards / surfaces */
  --fur-surface: #fffafb;
  --fur-surface-soft: #fdf1f4;

  /* Text */
  --fur-text-primary: #4a4143;
  --fur-text-secondary: #8a777b;
  --fur-text-tertiary: #aa969b;

  /* Border */
  --fur-border: #e6d4d8;

  /* Main pink */
  --fur-brand: #c27f91;
  --fur-brand-hover: #ad687c;
  --fur-brand-soft: #f3dfe5;

  /* Champagne / beige */
  --fur-accent: #c8a98f;
  --fur-accent-soft: #f1e6dc;

  /* Link */
  --fur-link: #927080;


  /* =========================================
   * Mastodon 4.6 design tokens
   * ========================================= */

  --color-text-primary: var(--fur-text-primary);
  --color-text-secondary: var(--fur-text-secondary);
  --color-text-tertiary: var(--fur-text-tertiary);

  --color-text-brand: var(--fur-brand);
  --color-text-brand-soft: var(--fur-brand);

  --color-bg-primary: var(--fur-bg-primary);
  --color-bg-secondary: var(--fur-bg-secondary);
  --color-bg-tertiary: var(--fur-bg-tertiary);

  --color-bg-brand-base: var(--fur-brand);
  --color-bg-brand-soft: var(--fur-brand-soft);
  --color-bg-brand-softest: #fdf0f3;

  --color-border-primary: var(--fur-border);
  --color-border-brand: var(--fur-brand);
  --color-border-brand-soft: #dfbcc5;

  --color-text-status-links: var(--fur-link);
}


/* =========================================
 * DARK MODE
 * ========================================= */

[data-color-scheme="dark"] {
  --fur-bg-primary: #2d2729;
  --fur-bg-secondary: #362e31;
  --fur-bg-tertiary: #41363a;

  --fur-surface: #382f32;
  --fur-surface-soft: #403438;

  --fur-text-primary: #f2e7ea;
  --fur-text-secondary: #c8b6bb;
  --fur-text-tertiary: #a8949a;

  --fur-border: #55464b;

  --fur-brand: #d494a6;
  --fur-brand-hover: #e0a7b7;
  --fur-brand-soft: #50383f;

  --fur-accent: #c9aa91;
  --fur-accent-soft: #493d37;

  --fur-link: #d0a7b5;

  --color-text-primary: var(--fur-text-primary);
  --color-text-secondary: var(--fur-text-secondary);
  --color-text-tertiary: var(--fur-text-tertiary);

  --color-text-brand: var(--fur-brand);
  --color-text-brand-soft: var(--fur-brand);

  --color-bg-primary: var(--fur-bg-primary);
  --color-bg-secondary: var(--fur-bg-secondary);
  --color-bg-tertiary: var(--fur-bg-tertiary);

  --color-bg-brand-base: var(--fur-brand);
  --color-bg-brand-soft: var(--fur-brand-soft);
  --color-bg-brand-softest: #46353a;

  --color-border-primary: var(--fur-border);
  --color-border-brand: var(--fur-brand);
  --color-border-brand-soft: #704b56;

  --color-text-status-links: var(--fur-link);
}


/* =========================================
 * BODY
 * ========================================= */

html,
body {
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(255, 225, 234, 0.35),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(226, 203, 184, 0.18),
      transparent 30%
    ),
    var(--color-bg-primary);
}


/* =========================================
 * LINKS
 * ========================================= */

a {
  transition: color 140ms ease;
}

.status__content a {
  color: var(--fur-link);
}

.status__content a:hover {
  color: var(--fur-brand);
}

.status__content a.hashtag,
.status__content a.mention {
  color: var(--fur-brand);
}


/* =========================================
 * BUTTONS
 * ========================================= */

button,
.button {
  border-radius: 10px;

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

button:hover,
.button:hover {
  box-shadow:
    0 3px 10px rgba(170, 100, 120, 0.12);
}


/* =========================================
 * INPUT
 * ========================================= */

input,
textarea,
select {
  border-radius: 10px !important;
  border-color: var(--fur-border) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--fur-brand) !important;

  box-shadow:
    0 0 0 3px rgba(194, 127, 145, 0.14) !important;
}


/* =========================================
 * TIMELINE
 * ========================================= */

.status__wrapper {
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.status__wrapper:hover {
  background-color: var(--fur-surface-soft);

  box-shadow:
    inset 3px 0 0 rgba(194, 127, 145, 0.35);
}


/* =========================================
 * COMPOSE
 * ========================================= */

.compose-form {
  background: var(--fur-surface);

  border-radius: 14px;

  box-shadow:
    0 4px 18px rgba(150, 90, 105, 0.08);
}


/* =========================================
 * COLUMN HEADER
 * ========================================= */

.column-header {
  background: var(--fur-surface);
  border-bottom-color: var(--fur-border);
}


/* =========================================
 * DROPDOWN
 * ========================================= */

.dropdown-menu {
  border-radius: 12px;

  box-shadow:
    0 8px 24px rgba(130, 75, 90, 0.14);
}

.dropdown-menu__item {
  border-radius: 8px;
}


/* =========================================
 * NOTIFICATIONS
 * ========================================= */

.notification {
  border-color: var(--fur-border);
}

.notification:hover {
  background: var(--fur-surface-soft);
}


/* =========================================
 * TABS
 * ========================================= */

.tabs-bar__link:hover {
  background: var(--fur-brand-soft);
}

.tabs-bar__link.active {
  color: var(--fur-brand);
}


/* =========================================
 * ACTION BUTTONS
 * ========================================= */

.status__action-bar__button:hover {
  background: var(--fur-brand-soft);
}


/* =========================================
 * MEDIA
 * ========================================= */

.media-gallery {
  border-radius: 12px;
  overflow: hidden;
}


/* =========================================
 * MODAL
 * ========================================= */

.modal-root__overlay {
  backdrop-filter: blur(4px);
}

.modal-root__container {
  border-radius: 16px;

  box-shadow:
    0 18px 50px rgba(110, 65, 78, 0.22);
}


/* =========================================
 * SCROLLBAR
 * ========================================= */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--fur-border);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fur-brand);
}