@orion-ds/core 1.0.0 → 1.0.4

package/dist/theme.css

@@ -221,9 +221,13 @@
     --size-calendar-time-col: 80px;
 
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
+
+    /* Minimal shadows for Product mode (ultra-flat) */
+    --shadow-flat: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
+    --shadow-none: none;
 
     /* ─── Transitions ─── */
     --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -280,6 +284,30 @@
     --status-error-bg: rgba(239, 68, 68, 0.1);
     --status-success-bg: rgba(34, 197, 94, 0.1);
 
+    /* ─── Section Shadows (for card hover effects) ─── */
+    --shadow-card-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
+    --shadow-card-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --shadow-card-elevated: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
+
+    /* ─── Overlay Colors (for dark overlays on images) ─── */
+    --overlay-dark: rgba(0, 0, 0, 0.5);
+    --overlay-dark-heavy: rgba(0, 0, 0, 0.7);
+    --overlay-dark-light: rgba(0, 0, 0, 0.3);
+
+    /* ─── Overlay Colors (for light overlays on dark backgrounds) ─── */
+    --overlay-light: rgba(255, 255, 255, 0.2);
+    --overlay-light-subtle: rgba(255, 255, 255, 0.1);
+    --overlay-light-strong: rgba(255, 255, 255, 0.3);
+
+    /* ─── Text on Dark Backgrounds ─── */
+    --text-on-dark: #ffffff;
+    --text-on-dark-primary: rgba(255, 255, 255, 0.9);
+    --text-on-dark-secondary: rgba(255, 255, 255, 0.7);
+    --text-on-dark-tertiary: rgba(255, 255, 255, 0.5);
+
+    /* ─── Text on Brand Backgrounds ─── */
+    --text-on-brand: #ffffff;
+
     /* ─── Soft State Colors (10-20% opacity for backgrounds) ─── */
     --color-brand-soft: color-mix(in srgb, var(--color-brand-500) 10%, transparent);
     --color-brand-soft-hover: color-mix(in srgb, var(--color-brand-500) 20%, transparent);
@@ -349,6 +377,30 @@
     --status-error-bg: rgba(239, 68, 68, 0.15);
     --status-success-bg: rgba(34, 197, 94, 0.15);
 
+    /* ─── Section Shadows (for card hover effects) ─── */
+    --shadow-card-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.3);
+    --shadow-card-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
+    --shadow-card-elevated: 0 8px 16px -4px rgba(0, 0, 0, 0.25);
+
+    /* ─── Overlay Colors (for dark overlays on images) ─── */
+    --overlay-dark: rgba(0, 0, 0, 0.6);
+    --overlay-dark-heavy: rgba(0, 0, 0, 0.8);
+    --overlay-dark-light: rgba(0, 0, 0, 0.4);
+
+    /* ─── Overlay Colors (for light overlays on dark backgrounds) ─── */
+    --overlay-light: rgba(255, 255, 255, 0.15);
+    --overlay-light-subtle: rgba(255, 255, 255, 0.08);
+    --overlay-light-strong: rgba(255, 255, 255, 0.25);
+
+    /* ─── Text on Dark Backgrounds ─── */
+    --text-on-dark: #ffffff;
+    --text-on-dark-primary: rgba(255, 255, 255, 0.95);
+    --text-on-dark-secondary: rgba(255, 255, 255, 0.8);
+    --text-on-dark-tertiary: rgba(255, 255, 255, 0.6);
+
+    /* ─── Text on Brand Backgrounds ─── */
+    --text-on-brand: #ffffff;
+
     /* ─── Soft State Colors (10-20% opacity for backgrounds) ─── */
     --color-brand-soft: color-mix(in srgb, var(--color-brand-500) 15%, transparent);
     --color-brand-soft-hover: color-mix(in srgb, var(--color-brand-500) 25%, transparent);
@@ -688,6 +740,15 @@
     --mode-effect-glass: blur(12px);
     --mode-effect-shadow: var(--shadow-xl);
     --mode-visual-style: "atmospheric";
