wip: refactoring tui

13 files changed, 244 insertions, 330 deletions

diff --git a/packages/tui/internal/theme/ayu.go b/packages/tui/internal/theme/ayu.go
index b3dfa870a..947e41e5b 100644
--- a/packages/tui/internal/theme/ayu.go
+++ b/packages/tui/internal/theme/ayu.go
@@ -92,35 +92,31 @@ func NewAyuDarkTheme() *AyuDarkTheme {
 		Dark:  darkComment,
 		Light: lightComment,
 	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  darkPurple,
-		Light: lightPurple,
-	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
 		Dark:  darkBackground,
 		Light: lightBackground,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkCurrentLine,
 		Light: lightCurrentLine,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
 		Dark:  "#0b0e14", // Darker than background
 		Light: "#ffffff", // Lighter than background
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
+	theme.BorderColor = lipgloss.AdaptiveColor{
 		Dark:  darkBorder,
 		Light: lightBorder,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
 		Dark:  darkBlue,
 		Light: lightBlue,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkSelection,
 		Light: lightSelection,
 	}
diff --git a/packages/tui/internal/theme/catppuccin.go b/packages/tui/internal/theme/catppuccin.go
index c3c32501e..976eb7fbd 100644
--- a/packages/tui/internal/theme/catppuccin.go
+++ b/packages/tui/internal/theme/catppuccin.go
@@ -60,35 +60,31 @@ func NewCatppuccinTheme() *CatppuccinTheme {
 		Dark:  mocha.Subtext0().Hex,
 		Light: latte.Subtext0().Hex,
 	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  mocha.Lavender().Hex,
-		Light: latte.Lavender().Hex,
-	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
 		Dark:  "#212121", // From existing styles
 		Light: "#EEEEEE", // Light equivalent
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  "#2c2c2c", // From existing styles
 		Light: "#E0E0E0", // Light equivalent
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
 		Dark:  "#181818", // From existing styles
 		Light: "#F5F5F5", // Light equivalent
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
+	theme.BorderColor = lipgloss.AdaptiveColor{
 		Dark:  "#4b4c5c", // From existing styles
 		Light: "#BDBDBD", // Light equivalent
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
 		Dark:  mocha.Blue().Hex,
 		Light: latte.Blue().Hex,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  mocha.Surface0().Hex,
 		Light: latte.Surface0().Hex,
 	}
diff --git a/packages/tui/internal/theme/dracula.go b/packages/tui/internal/theme/dracula.go
index 29a1457d4..7f14d6290 100644
--- a/packages/tui/internal/theme/dracula.go
+++ b/packages/tui/internal/theme/dracula.go
@@ -86,35 +86,31 @@ func NewDraculaTheme() *DraculaTheme {
 		Dark:  darkComment,
 		Light: lightComment,
 	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  darkYellow,
-		Light: lightYellow,
-	}
 
 	// Background colors
-	theme.BackgroundColor = lipgloss.AdaptiveColor{
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
 		Dark:  darkBackground,
 		Light: lightBackground,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkCurrentLine,
 		Light: lightCurrentLine,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
+	theme.BackgroundColor = lipgloss.AdaptiveColor{
 		Dark:  "#21222c", // Slightly darker than background
 		Light: "#ffffff", // Slightly lighter than background
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
+	theme.BorderColor = lipgloss.AdaptiveColor{
 		Dark:  darkBorder,
 		Light: lightBorder,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
 		Dark:  darkPurple,
 		Light: lightPurple,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkSelection,
 		Light: lightSelection,
 	}
@@ -133,8 +129,8 @@ func NewDraculaTheme() *DraculaTheme {
 		Light: lightComment,
 	}
 	theme.DiffHunkHeaderColor = lipgloss.AdaptiveColor{
-		Dark:  darkPurple,
-		Light: lightPurple,
+		Dark:  darkCurrentLine,
+		Light: lightCurrentLine,
 	}
 	theme.DiffHighlightAddedColor = lipgloss.AdaptiveColor{
 		Dark:  "#50fa7b",
diff --git a/packages/tui/internal/theme/flexoki.go b/packages/tui/internal/theme/flexoki.go
index 5da5683c5..ad5443869 100644
--- a/packages/tui/internal/theme/flexoki.go
+++ b/packages/tui/internal/theme/flexoki.go
@@ -94,35 +94,31 @@ func NewFlexokiTheme() *FlexokiTheme {
 		Dark:  flexokiBase700,
 		Light: flexokiBase500,
 	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  flexokiYellow400,
-		Light: flexokiYellow600,
-	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
 		Dark:  flexokiBlack,
 		Light: flexokiPaper,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  flexokiBase950,
 		Light: flexokiBase50,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
 		Dark:  flexokiBase900,
 		Light: flexokiBase100,
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
+	theme.BorderColor = lipgloss.AdaptiveColor{
 		Dark:  flexokiBase900,
 		Light: flexokiBase100,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
 		Dark:  flexokiBlue400,
 		Light: flexokiBlue600,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  flexokiBase850,
 		Light: flexokiBase150,
 	}
diff --git a/packages/tui/internal/theme/gruvbox.go b/packages/tui/internal/theme/gruvbox.go
index 51719faaa..da9aab50e 100644
--- a/packages/tui/internal/theme/gruvbox.go
+++ b/packages/tui/internal/theme/gruvbox.go
@@ -114,35 +114,31 @@ func NewGruvboxTheme() *GruvboxTheme {
 		Dark:  gruvboxDarkFg4,
 		Light: gruvboxLightFg4,
 	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  gruvboxDarkYellowBright,
-		Light: gruvboxLightYellowBright,
-	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
 		Dark:  gruvboxDarkBg0,
 		Light: gruvboxLightBg0,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  gruvboxDarkBg1,
 		Light: gruvboxLightBg1,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
 		Dark:  gruvboxDarkBg0Soft,
 		Light: gruvboxLightBg0Soft,
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
+	theme.BorderColor = lipgloss.AdaptiveColor{
 		Dark:  gruvboxDarkBg2,
 		Light: gruvboxLightBg2,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
 		Dark:  gruvboxDarkBlueBright,
 		Light: gruvboxLightBlueBright,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  gruvboxDarkBg1,
 		Light: gruvboxLightBg1,
 	}
diff --git a/packages/tui/internal/theme/manager.go b/packages/tui/internal/theme/manager.go
index cb6c53991..020e3e193 100644
--- a/packages/tui/internal/theme/manager.go
+++ b/packages/tui/internal/theme/manager.go
@@ -157,20 +157,18 @@ func LoadCustomTheme(customTheme map[string]any) (Theme, error) {
 			theme.TextColor = adaptiveColor
 		case "textmuted":
 			theme.TextMutedColor = adaptiveColor
-		case "textemphasized":
-			theme.TextEmphasizedColor = adaptiveColor
 		case "background":
 			theme.BackgroundColor = adaptiveColor
-		case "backgroundsecondary":
-			theme.BackgroundSecondaryColor = adaptiveColor
-		case "backgrounddarker":
-			theme.BackgroundDarkerColor = adaptiveColor
-		case "bordernormal":
-			theme.BorderNormalColor = adaptiveColor
-		case "borderfocused":
-			theme.BorderFocusedColor = adaptiveColor
-		case "borderdim":
-			theme.BorderDimColor = adaptiveColor
+		case "backgroundsubtle":
+			theme.BackgroundSubtleColor = adaptiveColor
+		case "backgroundelement":
+			theme.BackgroundElementColor = adaptiveColor
+		case "border":
+			theme.BorderColor = adaptiveColor
+		case "borderactive":
+			theme.BorderActiveColor = adaptiveColor
+		case "bordersubtle":
+			theme.BorderSubtleColor = adaptiveColor
 		case "diffadded":
 			theme.DiffAddedColor = adaptiveColor
 		case "diffremoved":
diff --git a/packages/tui/internal/theme/monokai.go b/packages/tui/internal/theme/monokai.go
index 7511d3333..71234d025 100644
--- a/packages/tui/internal/theme/monokai.go
+++ b/packages/tui/internal/theme/monokai.go
@@ -85,35 +85,31 @@ func NewMonokaiProTheme() *MonokaiProTheme {
 		Dark:  darkComment,
 		Light: lightComment,
 	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  darkYellow,
-		Light: lightYellow,
-	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
 		Dark:  darkBackground,
 		Light: lightBackground,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkCurrentLine,
 		Light: lightCurrentLine,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
 		Dark:  "#221f22", // Slightly darker than background
 		Light: "#ffffff", // Slightly lighter than background
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
+	theme.BorderColor = lipgloss.AdaptiveColor{
 		Dark:  darkBorder,
 		Light: lightBorder,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
 		Dark:  darkCyan,
 		Light: lightCyan,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkSelection,
 		Light: lightSelection,
 	}
diff --git a/packages/tui/internal/theme/onedark.go b/packages/tui/internal/theme/onedark.go
index a2c1447ca..21953c10d 100644
--- a/packages/tui/internal/theme/onedark.go
+++ b/packages/tui/internal/theme/onedark.go
@@ -86,35 +86,31 @@ func NewOneDarkTheme() *OneDarkTheme {
 		Dark:  darkComment,
 		Light: lightComment,
 	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  darkYellow,
-		Light: lightYellow,
-	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
 		Dark:  darkBackground,
 		Light: lightBackground,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkCurrentLine,
 		Light: lightCurrentLine,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
 		Dark:  "#21252b", // Slightly darker than background
 		Light: "#ffffff", // Slightly lighter than background
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
+	theme.BorderColor = lipgloss.AdaptiveColor{
 		Dark:  darkBorder,
 		Light: lightBorder,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
 		Dark:  darkBlue,
 		Light: lightBlue,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkSelection,
 		Light: lightSelection,
 	}
diff --git a/packages/tui/internal/theme/opencode.go b/packages/tui/internal/theme/opencode.go
index 7ee6f15e5..4de88ae4e 100644
--- a/packages/tui/internal/theme/opencode.go
+++ b/packages/tui/internal/theme/opencode.go
@@ -12,14 +12,23 @@ type OpenCodeTheme struct {
 
 // NewOpenCodeTheme creates a new instance of the OpenCode theme.
 func NewOpenCodeTheme() *OpenCodeTheme {
-	// OpenCode color palette
-	// Dark mode colors
-	darkBackground := "#212121"
-	darkCurrentLine := "#252525"
-	darkSelection := "#303030"
-	darkForeground := "#e0e0e0"
-	darkComment := "#6a6a6a"
-	darkPrimary := "#fab283"   // Primary orange/gold
+	// OpenCode color palette with Radix-inspired scale progression
+	// Dark mode colors - using a neutral gray scale as base
+	darkStep1 := "#0a0a0a"  // App background
+	darkStep2 := "#141414"  // Subtle background
+	darkStep3 := "#1e1e1e"  // UI element background
+	darkStep4 := "#282828"  // Hovered UI element background
+	darkStep5 := "#323232"  // Active/Selected UI element background
+	darkStep6 := "#3c3c3c"  // Subtle borders and separators
+	darkStep7 := "#484848"  // UI element border and focus rings
+	darkStep8 := "#606060"  // Hovered UI element border
+	darkStep9 := "#fab283"  // Solid backgrounds (primary orange/gold)
+	darkStep10 := "#ffc09f" // Hovered solid backgrounds
+	darkStep11 := "#808080" // Low-contrast text (more muted)
+	darkStep12 := "#eeeeee" // High-contrast text
+
+	// Dark mode accent colors
+	darkPrimary := darkStep9   // Primary uses step 9 (solid background)
 	darkSecondary := "#5c9cf5" // Secondary blue
 	darkAccent := "#9d7cd8"    // Accent purple
 	darkRed := "#e06c75"       // Error red
@@ -27,15 +36,23 @@ func NewOpenCodeTheme() *OpenCodeTheme {
 	darkGreen := "#7fd88f"     // Success green
 	darkCyan := "#56b6c2"      // Info cyan
 	darkYellow := "#e5c07b"    // Emphasized text
-	darkBorder := "#4b4c5c"    // Border color
 
-	// Light mode colors
-	lightBackground := "#f8f8f8"
-	lightCurrentLine := "#f0f0f0"
-	lightSelection := "#e5e5e6"
-	lightForeground := "#2a2a2a"
-	lightComment := "#8a8a8a"
-	lightPrimary := "#3b7dd8"   // Primary blue
+	// Light mode colors - using a neutral gray scale as base
+	lightStep1 := "#ffffff"  // App background
+	lightStep2 := "#fafafa"  // Subtle background
+	lightStep3 := "#f5f5f5"  // UI element background
+	lightStep4 := "#ebebeb"  // Hovered UI element background
+	lightStep5 := "#e1e1e1"  // Active/Selected UI element background
+	lightStep6 := "#d4d4d4"  // Subtle borders and separators
+	lightStep7 := "#b8b8b8"  // UI element border and focus rings
+	lightStep8 := "#a0a0a0"  // Hovered UI element border
+	lightStep9 := "#3b7dd8"  // Solid backgrounds (primary blue)
+	lightStep10 := "#2968c3" // Hovered solid backgrounds
+	lightStep11 := "#8a8a8a" // Low-contrast text (more muted)
+	lightStep12 := "#1a1a1a" // High-contrast text
+
+	// Light mode accent colors
+	lightPrimary := lightStep9  // Primary uses step 9 (solid background)
 	lightSecondary := "#7b5bb6" // Secondary purple
 	lightAccent := "#d68c27"    // Accent orange/gold
 	lightRed := "#d1383d"       // Error red
@@ -43,7 +60,14 @@ func NewOpenCodeTheme() *OpenCodeTheme {
 	lightGreen := "#3d9a57"     // Success green
 	lightCyan := "#318795"      // Info cyan
 	lightYellow := "#b0851f"    // Emphasized text
-	lightBorder := "#d3d3d3"    // Border color
+
+	// Unused variables to avoid compiler errors (these could be used for hover states)
+	_ = darkStep4
+	_ = darkStep5
+	_ = darkStep10
+	_ = lightStep4
+	_ = lightStep5
+	_ = lightStep10
 
 	theme := &OpenCodeTheme{}
 
@@ -81,44 +105,40 @@ func NewOpenCodeTheme() *OpenCodeTheme {
 
 	// Text colors
 	theme.TextColor = lipgloss.AdaptiveColor{
-		Dark:  darkForeground,
-		Light: lightForeground,
+		Dark:  darkStep12,
+		Light: lightStep12,
 	}
 	theme.TextMutedColor = lipgloss.AdaptiveColor{
-		Dark:  darkComment,
-		Light: lightComment,
-	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  darkYellow,
-		Light: lightYellow,
+		Dark:  darkStep11,
+		Light: lightStep11,
 	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
-		Dark:  darkBackground,
-		Light: lightBackground,
+		Dark:  darkStep1,
+		Light: lightStep1,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
-		Dark:  darkCurrentLine,
-		Light: lightCurrentLine,
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep2,
+		Light: lightStep2,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
-		Dark:  "#121212", // Slightly darker than background
-		Light: "#ffffff", // Slightly lighter than background
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep3,
+		Light: lightStep3,
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
-		Dark:  darkBorder,
-		Light: lightBorder,
+	theme.BorderColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep7,
+		Light: lightStep7,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
-		Dark:  darkPrimary,
-		Light: lightPrimary,
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep8,
+		Light: lightStep8,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
-		Dark:  darkSelection,
-		Light: lightSelection,
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep6,
+		Light: lightStep6,
 	}
 
 	// Diff view colors
@@ -155,12 +175,12 @@ func NewOpenCodeTheme() *OpenCodeTheme {
 		Light: "#FFEBEE",
 	}
 	theme.DiffContextBgColor = lipgloss.AdaptiveColor{
-		Dark:  darkBackground,
-		Light: lightBackground,
+		Dark:  darkStep2,
+		Light: lightStep2,
 	}
 	theme.DiffLineNumberColor = lipgloss.AdaptiveColor{
-		Dark:  "#888888",
-		Light: "#9E9E9E",
+		Dark:  darkStep3,
+		Light: lightStep3,
 	}
 	theme.DiffAddedLineNumberBgColor = lipgloss.AdaptiveColor{
 		Dark:  "#293229",
@@ -173,8 +193,8 @@ func NewOpenCodeTheme() *OpenCodeTheme {
 
 	// Markdown colors
 	theme.MarkdownTextColor = lipgloss.AdaptiveColor{
-		Dark:  darkForeground,
-		Light: lightForeground,
+		Dark:  darkStep12,
+		Light: lightStep12,
 	}
 	theme.MarkdownHeadingColor = lipgloss.AdaptiveColor{
 		Dark:  darkSecondary,
@@ -205,8 +225,8 @@ func NewOpenCodeTheme() *OpenCodeTheme {
 		Light: lightAccent,
 	}
 	theme.MarkdownHorizontalRuleColor = lipgloss.AdaptiveColor{
-		Dark:  darkComment,
-		Light: lightComment,
+		Dark:  darkStep11,
+		Light: lightStep11,
 	}
 	theme.MarkdownListItemColor = lipgloss.AdaptiveColor{
 		Dark:  darkPrimary,
@@ -225,14 +245,14 @@ func NewOpenCodeTheme() *OpenCodeTheme {
 		Light: lightCyan,
 	}
 	theme.MarkdownCodeBlockColor = lipgloss.AdaptiveColor{
-		Dark:  darkForeground,
-		Light: lightForeground,
+		Dark:  darkStep12,
+		Light: lightStep12,
 	}
 
 	// Syntax highlighting colors
 	theme.SyntaxCommentColor = lipgloss.AdaptiveColor{
-		Dark:  darkComment,
-		Light: lightComment,
+		Dark:  darkStep11,
+		Light: lightStep11,
 	}
 	theme.SyntaxKeywordColor = lipgloss.AdaptiveColor{
 		Dark:  darkSecondary,
@@ -263,8 +283,8 @@ func NewOpenCodeTheme() *OpenCodeTheme {
 		Light: lightCyan,
 	}
 	theme.SyntaxPunctuationColor = lipgloss.AdaptiveColor{
-		Dark:  darkForeground,
-		Light: lightForeground,
+		Dark:  darkStep12,
+		Light: lightStep12,
 	}
 
 	return theme
diff --git a/packages/tui/internal/theme/theme.go b/packages/tui/internal/theme/theme.go
index c97b95478..8b2d926b1 100644
--- a/packages/tui/internal/theme/theme.go
+++ b/packages/tui/internal/theme/theme.go
@@ -11,32 +11,31 @@ import (
 // All colors must be defined as lipgloss.AdaptiveColor to support
 // both light and dark terminal backgrounds.
 type Theme interface {
-	// Base colors
-	Primary() lipgloss.AdaptiveColor
+	// Background colors
+	Background() lipgloss.AdaptiveColor        // Radix 1
+	BackgroundSubtle() lipgloss.AdaptiveColor  // Radix 2
+	BackgroundElement() lipgloss.AdaptiveColor // Radix 3
+
+	// Border colors
+	BorderSubtle() lipgloss.AdaptiveColor // Radix 6
+	Border() lipgloss.AdaptiveColor       // Radix 7
+	BorderActive() lipgloss.AdaptiveColor // Radix 8
+
+	// Brand colors
+	Primary() lipgloss.AdaptiveColor // Radix 9
 	Secondary() lipgloss.AdaptiveColor
 	Accent() lipgloss.AdaptiveColor
 
+	// Text colors
+	TextMuted() lipgloss.AdaptiveColor // Radix 11
+	Text() lipgloss.AdaptiveColor      // Radix 12
+
 	// Status colors
 	Error() lipgloss.AdaptiveColor
 	Warning() lipgloss.AdaptiveColor
 	Success() lipgloss.AdaptiveColor
 	Info() lipgloss.AdaptiveColor
 
-	// Text colors
-	Text() lipgloss.AdaptiveColor
-	TextMuted() lipgloss.AdaptiveColor
-	TextEmphasized() lipgloss.AdaptiveColor
-
-	// Background colors
-	Background() lipgloss.AdaptiveColor
-	BackgroundSecondary() lipgloss.AdaptiveColor
-	BackgroundDarker() lipgloss.AdaptiveColor
-
-	// Border colors
-	BorderNormal() lipgloss.AdaptiveColor
-	BorderFocused() lipgloss.AdaptiveColor
-	BorderDim() lipgloss.AdaptiveColor
-
 	// Diff view colors
 	DiffAdded() lipgloss.AdaptiveColor
 	DiffRemoved() lipgloss.AdaptiveColor
@@ -82,32 +81,31 @@ type Theme interface {
 // BaseTheme provides a default implementation of the Theme interface
 // that can be embedded in concrete theme implementations.
 type BaseTheme struct {
-	// Base colors
+	// Background colors
+	BackgroundColor        lipgloss.AdaptiveColor
+	BackgroundSubtleColor  lipgloss.AdaptiveColor
+	BackgroundElementColor lipgloss.AdaptiveColor
+
+	// Border colors
+	BorderSubtleColor lipgloss.AdaptiveColor
+	BorderColor       lipgloss.AdaptiveColor
+	BorderActiveColor lipgloss.AdaptiveColor
+
+	// Brand colors
 	PrimaryColor   lipgloss.AdaptiveColor
 	SecondaryColor lipgloss.AdaptiveColor
 	AccentColor    lipgloss.AdaptiveColor
 
+	// Text colors
+	TextMutedColor lipgloss.AdaptiveColor
+	TextColor      lipgloss.AdaptiveColor
+
 	// Status colors
 	ErrorColor   lipgloss.AdaptiveColor
 	WarningColor lipgloss.AdaptiveColor
 	SuccessColor lipgloss.AdaptiveColor
 	InfoColor    lipgloss.AdaptiveColor
 
-	// Text colors
-	TextColor           lipgloss.AdaptiveColor
-	TextMutedColor      lipgloss.AdaptiveColor
-	TextEmphasizedColor lipgloss.AdaptiveColor
-
-	// Background colors
-	BackgroundColor          lipgloss.AdaptiveColor
-	BackgroundSecondaryColor lipgloss.AdaptiveColor
-	BackgroundDarkerColor    lipgloss.AdaptiveColor
-
-	// Border colors
-	BorderNormalColor  lipgloss.AdaptiveColor
-	BorderFocusedColor lipgloss.AdaptiveColor
-	BorderDimColor     lipgloss.AdaptiveColor
-
 	// Diff view colors
 	DiffAddedColor               lipgloss.AdaptiveColor
 	DiffRemovedColor             lipgloss.AdaptiveColor
@@ -160,17 +158,16 @@ func (t *BaseTheme) Warning() lipgloss.AdaptiveColor { return t.WarningColor }
 func (t *BaseTheme) Success() lipgloss.AdaptiveColor { return t.SuccessColor }
 func (t *BaseTheme) Info() lipgloss.AdaptiveColor    { return t.InfoColor }
 
-func (t *BaseTheme) Text() lipgloss.AdaptiveColor           { return t.TextColor }
-func (t *BaseTheme) TextMuted() lipgloss.AdaptiveColor      { return t.TextMutedColor }
-func (t *BaseTheme) TextEmphasized() lipgloss.AdaptiveColor { return t.TextEmphasizedColor }
+func (t *BaseTheme) Text() lipgloss.AdaptiveColor      { return t.TextColor }
+func (t *BaseTheme) TextMuted() lipgloss.AdaptiveColor { return t.TextMutedColor }
 
-func (t *BaseTheme) Background() lipgloss.AdaptiveColor          { return t.BackgroundColor }
-func (t *BaseTheme) BackgroundSecondary() lipgloss.AdaptiveColor { return t.BackgroundSecondaryColor }
-func (t *BaseTheme) BackgroundDarker() lipgloss.AdaptiveColor    { return t.BackgroundDarkerColor }
+func (t *BaseTheme) Background() lipgloss.AdaptiveColor        { return t.BackgroundColor }
+func (t *BaseTheme) BackgroundSubtle() lipgloss.AdaptiveColor  { return t.BackgroundSubtleColor }
+func (t *BaseTheme) BackgroundElement() lipgloss.AdaptiveColor { return t.BackgroundElementColor }
 
-func (t *BaseTheme) BorderNormal() lipgloss.AdaptiveColor  { return t.BorderNormalColor }
-func (t *BaseTheme) BorderFocused() lipgloss.AdaptiveColor { return t.BorderFocusedColor }
-func (t *BaseTheme) BorderDim() lipgloss.AdaptiveColor     { return t.BorderDimColor }
+func (t *BaseTheme) Border() lipgloss.AdaptiveColor       { return t.BorderColor }
+func (t *BaseTheme) BorderActive() lipgloss.AdaptiveColor { return t.BorderActiveColor }
+func (t *BaseTheme) BorderSubtle() lipgloss.AdaptiveColor { return t.BorderSubtleColor }
 
 func (t *BaseTheme) DiffAdded() lipgloss.AdaptiveColor            { return t.DiffAddedColor }
 func (t *BaseTheme) DiffRemoved() lipgloss.AdaptiveColor          { return t.DiffRemovedColor }
diff --git a/packages/tui/internal/theme/theme_test.go b/packages/tui/internal/theme/theme_test.go
deleted file mode 100644
index 790ee3aa8..000000000
--- a/packages/tui/internal/theme/theme_test.go
+++ /dev/null
@@ -1,89 +0,0 @@
-package theme
-
-import (
-	"testing"
-)
-
-func TestThemeRegistration(t *testing.T) {
-	// Get list of available themes
-	availableThemes := AvailableThemes()
-
-	// Check if "catppuccin" theme is registered
-	catppuccinFound := false
-	for _, themeName := range availableThemes {
-		if themeName == "catppuccin" {
-			catppuccinFound = true
-			break
-		}
-	}
-
-	if !catppuccinFound {
-		t.Errorf("Catppuccin theme is not registered")
-	}
-
-	// Check if "gruvbox" theme is registered
-	gruvboxFound := false
-	for _, themeName := range availableThemes {
-		if themeName == "gruvbox" {
-			gruvboxFound = true
-			break
-		}
-	}
-
-	if !gruvboxFound {
-		t.Errorf("Gruvbox theme is not registered")
-	}
-
-	// Check if "monokai" theme is registered
-	monokaiFound := false
-	for _, themeName := range availableThemes {
-		if themeName == "monokai" {
-			monokaiFound = true
-			break
-		}
-	}
-
-	if !monokaiFound {
-		t.Errorf("Monokai theme is not registered")
-	}
-
-	// Try to get the themes and make sure they're not nil
-	catppuccin := GetTheme("catppuccin")
-	if catppuccin == nil {
-		t.Errorf("Catppuccin theme is nil")
-	}
-
-	gruvbox := GetTheme("gruvbox")
-	if gruvbox == nil {
-		t.Errorf("Gruvbox theme is nil")
-	}
-
-	monokai := GetTheme("monokai")
-	if monokai == nil {
-		t.Errorf("Monokai theme is nil")
-	}
-
-	// Test switching theme
-	originalTheme := CurrentThemeName()
-
-	err := SetTheme("gruvbox")
-	if err != nil {
-		t.Errorf("Failed to set theme to gruvbox: %v", err)
-	}
-
-	if CurrentThemeName() != "gruvbox" {
-		t.Errorf("Theme not properly switched to gruvbox")
-	}
-
-	err = SetTheme("monokai")
-	if err != nil {
-		t.Errorf("Failed to set theme to monokai: %v", err)
-	}
-
-	if CurrentThemeName() != "monokai" {
-		t.Errorf("Theme not properly switched to monokai")
-	}
-
-	// Switch back to original theme
-	_ = SetTheme(originalTheme)
-}
diff --git a/packages/tui/internal/theme/tokyonight.go b/packages/tui/internal/theme/tokyonight.go
index a6499a25d..7ae53abc5 100644
--- a/packages/tui/internal/theme/tokyonight.go
+++ b/packages/tui/internal/theme/tokyonight.go
@@ -12,36 +12,60 @@ type TokyoNightTheme struct {
 
 // NewTokyoNightTheme creates a new instance of the Tokyo Night theme.
 func NewTokyoNightTheme() *TokyoNightTheme {
-	// Tokyo Night color palette
-	// Dark mode colors
-	darkBackground := "#222436"
-	darkCurrentLine := "#1e2030"
-	darkSelection := "#2f334d"
-	darkForeground := "#c8d3f5"
-	darkComment := "#636da6"
+	// Tokyo Night color palette with Radix-inspired scale progression
+	// Dark mode colors - Tokyo Night Moon variant
+	darkStep1 := "#1a1b26"  // App background (bg)
+	darkStep2 := "#1e2030"  // Subtle background (bg_dark)
+	darkStep3 := "#222436"  // UI element background (bg_highlight)
+	darkStep4 := "#292e42"  // Hovered UI element background
+	darkStep5 := "#3b4261"  // Active/Selected UI element background (bg_visual)
+	darkStep6 := "#545c7e"  // Subtle borders and separators (dark3)
+	darkStep7 := "#737aa2"  // UI element border and focus rings (dark5)
+	darkStep8 := "#9099b2"  // Hovered UI element border
+	darkStep9 := "#82aaff"  // Solid backgrounds (blue)
+	darkStep10 := "#89b4fa" // Hovered solid backgrounds
+	darkStep11 := "#828bb8" // Low-contrast text (using fg_dark for better contrast)
+	darkStep12 := "#c8d3f5" // High-contrast text (fg)
+
+	// Dark mode accent colors
 	darkRed := "#ff757f"
 	darkOrange := "#ff966c"
 	darkYellow := "#ffc777"
 	darkGreen := "#c3e88d"
 	darkCyan := "#86e1fc"
-	darkBlue := "#82aaff"
+	darkBlue := darkStep9 // Using step 9 for primary
 	darkPurple := "#c099ff"
-	darkBorder := "#3b4261"
 
-	// Light mode colors (Tokyo Night Day)
-	lightBackground := "#e1e2e7"
-	lightCurrentLine := "#d5d6db"
-	lightSelection := "#c8c9ce"
-	lightForeground := "#3760bf"
-	lightComment := "#848cb5"
+	// Light mode colors - Tokyo Night Day variant
+	lightStep1 := "#e1e2e7"  // App background
+	lightStep2 := "#d5d6db"  // Subtle background
+	lightStep3 := "#c8c9ce"  // UI element background
+	lightStep4 := "#b9bac1"  // Hovered UI element background
+	lightStep5 := "#a8aecb"  // Active/Selected UI element background
+	lightStep6 := "#9699a8"  // Subtle borders and separators
+	lightStep7 := "#737a8c"  // UI element border and focus rings
+	lightStep8 := "#5a607d"  // Hovered UI element border
+	lightStep9 := "#2e7de9"  // Solid backgrounds (blue)
+	lightStep10 := "#1a6ce7" // Hovered solid backgrounds
+	lightStep11 := "#8990a3" // Low-contrast text (more muted)
+	lightStep12 := "#3760bf" // High-contrast text
+
+	// Light mode accent colors
 	lightRed := "#f52a65"
 	lightOrange := "#b15c00"
 	lightYellow := "#8c6c3e"
 	lightGreen := "#587539"
 	lightCyan := "#007197"
-	lightBlue := "#2e7de9"
+	lightBlue := lightStep9 // Using step 9 for primary
 	lightPurple := "#9854f1"
-	lightBorder := "#a8aecb"
+
+	// Unused variables to avoid compiler errors (these could be used for hover states)
+	_ = darkStep4
+	_ = darkStep5
+	_ = darkStep10
+	_ = lightStep4
+	_ = lightStep5
+	_ = lightStep10
 
 	theme := &TokyoNightTheme{}
 
@@ -79,44 +103,40 @@ func NewTokyoNightTheme() *TokyoNightTheme {
 
 	// Text colors
 	theme.TextColor = lipgloss.AdaptiveColor{
-		Dark:  darkForeground,
-		Light: lightForeground,
+		Dark:  darkStep12,
+		Light: lightStep12,
 	}
 	theme.TextMutedColor = lipgloss.AdaptiveColor{
-		Dark:  darkComment,
-		Light: lightComment,
-	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  darkYellow,
-		Light: lightYellow,
+		Dark:  darkStep11,
+		Light: lightStep11,
 	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
-		Dark:  darkBackground,
-		Light: lightBackground,
+		Dark:  darkStep1,
+		Light: lightStep1,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
-		Dark:  darkCurrentLine,
-		Light: lightCurrentLine,
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep2,
+		Light: lightStep2,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
-		Dark:  "#191B29", // Darker background from palette
-		Light: "#f0f0f5", // Slightly lighter than background
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep3,
+		Light: lightStep3,
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
-		Dark:  darkBorder,
-		Light: lightBorder,
+	theme.BorderColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep7,
+		Light: lightStep7,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
-		Dark:  darkBlue,
-		Light: lightBlue,
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep8,
+		Light: lightStep8,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
-		Dark:  darkSelection,
-		Light: lightSelection,
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
+		Dark:  darkStep6,
+		Light: lightStep6,
 	}
 
 	// Diff view colors
@@ -153,12 +173,12 @@ func NewTokyoNightTheme() *TokyoNightTheme {
 		Light: "#f7d8db",
 	}
 	theme.DiffContextBgColor = lipgloss.AdaptiveColor{
-		Dark:  darkBackground,
-		Light: lightBackground,
+		Dark:  darkStep2,
+		Light: lightStep2,
 	}
 	theme.DiffLineNumberColor = lipgloss.AdaptiveColor{
-		Dark:  "#545c7e", // dark3 from palette
-		Light: "#848cb5",
+		Dark:  darkStep3, // dark3 from palette
+		Light: lightStep3,
 	}
 	theme.DiffAddedLineNumberBgColor = lipgloss.AdaptiveColor{
 		Dark:  "#1b2b34",
@@ -171,8 +191,8 @@ func NewTokyoNightTheme() *TokyoNightTheme {
 
 	// Markdown colors
 	theme.MarkdownTextColor = lipgloss.AdaptiveColor{
-		Dark:  darkForeground,
-		Light: lightForeground,
+		Dark:  darkStep12,
+		Light: lightStep12,
 	}
 	theme.MarkdownHeadingColor = lipgloss.AdaptiveColor{
 		Dark:  darkPurple,
@@ -203,8 +223,8 @@ func NewTokyoNightTheme() *TokyoNightTheme {
 		Light: lightOrange,
 	}
 	theme.MarkdownHorizontalRuleColor = lipgloss.AdaptiveColor{
-		Dark:  darkComment,
-		Light: lightComment,
+		Dark:  darkStep11,
+		Light: lightStep11,
 	}
 	theme.MarkdownListItemColor = lipgloss.AdaptiveColor{
 		Dark:  darkBlue,
@@ -223,14 +243,14 @@ func NewTokyoNightTheme() *TokyoNightTheme {
 		Light: lightCyan,
 	}
 	theme.MarkdownCodeBlockColor = lipgloss.AdaptiveColor{
-		Dark:  darkForeground,
-		Light: lightForeground,
+		Dark:  darkStep12,
+		Light: lightStep12,
 	}
 
 	// Syntax highlighting colors
 	theme.SyntaxCommentColor = lipgloss.AdaptiveColor{
-		Dark:  darkComment,
-		Light: lightComment,
+		Dark:  darkStep11,
+		Light: lightStep11,
 	}
 	theme.SyntaxKeywordColor = lipgloss.AdaptiveColor{
 		Dark:  darkPurple,
@@ -261,8 +281,8 @@ func NewTokyoNightTheme() *TokyoNightTheme {
 		Light: lightCyan,
 	}
 	theme.SyntaxPunctuationColor = lipgloss.AdaptiveColor{
-		Dark:  darkForeground,
-		Light: lightForeground,
+		Dark:  darkStep12,
+		Light: lightStep12,
 	}
 
 	return theme
diff --git a/packages/tui/internal/theme/tron.go b/packages/tui/internal/theme/tron.go
index c4997a6d1..ea9756753 100644
--- a/packages/tui/internal/theme/tron.go
+++ b/packages/tui/internal/theme/tron.go
@@ -88,35 +88,31 @@ func NewTronTheme() *TronTheme {
 		Dark:  darkComment,
 		Light: lightComment,
 	}
-	theme.TextEmphasizedColor = lipgloss.AdaptiveColor{
-		Dark:  darkYellow,
-		Light: lightYellow,
-	}
 
 	// Background colors
 	theme.BackgroundColor = lipgloss.AdaptiveColor{
 		Dark:  darkBackground,
 		Light: lightBackground,
 	}
-	theme.BackgroundSecondaryColor = lipgloss.AdaptiveColor{
+	theme.BackgroundSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkCurrentLine,
 		Light: lightCurrentLine,
 	}
-	theme.BackgroundDarkerColor = lipgloss.AdaptiveColor{
+	theme.BackgroundElementColor = lipgloss.AdaptiveColor{
 		Dark:  "#070d14", // Slightly darker than background
 		Light: "#ffffff", // Slightly lighter than background
 	}
 
 	// Border colors
-	theme.BorderNormalColor = lipgloss.AdaptiveColor{
+	theme.BorderColor = lipgloss.AdaptiveColor{
 		Dark:  darkBorder,
 		Light: lightBorder,
 	}
-	theme.BorderFocusedColor = lipgloss.AdaptiveColor{
+	theme.BorderActiveColor = lipgloss.AdaptiveColor{
 		Dark:  darkCyan,
 		Light: lightCyan,
 	}
-	theme.BorderDimColor = lipgloss.AdaptiveColor{
+	theme.BorderSubtleColor = lipgloss.AdaptiveColor{
 		Dark:  darkSelection,
 		Light: lightSelection,
 	}