Hypernova Docs - UI Themes theme.json Reference

How To Read This Reference

Token table: canonical variables shipped in assets/themes/default/theme.json.
Advanced variable table: extra variables introduced via advancedCss.variables in official premium/special themes.
Selector table: where rule-level control lives when tokens are not enough.

Use tokens first. Add advanced variables/rules only for visual systems that cannot be represented with tokens alone.

All Base Theme Tokens

CSS Var	Label	Group	Purpose	Default Value
`--primary-color`	Primary Color	corePalette	Base palette token for primary color.	`#00d2ff`
`--secondary-color`	Secondary Color	corePalette	Base palette token for secondary color.	`#9561e2`
`--tertiary-color`	Tertiary Color	corePalette	Base palette token for tertiary color.	`#f6bd60`
`--dark-bg`	Dark Bg	corePalette	Base palette token for dark bg.	`#061c34`
`--mid-bg`	Mid Bg	corePalette	Base palette token for mid bg.	`#0b2948`
`--light-bg`	Light Bg	corePalette	Base palette token for light bg.	`#132c57`
`--text-color`	Text Color	corePalette	Base palette token for text color.	`#e0e6f8`
`--ui-accent-color`	Ui Accent Color	corePalette	Base palette token for ui accent color.	`#00d2ff`
`--ui-text-primary`	Ui Text Primary	text	Primary text styling token for ui text primary.	`#e8f7ff`
`--ui-text-secondary`	Ui Text Secondary	text	Primary text styling token for ui text secondary.	`#9fb5dd`
`--ui-text-inverse`	Ui Text Inverse	text	Primary text styling token for ui text inverse.	`#ffffff`
`--ui-text-muted`	Ui Text Muted	text	Primary text styling token for ui text muted.	`rgba(159,181,221,0.78)`
`--ui-text-link`	Ui Text Link	text	Primary text styling token for ui text link.	`#7fd3ff`
`--ui-text-link-hover`	Ui Text Link Hover	text	Primary text styling token for ui text link hover.	`#a9e7ff`
`--ui-text-disabled`	Ui Text Disabled	text	Primary text styling token for ui text disabled.	`rgba(232,247,255,0.5)`
`--ui-surface-0`	Ui Surface 0	surfaces	Background/surface token used by panels and cards.	`rgba(5, 12, 28, 0.85)`
`--ui-surface-1`	Ui Surface 1	surfaces	Background/surface token used by panels and cards.	`rgba(11, 28, 64, 0.7)`
`--ui-surface-2`	Ui Surface 2	surfaces	Background/surface token used by panels and cards.	`rgba(8,18,34,0.7)`
`--ui-surface-3`	Ui Surface 3	surfaces	Background/surface token used by panels and cards.	`rgba(255,255,255,0.05)`
`--ui-bg-app`	Ui Bg App	surfaces	Background/surface token used by panels and cards.	`var(--ui-gradient-app)`
`--ui-bg-canvas`	Ui Bg Canvas	surfaces	Background/surface token used by panels and cards.	`var(--ui-gradient-canvas)`
`--ui-bg-panel`	Ui Bg Panel	surfaces	Background/surface token used by panels and cards.	`var(--ui-surface-1)`
`--ui-bg-card`	Ui Bg Card	surfaces	Background/surface token used by panels and cards.	`var(--ui-surface-0)`
`--ui-bg-input`	Ui Bg Input	surfaces	Background/surface token used by panels and cards.	`rgba(5,12,28,0.55)`
`--ui-bg-tooltip`	Ui Bg Tooltip	surfaces	Background/surface token used by panels and cards.	`rgba(7,17,38,0.95)`
`--ui-bg-modal`	Ui Bg Modal	surfaces	Background/surface token used by panels and cards.	`linear-gradient(180deg, rgba(11, 28, 64, 0.72), rgba(7, 17, 38, 0.72))`
`--ui-bg-chip`	Ui Bg Chip	surfaces	Background/surface token used by panels and cards.	`rgba(255,255,255,0.06)`
`--ui-bg-chip-active`	Ui Bg Chip Active	surfaces	Background/surface token used by panels and cards.	`rgba(0,210,255,0.18)`
`--ui-border-primary`	Ui Border Primary	borders	Border color token used across UI elements.	`rgba(0,210,255,0.35)`
`--ui-border-strong`	Ui Border Strong	borders	Border color token used across UI elements.	`rgba(0,210,255,0.65)`
`--ui-border-subtle`	Ui Border Subtle	borders	Border color token used across UI elements.	`rgba(255,255,255,0.12)`
`--ui-border-focus`	Ui Border Focus	borders	Border color token used across UI elements.	`rgba(0,210,255,0.55)`
`--ui-border-disabled`	Ui Border Disabled	borders	Border color token used across UI elements.	`rgba(255,255,255,0.08)`
`--ui-border-danger`	Ui Border Danger	borders	Border color token used across UI elements.	`rgba(255,107,107,0.55)`
`--ui-overlay`	Ui Overlay	overlays	Overlay tint token used in modal and layer blending.	`rgba(5, 10, 24, 0.72)`
`--ui-overlay-soft`	Ui Overlay Soft	overlays	Overlay tint token used in modal and layer blending.	`rgba(5, 10, 24, 0.5)`
`--ui-overlay-strong`	Ui Overlay Strong	overlays	Overlay tint token used in modal and layer blending.	`rgba(5, 10, 24, 0.82)`
`--ui-overlay-glass`	Ui Overlay Glass	overlays	Overlay tint token used in modal and layer blending.	`rgba(255,255,255,0.03)`
`--ui-gradient-primary`	Ui Gradient Primary	gradients	Gradient token used for themed fills and accents.	`linear-gradient(135deg, var(--primary-color), var(--secondary-color))`
`--ui-gradient-primary-soft`	Ui Gradient Primary Soft	gradients	Gradient token used for themed fills and accents.	`linear-gradient(180deg, var(--primary-color), var(--secondary-color))`
`--ui-gradient-app`	Ui Gradient App	gradients	Gradient token used for themed fills and accents.	`radial-gradient(circle at top, var(--dark-bg) 0%, #02092e 100%)`
`--ui-gradient-canvas`	Ui Gradient Canvas	gradients	Gradient token used for themed fills and accents.	`radial-gradient(circle, #02092e 0%, #010214 80%)`
`--ui-gradient-panel`	Ui Gradient Panel	gradients	Gradient token used for themed fills and accents.	`linear-gradient(180deg, rgba(11, 28, 64, 0.72), rgba(7, 17, 38, 0.72))`
`--ui-gradient-card`	Ui Gradient Card	gradients	Gradient token used for themed fills and accents.	`linear-gradient(180deg, rgba(8,18,34,0.72), rgba(5,12,28,0.82))`
`--ui-gradient-tab`	Ui Gradient Tab	gradients	Gradient token used for themed fills and accents.	`linear-gradient(180deg, rgba(0,210,255,0.14), rgba(123,97,255,0.1))`
`--ui-gradient-badge`	Ui Gradient Badge	gradients	Gradient token used for themed fills and accents.	`radial-gradient(circle at 30% 30%, #7fd3ff, #4aa3ff)`
`--ui-gradient-input`	Ui Gradient Input	gradients	Gradient token used for themed fills and accents.	`linear-gradient(180deg, rgba(0,210,255,0.1), rgba(149,97,226,0.08))`
`--ui-gradient-tooltip`	Ui Gradient Tooltip	gradients	Gradient token used for themed fills and accents.	`linear-gradient(180deg, rgba(11, 28, 64, 0.9), rgba(7, 17, 38, 0.9))`
`--ui-gradient-success`	Ui Gradient Success	gradients	Gradient token used for themed fills and accents.	`linear-gradient(135deg, #62f5a6, #3dcf88)`
`--ui-gradient-warning`	Ui Gradient Warning	gradients	Gradient token used for themed fills and accents.	`linear-gradient(135deg, #ffcc72, #ff9b47)`
`--ui-gradient-danger`	Ui Gradient Danger	gradients	Gradient token used for themed fills and accents.	`linear-gradient(135deg, #ff7f7f, #ff5e5e)`
`--ui-gradient-info`	Ui Gradient Info	gradients	Gradient token used for themed fills and accents.	`linear-gradient(135deg, #9de2ff, #4aa3ff)`
`--rarity-common`	Rarity Common	rarity	Rarity color used for item labels and highlights.	`#9aa0a6`
`--rarity-uncommon`	Rarity Uncommon	rarity	Rarity color used for item labels and highlights.	`#43d17a`
`--rarity-rare`	Rarity Rare	rarity	Rarity color used for item labels and highlights.	`#4aa3ff`
`--rarity-epic`	Rarity Epic	rarity	Rarity color used for item labels and highlights.	`#b266ff`
`--rarity-mythic`	Rarity Mythic	rarity	Rarity color used for item labels and highlights.	`#ff5252`
`--rarity-legendary`	Rarity Legendary	rarity	Rarity color used for item labels and highlights.	`#f6bd60`
`--rarity-event`	Rarity Event	rarity	Rarity color used for item labels and highlights.	`#3ddbd9`
`--ui-font-family`	Ui Font Family	typography	Typography token used for font family, size, or text rhythm.	`'Orbitron', sans-serif`
`--ui-font-size-xs`	Ui Font Size Xs	typography	Typography token used for font family, size, or text rhythm.	`11px`
`--ui-font-size-sm`	Ui Font Size Sm	typography	Typography token used for font family, size, or text rhythm.	`12px`
`--ui-font-size-base`	Ui Font Size Base	typography	Typography token used for font family, size, or text rhythm.	`14px`
`--ui-font-size-md`	Ui Font Size Md	typography	Typography token used for font family, size, or text rhythm.	`16px`
`--ui-font-size-lg`	Ui Font Size Lg	typography	Typography token used for font family, size, or text rhythm.	`18px`
`--ui-font-size-xl`	Ui Font Size Xl	typography	Typography token used for font family, size, or text rhythm.	`22px`
`--ui-line-height-tight`	Ui Line Height Tight	typography	Typography token used for font family, size, or text rhythm.	`1.15`
`--ui-line-height-normal`	Ui Line Height Normal	typography	Typography token used for font family, size, or text rhythm.	`1.35`
`--ui-line-height-relaxed`	Ui Line Height Relaxed	typography	Typography token used for font family, size, or text rhythm.	`1.55`
`--ui-font-weight-regular`	Ui Font Weight Regular	typography	Typography token used for font family, size, or text rhythm.	`400`
`--ui-font-weight-medium`	Ui Font Weight Medium	typography	Typography token used for font family, size, or text rhythm.	`500`
`--ui-font-weight-semibold`	Ui Font Weight Semibold	typography	Typography token used for font family, size, or text rhythm.	`600`
`--ui-font-weight-bold`	Ui Font Weight Bold	typography	Typography token used for font family, size, or text rhythm.	`700`
`--ui-letter-spacing-tight`	Ui Letter Spacing Tight	typography	Typography token used for font family, size, or text rhythm.	`0.02em`
`--ui-letter-spacing-normal`	Ui Letter Spacing Normal	typography	Typography token used for font family, size, or text rhythm.	`0.04em`
`--ui-letter-spacing-wide`	Ui Letter Spacing Wide	typography	Typography token used for font family, size, or text rhythm.	`0.08em`
`--ui-font-size-2xl`	Ui Font Size 2xl	typography	Typography token used for font family, size, or text rhythm.	`28px`
`--ui-font-size-3xl`	Ui Font Size 3xl	typography	Typography token used for font family, size, or text rhythm.	`34px`
`--ui-letter-spacing-ultra`	Ui Letter Spacing Ultra	typography	Typography token used for font family, size, or text rhythm.	`0.12em`
`--ui-font-family-heading`	Ui Font Family Heading	typography	Typography token used for font family, size, or text rhythm.	`'Orbitron', sans-serif`
`--ui-font-family-body`	Ui Font Family Body	typography	Typography token used for font family, size, or text rhythm.	`'Orbitron', sans-serif`
`--ui-font-family-mono`	Ui Font Family Mono	typography	Typography token used for font family, size, or text rhythm.	`'Consolas', 'Courier New', monospace`
`--ui-font-family-numeric`	Ui Font Family Numeric	typography	Typography token used for font family, size, or text rhythm.	`'Orbitron', sans-serif`
`--ui-space-2`	Ui Space 2	spacing	Spacing scale token used for margins and paddings.	`2px`
`--ui-space-4`	Ui Space 4	spacing	Spacing scale token used for margins and paddings.	`4px`
`--ui-space-6`	Ui Space 6	spacing	Spacing scale token used for margins and paddings.	`6px`
`--ui-space-8`	Ui Space 8	spacing	Spacing scale token used for margins and paddings.	`8px`
`--ui-space-10`	Ui Space 10	spacing	Spacing scale token used for margins and paddings.	`10px`
`--ui-space-12`	Ui Space 12	spacing	Spacing scale token used for margins and paddings.	`12px`
`--ui-space-14`	Ui Space 14	spacing	Spacing scale token used for margins and paddings.	`14px`
`--ui-space-16`	Ui Space 16	spacing	Spacing scale token used for margins and paddings.	`16px`
`--ui-space-18`	Ui Space 18	spacing	Spacing scale token used for margins and paddings.	`18px`
`--ui-space-20`	Ui Space 20	spacing	Spacing scale token used for margins and paddings.	`20px`
`--ui-space-24`	Ui Space 24	spacing	Spacing scale token used for margins and paddings.	`24px`
`--ui-space-28`	Ui Space 28	spacing	Spacing scale token used for margins and paddings.	`28px`
`--ui-space-32`	Ui Space 32	spacing	Spacing scale token used for margins and paddings.	`32px`
`--ui-space-40`	Ui Space 40	spacing	Spacing scale token used for margins and paddings.	`40px`
`--ui-space-48`	Ui Space 48	spacing	Spacing scale token used for margins and paddings.	`48px`
`--ui-space-64`	Ui Space 64	spacing	Spacing scale token used for margins and paddings.	`64px`
`--ui-radius-sm`	Ui Radius Sm	radius	Corner radius token used for component rounding.	`10px`
`--ui-radius-md`	Ui Radius Md	radius	Corner radius token used for component rounding.	`14px`
`--ui-radius-lg`	Ui Radius Lg	radius	Corner radius token used for component rounding.	`18px`
`--ui-radius-xl`	Ui Radius Xl	radius	Corner radius token used for component rounding.	`24px`
`--ui-radius-pill`	Ui Radius Pill	radius	Corner radius token used for component rounding.	`999px`
`--ui-border-width-hairline`	Ui Border Width Hairline	bordersScale	Border thickness or focus-ring token for interaction states.	`1px`
`--ui-border-width-base`	Ui Border Width Base	bordersScale	Border thickness or focus-ring token for interaction states.	`1px`
`--ui-border-width-strong`	Ui Border Width Strong	bordersScale	Border thickness or focus-ring token for interaction states.	`2px`
`--ui-focus-ring-width`	Ui Focus Ring Width	bordersScale	Border thickness or focus-ring token for interaction states.	`2px`
`--ui-focus-ring-color`	Ui Focus Ring Color	bordersScale	Border thickness or focus-ring token for interaction states.	`rgba(0,210,255,0.55)`
`--ui-shadow-panel`	Ui Shadow Panel	effects	Visual effect token for shadow, glow, blur, or opacity.	`0 12px 30px rgba(0,0,0,0.45)`
`--ui-shadow-soft`	Ui Shadow Soft	effects	Visual effect token for shadow, glow, blur, or opacity.	`0 10px 26px rgba(0,0,0,0.4)`
`--ui-glow-primary`	Ui Glow Primary	effects	Visual effect token for shadow, glow, blur, or opacity.	`rgba(0, 210, 255, 0.45)`
`--ui-backdrop-blur`	Ui Backdrop Blur	effects	Visual effect token for shadow, glow, blur, or opacity.	`10px`
`--ui-blur-soft`	Ui Blur Soft	effects	Visual effect token for shadow, glow, blur, or opacity.	`6px`
`--ui-glow-intensity`	Ui Glow Intensity	effects	Visual effect token for shadow, glow, blur, or opacity.	`1`
`--ui-opacity-disabled`	Ui Opacity Disabled	effects	Visual effect token for shadow, glow, blur, or opacity.	`0.5`
`--ui-opacity-muted`	Ui Opacity Muted	effects	Visual effect token for shadow, glow, blur, or opacity.	`0.78`
`--ui-opacity-passive`	Ui Opacity Passive	effects	Visual effect token for shadow, glow, blur, or opacity.	`0.62`
`--ui-shadow-inset`	Ui Shadow Inset	effects	Visual effect token for shadow, glow, blur, or opacity.	`inset 0 1px 0 rgba(255,255,255,0.06)`
`--ui-shadow-elevated`	Ui Shadow Elevated	effects	Visual effect token for shadow, glow, blur, or opacity.	`0 16px 40px rgba(0,0,0,0.5)`
`--ui-shadow-focus`	Ui Shadow Focus	effects	Visual effect token for shadow, glow, blur, or opacity.	`0 0 0 2px rgba(0,210,255,0.3)`
`--ui-glow-secondary`	Ui Glow Secondary	effects	Visual effect token for shadow, glow, blur, or opacity.	`rgba(149,97,226,0.34)`
`--ui-glow-success`	Ui Glow Success	effects	Visual effect token for shadow, glow, blur, or opacity.	`rgba(98,245,166,0.42)`
`--ui-glow-warning`	Ui Glow Warning	effects	Visual effect token for shadow, glow, blur, or opacity.	`rgba(255,179,71,0.38)`
`--ui-glow-danger`	Ui Glow Danger	effects	Visual effect token for shadow, glow, blur, or opacity.	`rgba(255,107,107,0.42)`
`--ui-color-success`	Ui Color Success	semanticStates	Semantic state color token (success/warning/danger/info).	`#62f5a6`
`--ui-color-warning`	Ui Color Warning	semanticStates	Semantic state color token (success/warning/danger/info).	`#ffb347`
`--ui-color-danger`	Ui Color Danger	semanticStates	Semantic state color token (success/warning/danger/info).	`#ff6b6b`
`--ui-color-info`	Ui Color Info	semanticStates	Semantic state color token (success/warning/danger/info).	`#7fd3ff`
`--ui-on-success`	Ui On Success	semanticStates	Semantic state color token (success/warning/danger/info).	`#05121c`
`--ui-on-warning`	Ui On Warning	semanticStates	Semantic state color token (success/warning/danger/info).	`#2a1400`
`--ui-on-danger`	Ui On Danger	semanticStates	Semantic state color token (success/warning/danger/info).	`#2a0b0b`
`--ui-on-info`	Ui On Info	semanticStates	Semantic state color token (success/warning/danger/info).	`#061827`
`--ui-progress-xp-fill`	Ui Progress Xp Fill	progressMeters	Progress bar fill/background token for gameplay meters.	`linear-gradient(90deg, #00d2ff, #7b61ff)`
`--ui-progress-xp-bg`	Ui Progress Xp Bg	progressMeters	Progress bar fill/background token for gameplay meters.	`rgba(8,20,42,0.9)`
`--ui-progress-research-fill`	Ui Progress Research Fill	progressMeters	Progress bar fill/background token for gameplay meters.	`linear-gradient(90deg, #7cf2ff, #36d1ff)`
`--ui-progress-research-bg`	Ui Progress Research Bg	progressMeters	Progress bar fill/background token for gameplay meters.	`rgba(7,17,34,0.75)`
`--ui-progress-health-fill`	Ui Progress Health Fill	progressMeters	Progress bar fill/background token for gameplay meters.	`linear-gradient(90deg, #ff5d5d 0%, #f5b04a 42%, #66f1a8 100%)`
`--ui-progress-health-bg`	Ui Progress Health Bg	progressMeters	Progress bar fill/background token for gameplay meters.	`rgba(8,20,42,0.9)`
`--ui-progress-shield-fill`	Ui Progress Shield Fill	progressMeters	Progress bar fill/background token for gameplay meters.	`linear-gradient(90deg, #7fd3ff, #4aa3ff)`
`--ui-progress-shield-bg`	Ui Progress Shield Bg	progressMeters	Progress bar fill/background token for gameplay meters.	`rgba(9,18,36,0.88)`
`--ui-toast-success-bg`	Ui Toast Success Bg	notifications	Notification/toast token for state feedback visuals.	`rgba(20,52,40,0.92)`
`--ui-toast-success-border`	Ui Toast Success Border	notifications	Notification/toast token for state feedback visuals.	`rgba(98,245,166,0.5)`
`--ui-toast-success-text`	Ui Toast Success Text	notifications	Notification/toast token for state feedback visuals.	`#dfffea`
`--ui-toast-warning-bg`	Ui Toast Warning Bg	notifications	Notification/toast token for state feedback visuals.	`rgba(58,40,18,0.94)`
`--ui-toast-warning-border`	Ui Toast Warning Border	notifications	Notification/toast token for state feedback visuals.	`rgba(255,193,97,0.55)`
`--ui-toast-warning-text`	Ui Toast Warning Text	notifications	Notification/toast token for state feedback visuals.	`#ffe6bb`
`--ui-toast-danger-bg`	Ui Toast Danger Bg	notifications	Notification/toast token for state feedback visuals.	`rgba(58,24,24,0.94)`
`--ui-toast-danger-border`	Ui Toast Danger Border	notifications	Notification/toast token for state feedback visuals.	`rgba(255,120,120,0.55)`
`--ui-toast-danger-text`	Ui Toast Danger Text	notifications	Notification/toast token for state feedback visuals.	`#ffd3d3`
`--ui-toast-info-bg`	Ui Toast Info Bg	notifications	Notification/toast token for state feedback visuals.	`rgba(18,34,56,0.94)`
`--ui-toast-info-border`	Ui Toast Info Border	notifications	Notification/toast token for state feedback visuals.	`rgba(125,211,255,0.55)`
`--ui-toast-info-text`	Ui Toast Info Text	notifications	Notification/toast token for state feedback visuals.	`#d7efff`
`--ui-icon-stroke`	Ui Icon Stroke	icons	Icon color token for strokes/fills and semantic icon states.	`currentColor`
`--ui-icon-fill`	Ui Icon Fill	icons	Icon color token for strokes/fills and semantic icon states.	`currentColor`
`--ui-icon-muted`	Ui Icon Muted	icons	Icon color token for strokes/fills and semantic icon states.	`#9fb5dd`
`--ui-icon-primary`	Ui Icon Primary	icons	Icon color token for strokes/fills and semantic icon states.	`#00d2ff`
`--ui-icon-secondary`	Ui Icon Secondary	icons	Icon color token for strokes/fills and semantic icon states.	`#9561e2`
`--ui-icon-danger`	Ui Icon Danger	icons	Icon color token for strokes/fills and semantic icon states.	`#ff6b6b`
`--ui-icon-success`	Ui Icon Success	icons	Icon color token for strokes/fills and semantic icon states.	`#62f5a6`
`--ui-anim-fast`	Ui Anim Fast	animation	Animation speed/easing token for transitions.	`140ms`
`--ui-anim-normal`	Ui Anim Normal	animation	Animation speed/easing token for transitions.	`220ms`
`--ui-anim-slow`	Ui Anim Slow	animation	Animation speed/easing token for transitions.	`360ms`
`--ui-ease-standard`	Ui Ease Standard	animation	Animation speed/easing token for transitions.	`ease`
`--ui-ease-emphasis`	Ui Ease Emphasis	animation	Animation speed/easing token for transitions.	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ui-density-scale`	Ui Density Scale	accessibility	Accessibility multiplier token for density/contrast/motion.	`1`
`--ui-contrast-scale`	Ui Contrast Scale	accessibility	Accessibility multiplier token for density/contrast/motion.	`1`
`--ui-motion-scale`	Ui Motion Scale	accessibility	Accessibility multiplier token for density/contrast/motion.	`1`
`--ui-canvas-hud-text`	Ui Canvas Hud Text	canvasHud	Canvas/HUD token used by JS-rendered overlays.	`#e8f7ff`
`--ui-canvas-hud-shadow`	Ui Canvas Hud Shadow	canvasHud	Canvas/HUD token used by JS-rendered overlays.	`rgba(0,0,0,0.45)`
`--ui-canvas-hud-stroke`	Ui Canvas Hud Stroke	canvasHud	Canvas/HUD token used by JS-rendered overlays.	`rgba(6,20,44,0.8)`
`--ui-canvas-accent`	Ui Canvas Accent	canvasHud	Canvas/HUD token used by JS-rendered overlays.	`#00d2ff`
`--ui-canvas-warning`	Ui Canvas Warning	canvasHud	Canvas/HUD token used by JS-rendered overlays.	`#ffb347`
`--ui-canvas-danger`	Ui Canvas Danger	canvasHud	Canvas/HUD token used by JS-rendered overlays.	`#ff6b6b`
`--ui-canvas-success`	Ui Canvas Success	canvasHud	Canvas/HUD token used by JS-rendered overlays.	`#62f5a6`
`--ui-component-button-bg`	Ui Component Button Bg	components	Component-level style token for interactive controls.	`var(--ui-gradient-primary)`
`--ui-component-button-bg-hover`	Ui Component Button Bg Hover	components	Component-level style token for interactive controls.	`linear-gradient(135deg, #26dcff, #aa7bff)`
`--ui-component-button-bg-active`	Ui Component Button Bg Active	components	Component-level style token for interactive controls.	`linear-gradient(135deg, #00bde7, #8452d1)`
`--ui-component-button-border`	Ui Component Button Border	components	Component-level style token for interactive controls.	`var(--ui-border-strong)`
`--ui-component-input-bg`	Ui Component Input Bg	components	Component-level style token for interactive controls.	`rgba(5,12,28,0.55)`
`--ui-component-input-border`	Ui Component Input Border	components	Component-level style token for interactive controls.	`var(--ui-border-subtle)`
`--ui-component-input-border-focus`	Ui Component Input Border Focus	components	Component-level style token for interactive controls.	`var(--ui-border-focus)`
`--ui-component-tab-bg`	Ui Component Tab Bg	components	Component-level style token for interactive controls.	`rgba(255,255,255,0.04)`
`--ui-component-tab-bg-active`	Ui Component Tab Bg Active	components	Component-level style token for interactive controls.	`var(--ui-gradient-tab)`
`--ui-component-tab-text-active`	Ui Component Tab Text Active	components	Component-level style token for interactive controls.	`var(--ui-text-primary)`
`--ui-component-modal-bg`	Ui Component Modal Bg	components	Component-level style token for interactive controls.	`var(--ui-bg-modal)`
`--ui-component-tooltip-bg`	Ui Component Tooltip Bg	components	Component-level style token for interactive controls.	`var(--ui-bg-tooltip)`
`--ui-component-toast-radius`	Ui Component Toast Radius	components	Component-level style token for interactive controls.	`10px`
`--ui-stat-groups-bg`	Ui Stat Groups Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(6, 14, 28, 0.55)`
`--ui-stat-groups-border`	Ui Stat Groups Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(255,255,255,0.08)`
`--ui-stat-btn-bg`	Ui Stat Btn Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(255,255,255,0.05)`
`--ui-stat-btn-text`	Ui Stat Btn Text	components	Theme color token for inventory, statistics, and ship-slot styling.	`#e5f2ff`
`--ui-stat-btn-hover-border`	Ui Stat Btn Hover Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(105, 210, 255, 0.6)`
`--ui-stat-btn-active-bg`	Ui Stat Btn Active Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`linear-gradient(135deg, rgba(41,193,255,0.95), rgba(123,97,255,0.85))`
`--ui-stat-btn-active-text`	Ui Stat Btn Active Text	components	Theme color token for inventory, statistics, and ship-slot styling.	`#06111f`
`--ui-stat-panel-bg`	Ui Stat Panel Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(7, 16, 32, 0.55)`
`--ui-stat-panel-border`	Ui Stat Panel Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(255,255,255,0.08)`
`--ui-stat-panel-title`	Ui Stat Panel Title	components	Theme color token for inventory, statistics, and ship-slot styling.	`#eef6ff`
`--ui-stat-panel-meta`	Ui Stat Panel Meta	components	Theme color token for inventory, statistics, and ship-slot styling.	`#7fd3ff`
`--ui-stat-row-bg`	Ui Stat Row Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(12, 26, 46, 0.75)`
`--ui-stat-row-border`	Ui Stat Row Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(255,255,255,0.08)`
`--ui-stat-row-label`	Ui Stat Row Label	components	Theme color token for inventory, statistics, and ship-slot styling.	`#f4f8ff`
`--ui-stat-row-value`	Ui Stat Row Value	components	Theme color token for inventory, statistics, and ship-slot styling.	`#7fffd4`
`--ui-inventory-header-bg`	Ui Inventory Header Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(10, 26, 54, 0.85)`
`--ui-inventory-header-border`	Ui Inventory Header Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(120, 210, 255, 0.2)`
`--ui-inventory-input-bg`	Ui Inventory Input Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(10, 24, 48, 0.65)`
`--ui-inventory-input-border`	Ui Inventory Input Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(120, 210, 255, 0.2)`
`--ui-inventory-input-text`	Ui Inventory Input Text	components	Theme color token for inventory, statistics, and ship-slot styling.	`#e2f2ff`
`--ui-inventory-tab-bg`	Ui Inventory Tab Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(12, 30, 60, 0.6)`
`--ui-inventory-tab-border`	Ui Inventory Tab Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(120, 210, 255, 0.2)`
`--ui-inventory-tab-text`	Ui Inventory Tab Text	components	Theme color token for inventory, statistics, and ship-slot styling.	`#b9d7ff`
`--ui-inventory-tab-active-bg`	Ui Inventory Tab Active Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`linear-gradient(120deg, #2c9cff, #7e6bff)`
`--ui-inventory-tab-active-text`	Ui Inventory Tab Active Text	components	Theme color token for inventory, statistics, and ship-slot styling.	`#0b1a33`
`--ui-inventory-item-bg`	Ui Inventory Item Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(14, 32, 62, 0.8)`
`--ui-inventory-item-border`	Ui Inventory Item Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(120, 210, 255, 0.16)`
`--ui-inventory-item-title`	Ui Inventory Item Title	components	Theme color token for inventory, statistics, and ship-slot styling.	`#e2f2ff`
`--ui-inventory-item-count`	Ui Inventory Item Count	components	Theme color token for inventory, statistics, and ship-slot styling.	`#79dbff`
`--ui-inventory-empty-bg`	Ui Inventory Empty Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(10, 24, 48, 0.5)`
`--ui-inventory-empty-border`	Ui Inventory Empty Border	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(120, 210, 255, 0.2)`
`--ui-ship-slot-bg`	Ui Ship Slot Bg	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(8, 20, 42, 0.6)`
`--ui-ship-slot-locked`	Ui Ship Slot Locked	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(255, 70, 70, 0.7)`
`--ui-ship-slot-empty`	Ui Ship Slot Empty	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(110, 220, 140, 0.55)`
`--ui-ship-slot-filled`	Ui Ship Slot Filled	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(120, 210, 255, 0.45)`
`--ui-ship-slot-filled-glow`	Ui Ship Slot Filled Glow	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(120, 210, 255, 0.45)`
`--ui-ship-slot-empty-glow`	Ui Ship Slot Empty Glow	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(110, 220, 140, 0.35)`
`--ui-ship-slot-locked-glow`	Ui Ship Slot Locked Glow	components	Theme color token for inventory, statistics, and ship-slot styling.	`rgba(255, 70, 70, 0.45)`
`--ui-ship-modal-bg`	Ui Ship Modal Bg	components	Theme color token for ship menu background and header styling.	`radial-gradient(circle at 50% 50%, rgba(9, 26, 52, 0.6), rgba(6, 16, 34, 0.95) 70%)`
`--ui-ship-modal-overlay-opacity`	Ui Ship Modal Overlay Opacity	components	Theme color token for ship menu background and header styling.	`0.7`
`--ui-ship-header-bg`	Ui Ship Header Bg	components	Theme color token for ship menu background and header styling.	`rgba(10, 26, 54, 0.85)`
`--ui-ship-header-border`	Ui Ship Header Border	components	Theme color token for ship menu background and header styling.	`rgba(120, 210, 255, 0.2)`
`--ui-ship-header-title`	Ui Ship Header Title	components	Theme color token for ship menu background and header styling.	`#d7ecff`
`--ui-menu-account-bg`	Ui Menu Account Bg	components	Theme token for main menu card and command center styling.	`radial-gradient(circle at 20% 20%, rgba(41,193,255,0.9), rgba(11,37,64,0.96))`
`--ui-menu-account-border`	Ui Menu Account Border	components	Theme token for main menu card and command center styling.	`rgba(255,255,255,0.2)`
`--ui-menu-season-bg`	Ui Menu Season Bg	components	Theme token for main menu card and command center styling.	`radial-gradient(circle at 20% 20%, rgba(78,134,255,0.95), rgba(19,32,71,0.98))`
`--ui-menu-season-border`	Ui Menu Season Border	components	Theme token for main menu card and command center styling.	`rgba(255,255,255,0.2)`
`--ui-menu-season-title`	Ui Menu Season Title	components	Theme token for main menu card and command center styling.	`#bcd7ff`
`--ui-menu-season-mini-fill`	Ui Menu Season Mini Fill	components	Theme token for main menu card and command center styling.	`linear-gradient(90deg, #37d7ff, #7b61ff)`
`--ui-menu-season-open-bg`	Ui Menu Season Open Bg	components	Theme token for main menu card and command center styling.	`linear-gradient(135deg, rgba(41,193,255,0.9), rgba(123,97,255,0.85))`
`--ui-menu-season-open-border`	Ui Menu Season Open Border	components	Theme token for main menu card and command center styling.	`rgba(255,255,255,0.2)`
`--ui-menu-season-open-text`	Ui Menu Season Open Text	components	Theme token for main menu card and command center styling.	`#05101e`
`--ui-menu-main-button-hover-bg`	Ui Menu Main Button Hover Bg	components	Theme token for main menu card and command center styling.	`linear-gradient(135deg, #26dcff, #aa7bff)`
`--ui-menu-inbox-bg`	Ui Menu Inbox Bg	components	Theme token for main menu card and command center styling.	`radial-gradient(circle at 20% 20%, rgba(26,171,255,0.9), rgba(8,24,48,0.96))`
`--ui-menu-inbox-border`	Ui Menu Inbox Border	components	Theme token for main menu card and command center styling.	`var(--ui-border-primary)`
`--ui-menu-inbox-icon`	Ui Menu Inbox Icon	components	Theme token for main menu card and command center styling.	`#dff5ff`
`--ui-menu-inbox-hover-bg`	Ui Menu Inbox Hover Bg	components	Theme token for main menu card and command center styling.	`radial-gradient(circle at 20% 20%, rgba(36,188,255,0.92), rgba(10,30,58,0.98))`
`--ui-season-level-ring-fill`	Ui Season Level Ring Fill	components	Theme token for season/account level badge ring progress color.	`rgba(124, 242, 255, 0.95)`
`--ui-season-level-ring-track`	Ui Season Level Ring Track	components	Theme token for season/account level badge ring track color.	`rgba(124, 242, 255, 0.18)`
`--ui-season-level-inner-bg`	Ui Season Level Inner Bg	components	Theme token for season/account level badge inner background.	`rgba(8, 18, 32, 0.9)`
`--ui-season-level-inner-border`	Ui Season Level Inner Border	components	Theme token for season/account level badge inner border.	`rgba(124, 242, 255, 0.35)`
`--ui-season-level-inner-glow`	Ui Season Level Inner Glow	components	Theme token for season/account level badge inner glow.	`0 0 18px rgba(74,163,255,0.3)`
`--ui-menu-ccb-start-bg`	Ui Menu Ccb Start Bg	components	Theme token for main menu card and command center styling.	`radial-gradient(circle at 25% 22%, rgba(41,193,255,0.24), rgba(17,34,65,0.65) 44%, rgba(10,18,38,0.92) 100%), linear-gradient(135deg, rgba(41,193,255,0.10), rgba(123,97,255,0.10))`
`--ui-menu-ccb-start-border`	Ui Menu Ccb Start Border	components	Theme token for main menu card and command center styling.	`rgba(255,255,255,0.16)`
`--ui-menu-ccb-start-after`	Ui Menu Ccb Start After	components	Theme token for main menu card and command center styling.	`radial-gradient(circle at 40% 40%, rgba(41,193,255,0.55), transparent 55%)`
`--ui-menu-ccb-start-hover-border`	Ui Menu Ccb Start Hover Border	components	Theme token for main menu card and command center styling.	`rgba(41,193,255,0.35)`
`--ui-menu-ccb-group-bg`	Ui Menu Ccb Group Bg	components	Theme token for main menu card and command center styling.	`rgba(255,255,255,0.035)`
`--ui-menu-ccb-group-border`	Ui Menu Ccb Group Border	components	Theme token for main menu card and command center styling.	`var(--ui-border-subtle)`
`--ui-menu-ccb-accent-play-1`	Ui Menu Ccb Accent Play 1	components	Theme token for main menu card and command center styling.	`rgba(41,193,255,0.7)`
`--ui-menu-ccb-accent-play-2`	Ui Menu Ccb Accent Play 2	components	Theme token for main menu card and command center styling.	`rgba(123,97,255,0.6)`
`--ui-menu-ccb-accent-progress-1`	Ui Menu Ccb Accent Progress 1	components	Theme token for main menu card and command center styling.	`rgba(155,140,255,0.7)`
`--ui-menu-ccb-accent-progress-2`	Ui Menu Ccb Accent Progress 2	components	Theme token for main menu card and command center styling.	`rgba(41,193,255,0.55)`
`--ui-menu-ccb-accent-collection-1`	Ui Menu Ccb Accent Collection 1	components	Theme token for main menu card and command center styling.	`rgba(98,245,166,0.65)`
`--ui-menu-ccb-accent-collection-2`	Ui Menu Ccb Accent Collection 2	components	Theme token for main menu card and command center styling.	`rgba(41,193,255,0.55)`
`--ui-menu-ccb-accent-meta-1`	Ui Menu Ccb Accent Meta 1	components	Theme token for main menu card and command center styling.	`rgba(125,145,255,0.65)`
`--ui-menu-ccb-accent-meta-2`	Ui Menu Ccb Accent Meta 2	components	Theme token for main menu card and command center styling.	`rgba(123,97,255,0.55)`
`--ui-premium-resource-pill-track-bg`	Ui Premium Resource Pill Track Bg	components	Theme token for premium season pass resource progress bars.	`rgba(5, 12, 24, 0.9)`
`--ui-premium-resource-pill-fill-missing`	Ui Premium Resource Pill Fill Missing	components	Theme token for premium season pass resource progress bars.	`linear-gradient(90deg, #4ac0ff, #7c5cff)`
`--ui-premium-resource-pill-fill-met`	Ui Premium Resource Pill Fill Met	components	Theme token for premium season pass resource progress bars.	`linear-gradient(90deg, #43d17a, #71f6b8)`
`--ui-scrollbar-thumb`	Ui Scrollbar Thumb	scrollbars	Scrollbar styling token for thumb/track visuals.	`linear-gradient(180deg, rgba(0,210,255,0.86), rgba(123,97,255,0.86))`
`--ui-scrollbar-track`	Ui Scrollbar Track	scrollbars	Scrollbar styling token for thumb/track visuals.	`rgba(5,12,28,0.7)`
`--ui-scrollbar-thumb-hover`	Ui Scrollbar Thumb Hover	scrollbars	Scrollbar styling token for thumb/track visuals.	`linear-gradient(180deg, rgba(62,224,255,0.92), rgba(157,132,255,0.92))`

