/* SPDX-FileCopyrightText: 2026 ursa.nz <code@ursa.nz> */
/* SPDX-License-Identifier: GPL-3.0-or-later */
/* ursa.nz accent colours for Mastodon 4.x. Recolours the buttons, links,
   active states and focus ring. No layout, type or font changes. Paste into
   Administration, Site settings, Custom CSS.

   Module class names such as _ui_components_link_footer__list are matched on
   their tail with [class*="..."]. The active skin is on the html element as
   data-color-scheme, so the link colour keys off that attribute. */

:root {
  --ursa-star:       #FFD500;
  --ursa-star-hover: #FFDB1F; /* star-400 */
  --ursa-ink:        #211D17; /* text on the star */
  --ursa-fill:       #55428E; /* violet-600. Button fill, white text */
  --ursa-fill-hover: #2D2149; /* violet-800 */

  /* Base link colour, used when data-color-scheme is absent. */
  --ursa-link:       #6F5BB0; /* violet-500 */
  --ursa-link-hover: #9583C7; /* violet-400 */
}

/* Dark skin. */
:root[data-color-scheme="dark"] {
  --ursa-link:       #BCAEDE; /* violet-300 */
  --ursa-link-hover: #DDD5EC; /* violet-200 */
}

/* Light skin. */
:root[data-color-scheme="light"] {
  --ursa-link:       #3F2F66; /* violet-700 */
  --ursa-link-hover: #2D2149; /* violet-800 */
}

/* Primary buttons. The :not() clauses exclude the secondary and tertiary
   buttons, which keep their default. */
.button:not(.button-tertiary):not(.button-secondary) {
  background-color: var(--ursa-fill);
}
.button:not(.button-tertiary):not(.button-secondary):active,
.button:not(.button-tertiary):not(.button-secondary):focus,
.button:not(.button-tertiary):not(.button-secondary):hover {
  background-color: var(--ursa-fill-hover);
}

/* Star button. The logged-out Create account call to action. */
.button.button--block,
.sign-in-banner .button:not(.button-tertiary) {
  background-color: var(--ursa-star);
  color: var(--ursa-ink);
}
.button.button--block:hover,
.sign-in-banner .button:not(.button-tertiary):hover {
  background-color: var(--ursa-star-hover);
  color: var(--ursa-ink);
}

/* Links. Status bodies, mentions, footer, profile bio and profile fields. */
.status__content a,
.reply-indicator__content a,
.status-card__description a,
a.mention,
[class*="link_footer"] a,
[class*="account_bio"] a,
[class*="mini_card__value"] a {
  color: var(--ursa-link);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.status__content a:hover,
.reply-indicator__content a:hover,
a.mention:hover,
[class*="link_footer"] a:hover,
[class*="account_bio"] a:hover,
[class*="mini_card__value"] a:hover {
  color: var(--ursa-link-hover);
}

/* Active column and current profile tab. Border and icon follow currentColor. */
.column-link--transparent.active,
.column-link[aria-current="page"],
[class*="tab_list__tab"].active {
  color: var(--ursa-link);
  border-bottom-color: currentColor;
}
.column-link--transparent.active .column-link__icon,
.column-link[aria-current="page"] .column-link__icon {
  color: currentColor;
}

/* Focus ring. Star, 2px, 2px offset. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.icon-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ursa-star);
  outline-offset: 2px;
}