@font-face {
	font-family: "TimelessSans";
	src: url("/@atproto/oauth-provider/~assets/TimelessSansVF.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-sans: "TimelessSans", "system-ui", sans-serif, ui-sans-serif;
	--default-font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
	--font-weight-medium: 510;
	--font-weight-semibold: 590;
	--radius-2xl: var(--radius);
	--text-sm: 0.8125rem;
	--text-sm--line-height: 1.25rem;
	--text-2xl: 1.5rem;
	--text-2xl--line-height: 1.875rem;

	--background: #f5f5f5;
	--foreground: #0a0a0a;
	--primary: #0a0a0a;
	--primary-foreground: #ffffff;
	--card: #ffffff;
	--card-foreground: #0a0a0a;
	--popover: #ffffff;
	--popover-foreground: #0a0a0a;
	--secondary: #f2f2f2;
	--secondary-foreground: #0a0a0a;
	--muted: #f2f2f2;
	--muted-foreground: #525252;
	--accent: #f2f2f2;
	--accent-foreground: #0a0a0a;
	--border: #e5e5e5;
	--input: #e5e5e5;
	--ring: #d4d4d4;
	--sidebar: #fafafa;
	--sidebar-foreground: #0a0a0a;
	--sidebar-accent: #f2f2f2;
	--sidebar-accent-foreground: #0a0a0a;
	--sidebar-border: #e5e5e5;

	--page: #ffffff;
	--subtle: #fafafa;
	--subtle-foreground: #737373;
	--placeholder: #a3a3a3;
	--focus: #8b85f7;
	--brand: #5750f1;
	--selection: #e0e7ff;
	--shadow-ring: color-mix(in srgb, var(--foreground) 10%, transparent);
	--shadow-ambient-strong: rgb(0 0 0 / 0.08);
	--shadow-ambient-subtle: rgb(0 0 0 / 0.04);

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #0a0a0a;
		--foreground: #ededed;
		--primary: #f5f5f5;
		--primary-foreground: #0a0a0a;
		--card: #141414;
		--card-foreground: #ededed;
		--popover: #141414;
		--popover-foreground: #ededed;
		--secondary: #1f1f1f;
		--secondary-foreground: #ededed;
		--muted: #1f1f1f;
		--muted-foreground: #a3a3a3;
		--accent: #1f1f1f;
		--accent-foreground: #ededed;
		--border: #262626;
		--input: #262626;
		--ring: #404040;
		--sidebar: #1a1a1a;
		--sidebar-foreground: #ededed;
		--sidebar-accent: #1f1f1f;
		--sidebar-accent-foreground: #ededed;
		--sidebar-border: #262626;

		--page: #0a0a0a;
		--subtle: #1a1a1a;
		--placeholder: #737373;
		--selection: #27235f;
		--brand: #6d67f5;
		--shadow-ambient-strong: rgb(0 0 0 / 0.35);
		--shadow-ambient-subtle: rgb(0 0 0 / 0.2);

		color-scheme: dark;
	}

	img[src$="/logotype.svg"] {
		filter: invert(1);
	}
}

html {
	scrollbar-gutter: stable;
}

::selection {
	background-color: var(--selection);
	color: var(--foreground);
}

html.auth-background {
	background-color: var(--page);
}

#root > .min-h-svh {
	position: relative;
	padding: 1.75rem 1.75rem 4.5rem;
}

[data-slot="card-footer"] > div:has(> a) {
	position: absolute;
	right: 0;
	bottom: 1.75rem;
	left: 0;
}

.max-w-auth-card {
	max-width: 28rem;
}

[data-slot="card"] {
	overflow: visible;
	background-color: transparent;
	box-shadow: none;
	padding-block: 0;
}

[data-slot="card"] > * {
	padding-inline: 0;
}

[data-slot="card"] > div:has(> img[src$="/logotype.svg"]) {
	padding-top: 0;
}

[data-slot="card-title"] {
	font-size: 1.875rem;
	line-height: 1.875rem;
	font-weight: 600;
}

img[src$="/logotype.svg"] {
	width: 12rem;
	height: 6rem;
	max-width: none;
	translate: 0.5rem 0;
}

[data-slot="card-content"] div:has(> div.items-center > label) {
	gap: 0;
}

[data-slot="card-content"] div.items-center > label {
	padding-block: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 400;
}

[data-slot="card-content"] p,
[data-slot="card-footer"] a {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--subtle-foreground);
}

input[data-slot="input"] {
	height: 2rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	background-color: var(--card);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--shadow-ring);
}

