:root {
    /* Premium Shadow Tokens */
    --ctt-shadow-premium-sm: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    --ctt-shadow-premium-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
    --ctt-shadow-premium-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);

    /* Glassmorphism Base Tokens */
    --ctt-glass-blur-sm: 4px;
    --ctt-glass-blur-md: 8px;
    --ctt-glass-blur-lg: 16px;
    --ctt-glass-bg-light: rgba(255, 255, 255, 0.7);
    --ctt-glass-bg-dark: rgba(0, 0, 0, 0.6);
    --ctt-glass-border-light: rgba(255, 255, 255, 0.2);
    --ctt-glass-border-dark: rgba(255, 255, 255, 0.1);
}

/* 
 * Premium Utility Classes
 * Use these to elevate the aesthetic of components
 */

/* Multi-layer smooth shadows */
.ctt-shadow-premium-sm {
    box-shadow: var(--ctt-shadow-premium-sm);
}

.ctt-shadow-premium-md {
    box-shadow: var(--ctt-shadow-premium-md);
}

.ctt-shadow-premium-lg {
    box-shadow: var(--ctt-shadow-premium-lg);
}

/* Glassmorphism effects */
.ctt-glass {
    background: var(--ctt-glass-bg-light);
    backdrop-filter: blur(var(--ctt-glass-blur-md));
    -webkit-backdrop-filter: blur(var(--ctt-glass-blur-md));
    border: 1px solid var(--ctt-glass-border-light);
}

.ctt-glass-dark {
    background: var(--ctt-glass-bg-dark);
    backdrop-filter: blur(var(--ctt-glass-blur-md));
    -webkit-backdrop-filter: blur(var(--ctt-glass-blur-md));
    border: 1px solid var(--ctt-glass-border-dark);
    color: white;
}

.ctt-glass-thin {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(var(--ctt-glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--ctt-glass-blur-lg));
    border: 1px solid var(--ctt-glass-border-light);
}

/* Premium interactions */
.ctt-hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ctt-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--ctt-shadow-premium-md);
}