+
+    /* Visual System (NEW): Shadows & Interactions */
+    --mode-shadow-default: var(--shadow-md);
+    --mode-shadow-hover: var(--shadow-lg);
+    --mode-shadow-active: var(--shadow-md);
+    --mode-hover-lift: -4px;
+    --mode-hover-duration: 250ms;
+    --mode-glass-enabled: 1;
+    --mode-blur-amount: var(--blur-lg);
 }
 
 /* ─── Product Mode: SaaS & Dashboards ─── */
@@ -713,6 +774,15 @@
     --mode-effect-glass: none;
     --mode-effect-shadow: var(--shadow-sm);
     --mode-visual-style: "functional";
+
+    /* Visual System (NEW): Ultra-flat (Linear/Figma style) */
+    --mode-shadow-default: var(--shadow-flat);
+    --mode-shadow-hover: var(--shadow-sm);
+    --mode-shadow-active: none;
+    --mode-hover-lift: 0px;                       /* NO lift in Product mode */
+    --mode-hover-duration: 150ms;
+    --mode-glass-enabled: 0;                      /* NO glassmorphism */
+    --mode-blur-amount: 0px;
 }
 
 /* ─── App Mode: Touch-First Mobile Interfaces ─── */
@@ -745,6 +815,15 @@
     --mode-safe-area-bottom: env(safe-area-inset-bottom, 0);
     --mode-safe-area-left: env(safe-area-inset-left, 0);
     --mode-safe-area-right: env(safe-area-inset-right, 0);
+
+    /* Visual System (NEW): Native elevation (Material 3) */
+    --mode-shadow-default: var(--shadow-md);
+    --mode-shadow-hover: var(--shadow-lg);
+    --mode-shadow-active: var(--shadow-sm);
+    --mode-hover-lift: -2px;
+    --mode-hover-duration: 200ms;
+    --mode-glass-enabled: 0;                      /* NO glassmorphism */
+    --mode-blur-amount: 0px;
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -927,12 +1006,14 @@ body {
 }
 
 .btn:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
+    transform: translateY(var(--mode-hover-lift, -2px));
+    box-shadow: var(--mode-shadow-hover, var(--shadow-md));
+    transition-duration: var(--mode-hover-duration, 150ms);
 }
 
 .btn:active:not(:disabled) {
-    transform: translateY(0);
+    transform: scale(0.98) translateY(0);
+    box-shadow: var(--mode-shadow-active, none);
     transition-duration: 100ms;
 }
 
