/*
 * SPDX-FileCopyrightText: 2026 ursa.nz <code@ursa.nz>
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

/* --- the ursa palette --- */

:root {
	--ursa-star: #ffd500;
	--ursa-star-hover: #ffdb1f;
	--ursa-ink: #211d17;
	--ursa-fill: #55428e;
	--ursa-fill-hover: #2d2149;
	--ursa-link: #6f5bb0;
	--ursa-link-hover: #9583c7;
}

:root[data-color-scheme="dark"] {
	--ursa-link: #bcaede;
	--ursa-link-hover: #ddd5ec;
}

:root[data-color-scheme="light"] {
	--ursa-link: #3f2f66;
	--ursa-link-hover: #2d2149;
}

/* --- OLED black surfaces in the dark scheme --- */

:root[data-color-scheme="dark"] {
	--color-bg-primary: #000;
	--color-bg-secondary: #120d20;
	--color-bg-tertiary: #1e1632;
	--color-border-primary: #2d2149;
}

/* --- primary buttons --- */

.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);
}

/* --- the star 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__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);
}

/* --- the active column and profile tab --- */

.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;
}

/* --- the focus ring --- */

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;
}