Advanced Variables Used By Official Themes

These are optional. Missing values safely fall back to default behavior, so old themes stay compatible.

Variable	What It Controls	Used In	Sample Value
`--ui-advanced-flat-surface`	Advanced flat/minimal material system used by wormhole-style themes.	default, wormhole, comic	`rgba(8,8,8,0.96)`
`--ui-advanced-flat-surface-soft`	Advanced flat/minimal material system used by wormhole-style themes.	default, wormhole, comic	`rgba(13,13,13,0.95)`
`--ui-advanced-flat-border`	Advanced flat/minimal material system used by wormhole-style themes.	default, wormhole, comic	`rgba(192,192,192,0.76)`
`--ui-advanced-flat-border-strong`	Advanced flat/minimal material system used by wormhole-style themes.	default, wormhole, comic	`rgba(192,192,192,0.96)`
`--ui-advanced-flat-hover`	Advanced flat/minimal material system used by wormhole-style themes.	default, wormhole, comic	`rgba(212,175,55,0.12)`
`--ui-advanced-flat-shadow`	Advanced flat/minimal material system used by wormhole-style themes.	default, wormhole, comic	`3px 3px 0 rgba(0,0,0,0.98), 7px 7px 0 rgba(192,192,192,0.07)`
`--ui-advanced-focus-ring`	Advanced flat/minimal material system used by wormhole-style themes.	default, wormhole, comic	`0 0 0 2px rgba(255,255,255,0.65)`
`--ui-imperial-card`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`linear-gradient(180deg, rgba(17,17,17,0.95), rgba(12,12,12,0.95))`
`--ui-imperial-card-hover`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`linear-gradient(180deg, rgba(22,22,22,0.97), rgba(14,14,14,0.96))`
`--ui-imperial-shadow`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`0 10px 24px rgba(0,0,0,0.45)`
`--ui-imperial-hairline`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.78)`
`--ui-imperial-marble-a`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`rgba(255,255,255,0.065)`
`--ui-imperial-marble-b`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`rgba(238,238,238,0.045)`
`--ui-imperial-marble-c`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`rgba(255,255,255,0.03)`
`--ui-imperial-marble-gloss`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`rgba(255,255,255,0.12)`
`--ui-imperial-marble-shadow`	Imperial Inkstorm material system (marble, trim, premium card depth).	comic	`rgba(0,0,0,0.38)`

High-Impact Selector Coverage

Selector	In-Game Area	Themes Using It	Property Count
`.ccb-start, .ccb-group, .ccb-tile`	Main menu command center	n/a	0
`.menu-btn, .close-btn`	Global button system	n/a	0
`#seasonPassModal .modal-content, #seasonPassModal .season-pass-modal, #seasonPassModal .season-pass-scene, #seasonPassModal .season-pass-side, #seasonPassModal .season-pass-panel, #seasonPassModal .season-pass-progress, #seasonPassModal .season-pass-hero, #seasonPassModal .season-pass-reward, #seasonPassModal .season-pass-track-row, #seasonPassModal .season-pass-node, #seasonPassModal .season-pass-header, #seasonPassModal .season-pass-subtitle, #seasonPassModal .season-pass-timeline`	Season Pass modal	n/a	0
`#seasonPassModal .season-pass-bar, #seasonPassModal .season-pass-preview-bar, #seasonPassModal .season-pass-track-line, #seasonPassModal .season-pass-track-line--premium`	Season Pass modal	n/a	0
`#seasonPassModal .season-pass-bar-fill, #seasonPassModal .season-pass-preview-fill, #seasonPassModal .season-pass-track-fill`	Season Pass modal	n/a	0
`#seasonQuestModal .modal-content, #seasonQuestModal .season-pass-modal-content, #seasonQuestModal .season-quest-scroll, #seasonQuestModal .season-quest-info, #seasonQuestModal .season-pass-quest`	Quests modal	comic	5
`#inboxModal .inbox-modal-content, #inboxModal .inbox-toolbar, #inboxModal .inbox-list-panel, #inboxModal .inbox-detail-panel`	Inbox modal	n/a	0
`#researchModal .modal-content, .research-modal-content`	Research modal	n/a	0
`#bountyBoardModal, #bountyBoardModal .modal-content, #bountyBoardModal .bounty-board-left, #bountyBoardModal .bounty-board-center, #bountyBoardModal .bounty-board-right`	Bounty Board + Market	n/a	0

Validation Checklist

Change one token, verify in the exact listed screen.
If visual stays unchanged, check whether a selector rule overrides that token.
Keep advanced variable names stable across your own theme versions.
For major overhauls, group advancedCss.rules by module: Main Menu, Research, Bounty, Season Pass, Inbox, Account.

cssRules Reference

Selector-level control and safety patterns.

Advanced Modification

Step-by-step premium look implementation.