@@ -1015,6 +1096,69 @@ body {
     margin-left: calc(var(--spacing-1) * -1);
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   MODE-AWARE BUTTON SIZING
+   Proportional scaling: Each mode has its own size hierarchy (sm/md/lg)
+   respecting the tri-modal philosophy (Display=spatial, Product=compact, App=tactile)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Display Mode: Atmospheric (spacious) ─── */
+[data-mode="display"] .btn-sm {
+    font-size: var(--font-size-14);
+    padding: var(--spacing-3) var(--spacing-6);
+    min-height: 40px;
+}
+
+[data-mode="display"] .btn:not(.btn-sm):not(.btn-lg) {
+    font-size: var(--font-size-18);
+    padding: var(--spacing-4) var(--spacing-8);
+    min-height: 56px;
+}
+
+[data-mode="display"] .btn-lg {
+    font-size: var(--font-size-20);
+    padding: var(--spacing-5) var(--spacing-10);
+    min-height: 64px;
+}
+
+/* ─── Product Mode: Geometric Precision (compact) ─── */
+[data-mode="product"] .btn-sm {
+    font-size: var(--font-size-12);
+    padding: var(--spacing-1) var(--spacing-3);
+    min-height: 28px;
+}
+
+[data-mode="product"] .btn:not(.btn-sm):not(.btn-lg) {
+    font-size: var(--font-size-14);
+    padding: var(--spacing-2) var(--spacing-4);
+    min-height: 32px;
+}
+
+[data-mode="product"] .btn-lg {
+    font-size: var(--font-size-16);
+    padding: var(--spacing-2) var(--spacing-5);
+    min-height: 36px;
+}
+
+/* ─── App Mode: Tactile (touch-friendly) ─── */
+[data-mode="app"] .btn-sm {
+    font-size: var(--font-size-14);
+    padding: var(--spacing-2) var(--spacing-5);
+    min-height: 40px;
+}
+
+[data-mode="app"] .btn:not(.btn-sm):not(.btn-lg) {
+    font-size: var(--font-size-16);
+    padding: var(--spacing-3) var(--spacing-6);
+    min-height: 44px;
+}
+
+[data-mode="app"] .btn-lg {
+    font-size: var(--font-size-18);
+    padding: var(--spacing-4) var(--spacing-6);
+    min-height: 48px;
+}
+
 .btn .icon:last-child {
     margin-right: calc(var(--spacing-1) * -1);
 }
@@ -1294,20 +1438,40 @@ body {
     display: flex;
     flex-direction: column;
     width: var(--size-sidebar-width, 280px);
-    background: var(--surface-glass);
-    backdrop-filter: blur(var(--blur-lg));
-    -webkit-backdrop-filter: blur(var(--blur-lg));
+    background: var(--surface-sunken);
+    border: 1px solid var(--border-subtle);
     padding: var(--spacing-5);
     overflow-y: auto;
 }
 
+/* Glass effect ONLY in Display mode */
+[data-mode="display"] .sidebar {
+    background: var(--surface-glass);
+    backdrop-filter: blur(var(--mode-blur-amount, var(--blur-lg)));
+    -webkit-backdrop-filter: blur(var(--mode-blur-amount, var(--blur-lg)));
+}
+
+/* Product mode: solid background */
+[data-mode="product"] .sidebar {
+    background: var(--surface-subtle);
+    border-right: 1px solid var(--border-subtle);
+}
+
+/* App mode: no borders */
+[data-mode="app"] .sidebar {
+    border: none;
+}
+
 /* Variant: Floating (Card Style) */
 .sidebar-floating {
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-control);
-    box-shadow: var(--shadow-md);
-    /* Glass effect inherited from .sidebar base */
-    /* Remove default margin/positioning - controlled by parent context */
+    box-shadow: var(--mode-shadow-default, var(--shadow-md));
+}
+
+/* Product mode floating */
+[data-mode="product"] .sidebar-floating {
+    box-shadow: var(--shadow-flat);
 }
 
 /* Variant: Classic (Edge-to-Edge) */
