sk-tokens-neomorphism

To enforce Neomorphism design tokens, replace hardcoded colors and default Tailwind shadows with kit-approved CSS variables and semantic aliases like bg-background and neo-outset. This maintains UI consistency and prevents theme drift across components.

Neomorphism components break across dark and midnight themes when using hardcoded hex or rgb literals instead of semantic classes. To ensure multi-theme safety, apply semantic bg/text/ring aliases tied to globals.css rather than default Tailwind shadcn overrides.

To style elevated surfaces and recessed inputs without borders, use the provided neo-* elevation utilities to define edges with shadows. Apply neo-outset for cards, neo-inset for inputs, and neo-interactive for buttons based on component role.

You cannot use default Tailwind shadow-md or shadow-lg utilities for Neomorphism styling. The system prohibits default shadow tokens and border-based separation, requiring --neo-* CSS variables and utilities instead to ensure correct outset, inset, float, and pressed shadow tiers.

To convert hardcoded CSS colors to semantic design tokens, map your hex and rgb literals to the kit-approved semantic aliases defined in src/app/globals.css. Use bg-background, text-foreground, and neo-* utilities to ensure correct light, dark, and midnight theme rendering.

Use neo-interactive utilities for interactive buttons and active states, and neo-inset for recessed inputs and pressed elements. These neo-* elevation utilities replace default Tailwind shadows and borders to define correct Neomorphism edges based on component role.