How to override root and theme variable in tailwind v4

[ktx-riddhi]

:root {
--swiper-theme-color: #23516b;
}
.satvaTherapy {
--swiper-theme-color: #849f43;
}

[ktx-riddhi]

Here is a example
https://play.tailwindcss.com/fJgXi1d9eL?size=1174x682&file=css

[wongjn]

Use @theme inline: https://play.tailwindcss.com/JPUuYSzvec?size=1174x682&file=css

-@theme {
+@theme inline {
  --color-theme-primary-50: rgba(var(--theme-color-primary-50), 1);
  --color-theme-primary-100: rgba(var(--theme-color-primary-100), 1);