@@ -1369,7 +1533,7 @@ body {
    COMPONENT BLUEPRINTS — Navigation (Header)
    ═══════════════════════════════════════════════════════════════════════════ */
 
-/* Base Navbar */
+/* Base Navbar - Mode-aware */
 .navbar {
     position: fixed;
     top: 0;
@@ -1381,12 +1545,30 @@ body {
     justify-content: space-between;
     height: 64px;
     padding: 0 var(--spacing-6);
-    background: var(--surface-glass);
-    backdrop-filter: blur(var(--blur-lg));
-    -webkit-backdrop-filter: blur(var(--blur-lg));
+    background: var(--surface-base);
+    border-bottom: 1px solid var(--border-subtle);
     transition: all var(--transition-normal);
 }
 
+/* Glass effect ONLY in Display mode */
+[data-mode="display"] .navbar {
+    background: var(--surface-glass);
+    backdrop-filter: blur(var(--mode-blur-amount, var(--blur-lg)));
+    -webkit-backdrop-filter: blur(var(--mode-blur-amount, var(--blur-lg)));
+}
+
+/* Product mode: solid background */
+[data-mode="product"] .navbar {
+    background: var(--surface-base);
+    border-bottom-color: var(--border-subtle);
+}
+
+/* App mode: no borders */
+[data-mode="app"] .navbar {
+    border-bottom: none;
+    background: var(--surface-base);
+}
+
 /* Variant: Classic (Edge-to-Edge) */
 .navbar-classic {
     width: 100%;
@@ -1402,7 +1584,12 @@ body {
     width: auto;
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-container);
-    box-shadow: var(--shadow-sm);
+    box-shadow: var(--mode-shadow-default, var(--shadow-sm));
+}
+
+/* Product mode floating */
+[data-mode="product"] .navbar-floating {
+    box-shadow: var(--shadow-flat);
 }
 
 /* Navbar Elements */
@@ -1665,6 +1852,54 @@ a.navbar-link:focus:not(:focus-visible) {
     border-radius: var(--radius-full);
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   BRAND VISUAL DIFFERENTIATION — Unitec vs Laureate
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Unitec: Bold & Energetic personality */
+[data-brand="unitec"] .btn,
+[data-brand="unitec"] .card {
+    border-width: 2px;
+    /* More prominent borders */
+}
+
+[data-brand="unitec"] .card-interactive:hover {
+    box-shadow: 0 12px 20px -4px rgba(246, 139, 31, 0.3);
+    /* Orange-tinted shadow */
+}
+
+[data-brand="unitec"] .btn:hover:not(:disabled) {
+    box-shadow: 0 8px 12px -2px rgba(246, 139, 31, 0.25);
+}
+
+/* Laureate: Refined & Professional personality */
+[data-brand="laureate"] .btn,
+[data-brand="laureate"] .card {
+    border-width: 1px;
+    /* Subtle borders */
+}
+
+[data-brand="laureate"] .card-interactive:hover {
+    box-shadow: 0 8px 16px -4px rgba(241, 93, 34, 0.2);
+    /* Red-orange tinted shadow, more subtle */
+}
+
+[data-brand="laureate"] .btn:hover:not(:disabled) {
+    box-shadow: 0 6px 10px -2px rgba(241, 93, 34, 0.2);
+    transition-duration: 300ms;
+    /* Slower, more deliberate interaction */
+}
+
+[data-brand="laureate"] .btn:active:not(:disabled) {
+    transition-duration: 150ms;
+    /* Slightly slower press response */
+}
+
+/* Laureate refined modal appearance */
+[data-brand="laureate"] .modal {
+    box-shadow: 0 16px 24px -4px rgba(241, 93, 34, 0.15);
+}
+
 .sidebar-item.is-active .sidebar-item-icon {
     opacity: 1;
 }
@@ -1687,6 +1922,7 @@ a.navbar-link:focus:not(:focus-visible) {
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-container);
     padding: var(--spacing-6);
+    box-shadow: var(--mode-shadow-default, var(--shadow-sm));
     transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -1695,31 +1931,51 @@ a.navbar-link:focus:not(:focus-visible) {
 }
 
 .card-interactive:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
+    transform: translateY(var(--mode-hover-lift, -2px));
+    box-shadow: var(--mode-shadow-hover, var(--shadow-lg));
     border-color: var(--border-strong);
+    transition-duration: var(--mode-hover-duration, 250ms);
 }
 
 .card-interactive:active {
-    transform: translateY(0);
+    transform: scale(0.98) translateY(0);
+    box-shadow: var(--mode-shadow-active, none);
     transition-duration: 100ms;
 }
 
+/* Glass card - Only enabled in Display mode */
 .card-glass {
-    background: var(--surface-glass);
-    backdrop-filter: blur(var(--blur-lg));
-    -webkit-backdrop-filter: blur(var(--blur-lg));
+    background: var(--surface-base);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-container);
     padding: var(--spacing-6);
+    box-shadow: var(--mode-shadow-default, var(--shadow-sm));
     transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* Glass effect ONLY in Display mode */
+[data-mode="display"] .card-glass {
+    background: var(--surface-glass);
+    backdrop-filter: blur(var(--mode-blur-amount, var(--blur-lg)));
+    -webkit-backdrop-filter: blur(var(--mode-blur-amount, var(--blur-lg)));
+}
+
 .card-glass.card-interactive:hover {
-    backdrop-filter: blur(var(--blur-xl));
-    -webkit-backdrop-filter: blur(var(--blur-xl));
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-xl);
+    transform: translateY(var(--mode-hover-lift, -2px));
+    box-shadow: var(--mode-shadow-hover, var(--shadow-lg));
+    transition-duration: var(--mode-hover-duration, 250ms);
+}
+
+/* Product mode: solid background */
+[data-mode="product"] .card-glass {
+    background: var(--surface-subtle);
+    box-shadow: var(--shadow-flat);
+}
+
+/* App mode: no borders */
+[data-mode="app"] .card-glass {
+    border: none;
+    box-shadow: var(--shadow-md);
 }
 
 
@@ -2698,7 +2954,7 @@ a.navbar-link:focus:not(:focus-visible) {
     -webkit-backdrop-filter: blur(var(--blur-lg));
 }
 
-/* Modal */
+/* Modal - Mode-aware backdrop blur */
 .modal-backdrop {
     position: fixed;
     top: 0;
@@ -2710,11 +2966,18 @@ a.navbar-link:focus:not(:focus-visible) {
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(4px);
+    backdrop-filter: blur(var(--mode-blur-amount, 4px));
+    -webkit-backdrop-filter: blur(var(--mode-blur-amount, 4px));
     padding: var(--spacing-4);
     animation: fadeIn 200ms ease;
 }
 
+/* Product mode: no backdrop blur */
+[data-mode="product"] .modal-backdrop {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
@@ -2929,14 +3192,14 @@ a.navbar-link:focus:not(:focus-visible) {
     font-size: var(--font-size-48);
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-tight);
-    color: white;
+    color: var(--text-inverse);
     margin: 0;
 }
 
 .card-visual-text {
     font-size: var(--font-size-16);
     line-height: var(--line-height-normal);
-    color: rgba(255, 255, 255, 0.9);
+    color: color-mix(in srgb, var(--text-inverse) 90%, transparent);
     margin: 0;
 }
 
@@ -3231,29 +3494,38 @@ a.navbar-link:focus:not(:focus-visible) {
     border-width: 4px;
 }
 
-/* Skeleton */
+/* ═ Skeleton Loading Framework (Mode-aware) */
 .skeleton {
-    background: linear-gradient(90deg,
-            var(--surface-layer) 25%,
-            var(--surface-subtle) 50%,
-            var(--surface-layer) 75%);
-    background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    border-radius: var(--radius-control);
+    background: var(--surface-layer);
+    border-radius: var(--radius-sm);
+    position: relative;
+    overflow: hidden;
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
 }
 
-@keyframes shimmer {
-    0% {
-        background-position: 200% 0;
-    }
+@keyframes skeleton-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
 
-    100% {
-        background-position: -200% 0;
-    }
+/* Shimmer effect (Display mode only - high polish) */
+[data-mode="display"] .skeleton::after {
+    content: "";
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
+    animation: skeleton-shimmer 1.5s infinite;
 }
 
+@keyframes skeleton-shimmer {
+    100% { transform: translateX(100%); }
+}
+
+/* Variants - Text */
 .skeleton-text {
     height: 1em;
+    width: 100%;
     margin-bottom: var(--spacing-2);
 }
 
@@ -3261,25 +3533,32 @@ a.navbar-link:focus:not(:focus-visible) {
     width: 60%;
 }
 
+/* Variants - Title */
 .skeleton-title {
-    height: 1.5em;
-    width: 40%;
+    height: 2em;
+    width: 60%;
     margin-bottom: var(--spacing-3);
 }
 
+/* Variants - Avatar */
 .skeleton-avatar {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
     border-radius: var(--radius-full);
 }
 
+/* Variants - Button */
 .skeleton-button {
     height: 40px;
-    width: 100px;
+    width: 120px;
+    border-radius: var(--radius-control);
 }
 
+/* Variants - Card */
 .skeleton-card {
     height: 200px;
+    width: 100%;
+    border-radius: var(--radius-container);
 }
 
 
@@ -3287,6 +3566,53 @@ a.navbar-link:focus:not(:focus-visible) {
    DATA DISPLAY — Table, Empty State
    ═══════════════════════════════════════════════════════════════════════════ */
 
+/* ─── Empty State Framework ─── */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--spacing-32);
+    gap: var(--spacing-6);
+    min-height: 300px;
+}
+
+.empty-state-icon {
+    width: 80px;
+    height: 80px;
+    color: var(--text-tertiary);
+    opacity: 0.6;
+}
+
+[data-mode="product"] .empty-state-icon {
+    width: 64px;
+    height: 64px;
+}
+
+.empty-state-title {
+    font-size: var(--font-size-24);
+    font-weight: var(--font-weight-bold);
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.empty-state-description {
+    font-size: var(--font-size-16);
+    color: var(--text-secondary);
+    max-width: 400px;
+    margin: 0;
+    line-height: var(--line-height-relaxed);
+}
+
+.empty-state-actions {
+    display: flex;
+    gap: var(--spacing-3);
+    margin-top: var(--spacing-4);
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
 /* Table */
 .table-wrapper {
     overflow-x: auto;
@@ -5282,9 +5608,12 @@ a.navbar-link:focus:not(:focus-visible) {
     box-shadow: 0 0 0 4px var(--color-brand-soft-hover);
 }
 
-/* Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
+/* ═══════════════════════════════════════════════════════════════════════════
+   ACCESSIBILITY — Reduced Motion Preferences
+   ═══════════════════════════════════════════════════════════════════════════ */
 
+@media (prefers-reduced-motion: reduce) {
+    /* Disable ALL animations and transitions */
     *,
     *::before,
     *::after {
@@ -5293,6 +5622,30 @@ a.navbar-link:focus:not(:focus-visible) {
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
+
+    /* Remove ALL transform-based interactions */
+    .btn:hover:not(:disabled),
+    .btn:active:not(:disabled),
+    .card-interactive:hover,
+    .card-interactive:active,
+    .card-visual:hover,
+    .card-glass.card-interactive:hover {
+        transform: none !important;
+    }
+
+    /* Keep blur effects (not motion-inducing) */
+    [data-mode="display"] .sidebar,
+    [data-mode="display"] .navbar,
+    [data-mode="display"] .card-glass,
+    [data-mode="display"] .modal-backdrop {
+        backdrop-filter: blur(var(--mode-blur-amount, var(--blur-lg))) !important;
+        -webkit-backdrop-filter: blur(var(--mode-blur-amount, var(--blur-lg))) !important;
+    }
+
+    /* Reduce skeleton pulse to just opacity change (no motion) */
+    .skeleton {
+        animation: skeleton-pulse 1.5s ease-in-out infinite !important;
+    }
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -5336,24 +5689,8 @@ a.navbar-link:focus:not(:focus-visible) {
     min-height: var(--mode-touch-target, 40px);
 }
 
-/* Mode-aware Buttons */
-[data-mode="display"] .btn {
-    font-size: var(--font-size-18);
-    padding: var(--spacing-4) var(--spacing-8);
-    min-height: 56px;
-}
-
-[data-mode="product"] .btn {
-    font-size: var(--font-size-14);
-    padding: var(--spacing-2) var(--spacing-4);
-    min-height: 32px;
-}
-
-[data-mode="app"] .btn {
-    font-size: var(--font-size-16);
-    padding: var(--spacing-3) var(--spacing-6);
-    min-height: 44px;
-}
+/* Mode-aware Buttons - Removed */
+/* (Replaced with proportional scaling system below) */
 
 /* Mode-aware Cards */
 [data-mode="display"] .card {
@@ -6336,6 +6673,25 @@ a.navbar-link:focus:not(:focus-visible) {
     display: inline-block;
 }
 
+/* Brand-aware gradient text (mode & brand aware) */
+.gradient-text-brand {
+    background: linear-gradient(135deg, var(--color-brand-400), var(--color-brand-600));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    display: inline-block;
+}
+
+/* Display mode: more dramatic */
+[data-mode="display"] .gradient-text-brand {
+    background: linear-gradient(135deg, var(--color-brand-300), var(--color-brand-700));
+}
+
+/* Product mode: more subtle */
+[data-mode="product"] .gradient-text-brand {
+    background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-600));
+}
+
 
 /* ─── Section Header ─── */
 .section-header {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-ds/core",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "Orion Design System - Core tokens and utilities",
   "author": "Orion Design System Team",
   "main": "dist/index.js",