Add premium polish: layered shadows, frosted glass, and micro-interactions

Phase 2 - Premium polish refinements:
- Enhance shadow tokens with multi-layer depth (sm, md, lg, xl)
- Add inner shadow token for tactile input depth
- Add accent-tinted shadow tokens for primary elements
- Add frosted glass backdrop-filter effect to modal overlay
- Add hover lift effect to primary buttons with accent glow
- Add spring easing for interactive card press states
- Enhance input focus with glow effect (ring + outer glow)
- Add premium polish utility classes (oc-frosted, oc-lift, oc-press)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: JSv4

src/Button/Button.styles.ts

@@ -43,16 +43,20 @@ export const buttonStyles = `
 .oc-button--primary {
   background: linear-gradient(135deg, var(--oc-accent, #E85A4F) 0%, var(--oc-accent-hover, #D64A3F) 100%);
   color: white;
-  box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
+  box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03)),
+              var(--oc-shadow-accent, 0 2px 8px rgba(232, 90, 79, 0.15), 0 4px 16px rgba(232, 90, 79, 0.1));
 }
 
 .oc-button--primary:hover:not(:disabled):not(.oc-button--loading) {
   background: linear-gradient(135deg, var(--oc-accent-hover, #D64A3F) 0%, var(--oc-accent-active, #C43A2F) 100%);
-  box-shadow: var(--oc-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--oc-shadow-md, 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.03)),
+              var(--oc-shadow-accent-lg, 0 4px 12px rgba(232, 90, 79, 0.2), 0 8px 24px rgba(232, 90, 79, 0.15));
+  transform: translateY(-1px);
 }
 
 .oc-button--primary:active:not(:disabled):not(.oc-button--loading) {
   transform: translateY(1px);
+  box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03));
 }
 
 /* Secondary variant */

src/Card/Card.styles.ts

@@ -8,7 +8,7 @@ export const cardStyles = `
 
 /* Variants */
 .oc-card--elevated {
-  box-shadow: var(--oc-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--oc-shadow-md, 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.03));
 }
 
 .oc-card--flat {
@@ -40,15 +40,18 @@ export const cardStyles = `
 /* Interactive */
 .oc-card--interactive {
   cursor: pointer;
-  transition: box-shadow 0.15s ease, transform 0.15s ease;
+  transition: box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
+              transform var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .oc-card--interactive:hover {
-  box-shadow: var(--oc-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--oc-shadow-lg, 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04));
+  transform: translateY(-2px);
 }
 
 .oc-card--interactive:active {
-  transform: scale(0.995);
+  transform: translateY(0) scale(0.995);
+  transition-timing-function: var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
 }
 
 /* Card Header */

src/Input/Input.styles.ts

@@ -24,14 +24,17 @@ export const inputStyles = `
   background: var(--oc-bg-canvas, #FFFFFF);
   border: 1px solid var(--oc-border-default, #E5E5E5);
   border-radius: var(--oc-radius-md, 8px);
+  box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(0, 0, 0, 0.04));
   transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
               box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
   overflow: hidden;
 }
 
 .oc-input-container:focus-within {
   border-color: var(--oc-accent, #E85A4F);
-  box-shadow: 0 0 0 3px rgba(232, 90, 79, 0.1);
+  box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(0, 0, 0, 0.04)),
+              0 0 0 3px rgba(232, 90, 79, 0.1),
+              0 0 12px rgba(232, 90, 79, 0.08);
 }
 
 .oc-input-container--error {

src/Modal/Modal.styles.ts

@@ -3,7 +3,9 @@ export const modalStyles = `
 .oc-modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, var(--oc-opacity-overlay, 0.5));
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,7 +18,7 @@ export const modalStyles = `
 .oc-modal {
   background: var(--oc-bg-canvas, #FFFFFF);
   border-radius: var(--oc-radius-lg, 12px);
-  box-shadow: var(--oc-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.05)), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--oc-shadow-xl, 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.05));
   max-height: calc(100vh - 32px);
   display: flex;
   flex-direction: column;

src/SearchInput/SearchInput.styles.ts

@@ -26,7 +26,9 @@ export const searchInputStyles = `
 
 .oc-search-input-container--focused {
   border-color: var(--oc-accent, #E85A4F);
-  box-shadow: 0 0 0 3px rgba(232, 90, 79, 0.1);
+  box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(0, 0, 0, 0.04)),
+              0 0 0 3px rgba(232, 90, 79, 0.1),
+              0 0 12px rgba(232, 90, 79, 0.08);
 }
 
 /* Search icon */

src/tokens.ts

@@ -47,6 +47,10 @@ export interface ShadowScale {
   sm: string;
   md: string;
   lg: string;
+  xl: string;
+  inner: string;
+  accent: string;
+  accentLg: string;
 }
 
 export interface FontSizeScale {
@@ -150,9 +154,16 @@ export const tokens: Tokens = {
     full: '9999px',
   },
   shadows: {
-    sm: '0 1px 2px rgba(0, 0, 0, 0.04)',
-    md: '0 2px 8px rgba(0, 0, 0, 0.05)',
-    lg: '0 4px 16px rgba(0, 0, 0, 0.05)',
+    // Layered shadows for realistic depth
+    sm: '0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03)',
+    md: '0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.03)',
+    lg: '0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04)',
+    xl: '0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.05)',
+    // Inner shadow for depth in inputs
+    inner: 'inset 0 1px 2px rgba(0, 0, 0, 0.04)',
+    // Accent-tinted shadows for primary elements
+    accent: '0 2px 8px rgba(232, 90, 79, 0.15), 0 4px 16px rgba(232, 90, 79, 0.1)',
+    accentLg: '0 4px 12px rgba(232, 90, 79, 0.2), 0 8px 24px rgba(232, 90, 79, 0.15)',
   },
   fontSizes: {
     xs: '12px',

src/utilities.styles.ts

@@ -47,6 +47,15 @@ export const utilitiesStyles = `
   --oc-breakpoint-md: 768px;
   --oc-breakpoint-lg: 1024px;
   --oc-breakpoint-xl: 1280px;
+
+  /* Enhanced layered shadows */
+  --oc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
+  --oc-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.03);
+  --oc-shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04);
+  --oc-shadow-xl: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.05);
+  --oc-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.04);
+  --oc-shadow-accent: 0 2px 8px rgba(232, 90, 79, 0.15), 0 4px 16px rgba(232, 90, 79, 0.1);
+  --oc-shadow-accent-lg: 0 4px 12px rgba(232, 90, 79, 0.2), 0 8px 24px rgba(232, 90, 79, 0.15);
 }
 
 /* ============================================
@@ -259,4 +268,48 @@ export const utilitiesStyles = `
   white-space: nowrap;
   border-width: 0;
 }
+
+/* ============================================
+   Premium Polish Effects
+   ============================================ */
+
+/* Frosted glass overlay effect */
+.oc-frosted {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.oc-frosted-light {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* Interactive lift effect on hover */
+.oc-lift {
+  transition: transform var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
+              box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.oc-lift:hover {
+  transform: translateY(-2px);
+}
+
+/* Press effect */
+.oc-press:active {
+  transform: translateY(1px);
+}
+
+/* Focus glow effect for inputs */
+.oc-focus-glow-input:focus-within {
+  box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(0, 0, 0, 0.04)),
+              0 0 0 3px rgba(232, 90, 79, 0.1),
+              0 0 12px rgba(232, 90, 79, 0.08);
+}
+
+/* Smooth color transitions */
+.oc-color-transition {
+  transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
+              background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
+              border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
 `;