diff --git a/.changeset/dull-ideas-glow.md b/.changeset/dull-ideas-glow.md
new file mode 100644
index 00000000..b6028abe
--- /dev/null
+++ b/.changeset/dull-ideas-glow.md
@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_code': minor
+---
+
+deps: upgrade fuz_css with oklch
diff --git a/CLAUDE.md b/CLAUDE.md
index f1fba96a..ff044da7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -276,17 +276,17 @@ Limitations: no font-weight/font-style support in range mode.
 
 ## Color variables
 
-Theme uses CSS variables from fuz_css:
-
-- `--color_a` - keywords, tags
-- `--color_b` - strings, selectors
-- `--color_c` - types (TypeScript)
-- `--color_d` - functions, classes
-- `--color_e` - numbers, regex
-- `--color_f` - operators
-- `--color_g` - attributes
-- `--color_h` - properties
-- `--color_i` - booleans, comments
+Theme uses CSS variables from fuz_css (palette stops like `--palette_a_50`):
+
+- `--palette_a_*` - keywords, tags
+- `--palette_b_*` - strings, selectors
+- `--palette_c_*` - types (TypeScript)
+- `--palette_d_*` - functions, classes
+- `--palette_e_*` - numbers, regex
+- `--palette_f_*` - operators
+- `--palette_g_*` - attributes
+- `--palette_h_*` - properties
+- `--palette_i_*` - booleans, comments
 
 ## Development guidelines
 
diff --git a/src/lib/theme.css b/src/lib/theme.css
index 23aa63b2..27a6a641 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -16,7 +16,7 @@
 .token_heading,
 .token_heading_punctuation,
 .token_tag_punctuation {
-	color: var(--color_a_50);
+	color: var(--palette_a_50);
 }
 
 .token_comment,
@@ -24,13 +24,13 @@
 .token_inserted,
 .token_blockquote,
 .token_blockquote_punctuation {
-	color: var(--color_b_50);
+	color: var(--palette_b_50);
 }
 
 .token_builtin,
 .token_class_name,
 .token_number {
-	color: var(--color_j_50);
+	color: var(--palette_j_50);
 }
 
 .token_attr_value,
@@ -39,7 +39,7 @@
 .token_template_punctuation,
 .token_inline_code,
 .token_code_punctuation {
-	color: var(--color_h_50);
+	color: var(--palette_h_50);
 }
 
 /* attr_equals must be after attr_value */
@@ -52,11 +52,11 @@
 .token_regex,
 .token_important,
 .token_variable {
-	color: var(--color_e_50);
+	color: var(--palette_e_50);
 }
 
 .token_atrule {
-	color: var(--color_f_50);
+	color: var(--palette_f_50);
 }
 
 .token_attr_name,
@@ -66,18 +66,18 @@
 .token_link_text_wrapper,
 .token_link_text,
 .token_link_punctuation {
-	color: var(--color_i_50);
+	color: var(--palette_i_50);
 }
 
 .token_special_keyword,
 .token_namespace,
 .token_rule {
-	color: var(--color_g_50);
+	color: var(--palette_g_50);
 }
 
 .token_at_keyword,
 .token_url {
-	color: var(--color_d_50);
+	color: var(--palette_d_50);
 }
 
 .token_url {
diff --git a/src/lib/theme_highlight.css b/src/lib/theme_highlight.css
index 778ad85c..d2ee9592 100644
--- a/src/lib/theme_highlight.css
+++ b/src/lib/theme_highlight.css
@@ -31,7 +31,7 @@
 ::highlight(token_heading_punctuation),
 .token_tag_punctuation,
 ::highlight(token_tag_punctuation) {
-	color: var(--color_a_50);
+	color: var(--palette_a_50);
 }
 
 .token_comment,
@@ -44,7 +44,7 @@
 ::highlight(token_blockquote),
 .token_blockquote_punctuation,
 ::highlight(token_blockquote_punctuation) {
-	color: var(--color_b_50);
+	color: var(--palette_b_50);
 }
 
 .token_builtin,
@@ -53,7 +53,7 @@
 ::highlight(token_class_name),
 .token_number,
 ::highlight(token_number) {
-	color: var(--color_j_50);
+	color: var(--palette_j_50);
 }
 
 .token_attr_value,
@@ -68,7 +68,7 @@
 ::highlight(token_inline_code),
 .token_code_punctuation,
 ::highlight(token_code_punctuation) {
-	color: var(--color_h_50);
+	color: var(--palette_h_50);
 }
 
 /* attr_equals must be after attr_value */
@@ -87,12 +87,12 @@
 ::highlight(token_important),
 .token_variable,
 ::highlight(token_variable) {
-	color: var(--color_e_50);
+	color: var(--palette_e_50);
 }
 
 .token_atrule,
 ::highlight(token_atrule) {
-	color: var(--color_f_50);
+	color: var(--palette_f_50);
 }
 
 .token_attr_name,
@@ -109,7 +109,7 @@
 ::highlight(token_link_text),
 .token_link_punctuation,
 ::highlight(token_link_punctuation) {
-	color: var(--color_i_50);
+	color: var(--palette_i_50);
 }
 
 .token_special_keyword,
@@ -118,14 +118,14 @@
 ::highlight(token_namespace),
 .token_rule,
 ::highlight(token_rule) {
-	color: var(--color_g_50);
+	color: var(--palette_g_50);
 }
 
 .token_at_keyword,
 ::highlight(token_at_keyword),
 .token_url,
 ::highlight(token_url) {
-	color: var(--color_d_50);
+	color: var(--palette_d_50);
 }
 
 .token_url,
diff --git a/src/routes/docs/benchmark/+page.svelte b/src/routes/docs/benchmark/+page.svelte
index 6a605e16..a7bb490d 100644
--- a/src/routes/docs/benchmark/+page.svelte
+++ b/src/routes/docs/benchmark/+page.svelte
@@ -10,7 +10,7 @@
 	<section>
 		<p>Performance benchmarking for testing syntax highlighting across all supported languages:</p>
 		<p>
-			<a href={resolve('/benchmark')} class="chip color_d font_size_lg">run benchmark</a>
+			<a href={resolve('/benchmark')} class="chip palette_d font_size_lg">run benchmark</a>
 		</p>
 	</section>
 </TomeContent>
diff --git a/src/routes/docs/samples/+page.svelte b/src/routes/docs/samples/+page.svelte
index 1c2d0418..ed550d59 100644
--- a/src/routes/docs/samples/+page.svelte
+++ b/src/routes/docs/samples/+page.svelte
@@ -17,7 +17,7 @@
 			API):
 		</p>
 		<p>
-			<a href={resolve('/samples')} class="chip color_g font_size_lg">view samples</a>
+			<a href={resolve('/samples')} class="chip palette_g font_size_lg">view samples</a>
 		</p>
 	</section>
 </TomeContent>
diff --git a/src/routes/textarea/+page.svelte b/src/routes/textarea/+page.svelte
index 18c1dfa3..091e212e 100644
--- a/src/routes/textarea/+page.svelte
+++ b/src/routes/textarea/+page.svelte
@@ -40,7 +40,7 @@
 				>. Type below to see it re-highlight. Requires <code>theme_highlight.css</code>.
 			</p>
 			{#if !supported}
-				<p class="color_e_50">
+				<p class="palette_e_50">
 					⚠️ This browser does not support the CSS Custom Highlight API — the textarea still works,
 					but text is shown without highlighting.
 				</p>