span.absolute + input[data-slot="input"] {
	padding-left: 1.875rem;
}

span.absolute:has(+ input[data-slot="input"]) {
	left: 0.5625rem;
	color: var(--subtle-foreground);
}

span.absolute:has(+ input[data-slot="input"]) svg,
input[data-slot="input"] + span.absolute svg {
	width: 0.875rem;
	height: 0.875rem;
}

input[data-slot="input"]::placeholder {
	color: var(--placeholder);
}

input[data-slot="input"]:focus-visible {
	box-shadow:
		inset 0 0 0 1px var(--ring),
		0 0 0 1px var(--ring);
}

button[data-slot="button"] {
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 400;
	translate: none;
}

button[data-slot="button"].bg-primary,
button[data-slot="button"].bg-secondary {
	height: 2rem;
	padding: 0.125rem 0.75rem;
}

button[data-slot="button"].bg-primary {
	--btn-from: color-mix(in oklch, var(--brand), white 15%);
	--btn-highlight: color-mix(in oklch, var(--brand), white 30%);
	color: #ffffff;
	background-color: var(--btn-highlight);
	background-image: linear-gradient(to bottom in oklab, var(--btn-from), var(--brand));
	border: 0;
	box-shadow:
		inset 0 0 0 1px color-mix(in oklch, var(--brand), black 10%),
		inset 0 2px 0 0 var(--btn-highlight);
}

button[data-slot="button"].bg-primary:hover {
	--btn-from: var(--btn-highlight);
}

button[data-slot="button"].bg-primary:focus-visible {
	outline-color: var(--brand);
}

button[data-slot="button"].bg-primary:disabled {
	opacity: 0.5;
}

button[data-slot="button"]:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

button[data-slot="button"][type="submit"].bg-primary {
	gap: 0.375rem;
	padding-right: 0.5625rem;
}

button[data-slot="button"][type="submit"].bg-primary::after {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

form:has([data-slot="avatar"]) button[data-slot="button"][type="submit"].bg-primary {
	padding-right: 0.75rem;
	padding-left: 0.5625rem;
}

form:has([data-slot="avatar"]) button[data-slot="button"][type="submit"].bg-primary::after {
	order: -1;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

button[data-slot="button"].bg-secondary {
	background-color: transparent;
}

button[data-slot="button"].bg-secondary:hover {
	background-color: var(--muted);
}

[data-slot="select-trigger"] {
	height: 2rem;
	gap: 0.375rem;
	padding: 0.125rem 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--foreground);
	background-color: var(--card);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--shadow-ring);
}

[data-slot="select-trigger"]:hover {
	background-color: var(--muted);
}

[data-slot="select-trigger"]:focus-visible,
[data-slot="select-trigger"][aria-expanded="true"] {
	box-shadow:
		inset 0 0 0 1px var(--ring),
		0 0 0 1px var(--ring);
}

[data-slot="select-trigger"] svg {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--subtle-foreground);
}

[data-slot="select-content"] {
	width: 14rem;
	padding: 0.25rem;
	border: 0;
	border-radius: var(--radius);
	background-color: var(--card);
	box-shadow:
		0 0 0 1px var(--shadow-ring),
		0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
}

[data-slot="select-item"] {
	min-height: 2rem;
	border-radius: 0.25rem;
	padding: 0.125rem 2rem 0.125rem 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

[data-slot="select-item"]:hover,
[data-slot="select-item"]:focus {
	background-color: var(--muted);
}

[data-slot="select-item"] svg {
	width: 0.875rem;
	height: 0.875rem;
}

div:has(> button[data-slot="item"]) {
	gap: 0.5rem;
}

button[data-slot="item"] {
	min-height: 2.25rem;
	gap: 0.375rem;
	padding: 0.375rem 0.5625rem 0.375rem 0.5rem;
	border: 0;
	border-radius: var(--radius);
	background-color: var(--card);
	box-shadow: inset 0 0 0 1px var(--shadow-ring);
}

button[data-slot="item"]:hover {
	background-color: var(--muted);
}

button[data-slot="item"]:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px var(--shadow-ring);
}

button[data-slot="item"] [data-slot="avatar"],
button[data-slot="item"] [data-slot="item-media"].rounded-full {
	width: 1.3125rem;
	height: 1.3125rem;
}

button[data-slot="item"] [data-slot="item-description"],
button[data-slot="item"] [data-slot="item-title"],
button[data-slot="item"] [data-slot="item-title"] > span {
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 400;
	color: var(--foreground);
}

button[data-slot="item"] [data-slot="item-actions"] svg {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--subtle-foreground);
}