feat(design-system): add elevation, border, and focus-ring tokens

[dev-susa]

Summary

Implements DS-009: Add elevation, border, and focus-ring tokens (#396)

Defines consistent separators, interactive borders, overlay shadows, and keyboard focus treatments that work seamlessly across all surfaces and themes (light/dark).

Changes

• ✅ Defined border role tokens: default, hover, active, strong
• ✅ Added shadow elevation scale: xs, sm, md, lg, xl
• ✅ Defined focus ring tokens for keyboard navigation
• ✅ Used oklch color-mix for theme-adaptive border states
• ✅ Documented intended usage for each token role
• ✅ All tokens work consistently in both light and dark themes

Border Roles

• default: Subtle separators and card outlines
• hover: Interactive element borders on hover
• active: Active/pressed state borders
• strong: Emphasized borders for important divisions

Shadow Elevation Scale

• xs: Subtle lift for inputs and small controls
• sm: Small elevated panels and dropdowns
• md: Medium floating panels and popovers
• lg: Large modals and dialogs
• xl: Maximum elevation for overlays

Focus Ring Tokens

• ring-default: Standard keyboard focus indicator
• ring-offset: Space between element and focus ring (2px)

Implementation Details

• Border states use oklch(from var(--border) calc(l * factor) c h) for dynamic adaptation
• Shadows use oklch with alpha transparency for theme compatibility
• Focus rings maintain WCAG visible-focus guidance on all core surfaces

Testing

• ✅ Skeleton component tests pass
• ✅ Build succeeds without errors
• ✅ CSS tokens properly defined in Tailwind v4 @theme block

Acceptance Criteria

• Default, hover, active, and strong border roles exist
• Overlay and floating-panel shadows work in both themes
• Focus rings meet visible-focus guidance on all core surfaces
• Tokens are documented with intended usage

Closes #396

[vercel]

@dev-susa is attempting to deploy a commit to the Ijai's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@dev-susa Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits