.token_processing_instruction,
::highlight(token_processing_instruction),
.token_doctype,
::highlight(token_doctype),
.token_cdata,
::highlight(token_cdata),
.token_punctuation,
::highlight(token_punctuation) {
	color: var(--text_50);
}

.token_tag,
::highlight(token_tag),
.token_constant,
::highlight(token_constant),
.token_symbol,
::highlight(token_symbol),
.token_deleted,
::highlight(token_deleted),
.token_keyword,
::highlight(token_keyword),
.token_null,
::highlight(token_null),
.token_boolean,
::highlight(token_boolean),
.token_interpolation_punctuation,
::highlight(token_interpolation_punctuation),
.token_heading,
::highlight(token_heading),
.token_heading_punctuation,
::highlight(token_heading_punctuation),
.token_tag_punctuation,
::highlight(token_tag_punctuation) {
	color: var(--color_a_50);
}

.token_comment,
::highlight(token_comment),
.token_char,
::highlight(token_char),
.token_inserted,
::highlight(token_inserted),
.token_blockquote,
::highlight(token_blockquote),
.token_blockquote_punctuation,
::highlight(token_blockquote_punctuation) {
	color: var(--color_b_50);
}

.token_builtin,
::highlight(token_builtin),
.token_class_name,
::highlight(token_class_name),
.token_number,
::highlight(token_number) {
	color: var(--color_j_50);
}

.token_attr_value,
::highlight(token_attr_value),
.token_attr_quote,
::highlight(token_attr_quote),
.token_string,
::highlight(token_string),
.token_template_punctuation,
::highlight(token_template_punctuation),
.token_inline_code,
::highlight(token_inline_code),
.token_code_punctuation,
::highlight(token_code_punctuation) {
	color: var(--color_h_50);
}

/* attr_equals must be after attr_value */
.token_attr_equals,
::highlight(token_attr_equals) {
	color: var(--text_50);
}

.token_selector,
::highlight(token_selector),
.token_function,
::highlight(token_function),
.token_regex,
::highlight(token_regex),
.token_important,
::highlight(token_important),
.token_variable,
::highlight(token_variable) {
	color: var(--color_e_50);
}

.token_atrule,
::highlight(token_atrule) {
	color: var(--color_f_50);
}

.token_attr_name,
::highlight(token_attr_name),
.token_property,
::highlight(token_property),
.token_decorator,
::highlight(token_decorator),
.token_decorator_name,
::highlight(token_decorator_name),
.token_link_text_wrapper,
::highlight(token_link_text_wrapper),
.token_link_text,
::highlight(token_link_text),
.token_link_punctuation,
::highlight(token_link_punctuation) {
	color: var(--color_i_50);
}

.token_special_keyword,
::highlight(token_special_keyword),
.token_namespace,
::highlight(token_namespace),
.token_rule,
::highlight(token_rule) {
	color: var(--color_g_50);
}

.token_at_keyword,
::highlight(token_at_keyword),
.token_url,
::highlight(token_url) {
	color: var(--color_d_50);
}

.token_url,
::highlight(token_url) {
	text-decoration: underline;
}

.token_strikethrough,
::highlight(token_strikethrough) {
	text-decoration: line-through;
}

/*

Note: CSS Highlights API doesn't support font-weight or font-style,
so bold/italic will only work with HTML mode, not range mode.

@see https://github.com/w3c/csswg-drafts/issues/8355

*/

.token_important,
::highlight(token_important),
.token_bold,
::highlight(token_bold) {
	font-weight: bold;
}

.token_italic,
::highlight(token_italic) {
	font-style: italic;
}