/* ==========================================================================
   Universal Design Engine — Surface Engine Stylesheet
   Auto-compiled from database token registry.
   ========================================================================== */

/* Surface: Flat (flat) */
.surface-flat {
    --surface-radius: 0px;
    --surface-border: 1px solid color-mix(in oklch, var(--foreground) 14%, transparent);
    --surface-shadow: none;
    --surface-hover-lift: none;
    --surface-hover-shadow: none;
    --surface-btn-radius: 0px;
    --surface-btn-shadow: none;
    --surface-badge-radius: 0px;
    --surface-transition: all 0.15s ease;
    border-top: 1px solid color-mix(in oklch, var(--foreground) 14%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--foreground) 14%, transparent);
}

.surface-flat > :is(section, div) {
    box-shadow: none !important;
    border-radius: 0 !important;
}

.surface-flat .s-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid color-mix(in oklch, var(--foreground) 14%, transparent);
}

.surface-flat .s-card:hover {
    border-color: var(--accent);
}

.surface-flat .s-btn {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.surface-flat .s-badge {
    border-radius: 0 !important;
    border: 1px solid color-mix(in oklch, var(--foreground) 20%, transparent);
}

/* Surface: Semi Drop (semi) */
.surface-semi {
    --surface-radius: 0.75rem;
    --surface-border: 1px solid color-mix(in oklch, var(--foreground) 8%, transparent);
    --surface-shadow: 0 10px 24px color-mix(in oklch, var(--primary) 14%, transparent);
    --surface-hover-lift: translateY(-4px);
    --surface-hover-shadow: 0 18px 36px color-mix(in oklch, var(--primary) 22%, transparent);
    --surface-btn-radius: 0.5rem;
    --surface-btn-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 20%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.25s ease;
}

.surface-semi > :is(section, div) {
    filter: drop-shadow(0 10px 24px color-mix(in oklch, var(--primary) 14%, transparent));
}

.surface-semi .s-card {
    border-radius: 0.75rem;
    box-shadow: 0 10px 24px color-mix(in oklch, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--foreground) 8%, transparent);
    transition: all 0.25s ease;
}

.surface-semi .s-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px color-mix(in oklch, var(--primary) 22%, transparent);
}

.surface-semi .s-btn {
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 20%, transparent);
}

.surface-semi .s-btn:hover {
    transform: translateY(-2px);
}

.surface-semi .s-badge {
    border-radius: 9999px;
}

/* Surface: Glassmorphism (glass) */
.surface-glass {
    --surface-radius: 1rem;
    --surface-border: 1px solid color-mix(in oklch, white 35%, transparent);
    --surface-shadow: 0 8px 32px 0 color-mix(in oklch, var(--primary) 12%, transparent), inset 0 1px 1px color-mix(in oklch, white 50%, transparent);
    --surface-hover-lift: translateY(-4px) scale(1.01);
    --surface-hover-shadow: 0 16px 40px 0 color-mix(in oklch, var(--accent) 25%, transparent), inset 0 1px 1px white;
    --surface-btn-radius: 9999px;
    --surface-btn-shadow: 0 4px 20px color-mix(in oklch, var(--accent) 30%, transparent), inset 0 1px 0 color-mix(in oklch, white 50%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 10%, transparent), color-mix(in oklch, var(--primary) 8%, transparent));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid color-mix(in oklch, white 35%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
}

.surface-glass .s-card {
    border-radius: 1rem;
    background: color-mix(in oklch, var(--card) 75%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in oklch, white 35%, transparent);
    box-shadow: 0 8px 32px 0 color-mix(in oklch, var(--primary) 10%, transparent), inset 0 1px 1px color-mix(in oklch, white 50%, transparent);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.surface-glass .s-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 40px 0 color-mix(in oklch, var(--accent) 25%, transparent), inset 0 1px 1px white;
    border-color: color-mix(in oklch, var(--accent) 60%, transparent);
}

.surface-glass .s-btn {
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px color-mix(in oklch, var(--accent) 30%, transparent), inset 0 1px 0 color-mix(in oklch, white 60%, transparent);
}

.surface-glass .s-btn:hover {
    transform: translateY(-2px);
}

.surface-glass .s-badge {
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: color-mix(in oklch, white 40%, transparent);
    border: 1px solid color-mix(in oklch, white 50%, transparent);
}

.dark .surface-glass .s-card {
    background: color-mix(in oklch, var(--card) 60%, transparent);
    border: 1px solid color-mix(in oklch, white 15%, transparent);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 1px 1px color-mix(in oklch, white 20%, transparent);
}

/* Surface: Claymorphism (clay) */
.surface-clay {
    --surface-radius: 1.75rem;
    --surface-border: 1px solid color-mix(in oklch, var(--foreground) 8%, transparent);
    --surface-shadow: 0 20px 40px -15px color-mix(in oklch, var(--primary) 30%, transparent), inset 0 2px 6px color-mix(in oklch, white 55%, transparent), inset 0 -3px 8px color-mix(in oklch, var(--primary) 12%, transparent);
    --surface-hover-lift: translateY(-5px) scale(1.01);
    --surface-hover-shadow: 0 28px 50px -12px color-mix(in oklch, var(--primary) 40%, transparent), inset 0 2px 6px color-mix(in oklch, white 70%, transparent), inset 0 -3px 8px color-mix(in oklch, var(--primary) 15%, transparent);
    --surface-btn-radius: 1.5rem;
    --surface-btn-shadow: 0 10px 20px -6px color-mix(in oklch, var(--primary) 35%, transparent), inset 0 2px 4px color-mix(in oklch, white 50%, transparent), inset 0 -2px 4px color-mix(in oklch, var(--primary) 20%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 1.25rem;
}

.surface-clay > :is(section, div) {
    border-radius: 1.75rem !important;
    overflow: hidden;
    box-shadow: 0 24px 48px -20px color-mix(in oklch, var(--primary) 35%, transparent), inset 0 2px 6px color-mix(in oklch, white 45%, transparent), inset 0 -3px 8px color-mix(in oklch, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--foreground) 8%, transparent);
}

.surface-clay .s-card {
    border-radius: 1.75rem !important;
    box-shadow: 0 20px 40px -15px color-mix(in oklch, var(--primary) 30%, transparent), inset 0 2px 6px color-mix(in oklch, white 55%, transparent), inset 0 -3px 8px color-mix(in oklch, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--foreground) 8%, transparent);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.surface-clay .s-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 28px 50px -12px color-mix(in oklch, var(--primary) 40%, transparent), inset 0 2px 6px color-mix(in oklch, white 70%, transparent), inset 0 -3px 8px color-mix(in oklch, var(--primary) 15%, transparent);
}

.surface-clay .s-btn {
    border-radius: 1.5rem !important;
    box-shadow: 0 10px 20px -6px color-mix(in oklch, var(--primary) 35%, transparent), inset 0 2px 4px color-mix(in oklch, white 50%, transparent), inset 0 -2px 4px color-mix(in oklch, var(--primary) 20%, transparent);
    transition: all 0.25s ease;
}

.surface-clay .s-btn:hover {
    transform: translateY(-2px);
}

.surface-clay .s-badge {
    border-radius: 9999px !important;
    box-shadow: inset 0 1px 3px color-mix(in oklch, white 60%, transparent), inset 0 -1px 2px color-mix(in oklch, var(--primary) 15%, transparent);
}

/* Surface: Neubrutalist (brutal) */
.surface-brutal {
    --surface-radius: 0px;
    --surface-border: 2.5px solid var(--foreground);
    --surface-shadow: 6px 6px 0 var(--accent);
    --surface-hover-lift: translate(-2px, -2px);
    --surface-hover-shadow: 8px 8px 0 var(--foreground);
    --surface-btn-radius: 0px;
    --surface-btn-shadow: 4px 4px 0 var(--foreground);
    --surface-badge-radius: 0px;
    --surface-transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
    padding: 1rem;
}

.surface-brutal > :is(section, div) {
    border: 2.5px solid var(--foreground) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--accent) !important;
    overflow: hidden;
}

.surface-brutal .s-card {
    border-radius: 0 !important;
    border: 2.5px solid var(--foreground) !important;
    box-shadow: 6px 6px 0 var(--accent) !important;
    transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
}

.surface-brutal .s-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--foreground) !important;
}

.surface-brutal .s-card:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--foreground) !important;
}

.surface-brutal .s-btn {
    border-radius: 0 !important;
    border: 2.5px solid var(--foreground) !important;
    box-shadow: 4px 4px 0 var(--foreground) !important;
    font-weight: 700;
    transition: all 0.15s ease;
}

.surface-brutal .s-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--foreground) !important;
}

.surface-brutal .s-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 transparent !important;
}

.surface-brutal .s-badge {
    border-radius: 0 !important;
    border: 2px solid var(--foreground) !important;
    box-shadow: 2px 2px 0 var(--foreground);
    font-weight: 800;
}

/* Surface: Aurora Dusk (aurora) */
.surface-aurora {
    --surface-radius: 0.85rem;
    --surface-border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
    --surface-shadow: 0 0 35px -8px color-mix(in oklch, var(--accent) 35%, transparent);
    --surface-hover-lift: translateY(-4px);
    --surface-hover-shadow: 0 0 45px -4px color-mix(in oklch, var(--accent) 55%, transparent);
    --surface-btn-radius: 9999px;
    --surface-btn-shadow: 0 0 25px -4px color-mix(in oklch, var(--accent) 50%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.3s ease;
    padding: 2px;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklch, var(--accent) 30%, var(--primary)), var(--accent));
}

.surface-aurora > :is(section, div) {
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 0 44px -10px color-mix(in oklch, var(--accent) 55%, transparent);
}

.surface-aurora .s-card {
    border-radius: 0.85rem;
    border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
    box-shadow: 0 8px 25px -6px color-mix(in oklch, var(--accent) 25%, transparent);
    transition: all 0.3s ease;
}

.surface-aurora .s-card:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 35px -4px color-mix(in oklch, var(--accent) 45%, transparent);
    transform: translateY(-4px);
}

.surface-aurora .s-btn {
    border-radius: 9999px;
    box-shadow: 0 0 20px -2px color-mix(in oklch, var(--accent) 45%, transparent);
}

.surface-aurora .s-btn:hover {
    transform: translateY(-2px);
}

.surface-aurora .s-badge {
    border-radius: 9999px;
    border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
    background: color-mix(in oklch, var(--accent) 12%, transparent);
}

/* Surface: Noir Luxe (luxe) */
.surface-luxe {
    --surface-radius: 0.25rem;
    --surface-border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
    --surface-shadow: 0 4px 20px color-mix(in oklch, var(--primary) 10%, transparent);
    --surface-hover-lift: translateY(-3px);
    --surface-hover-shadow: 0 10px 30px color-mix(in oklch, var(--accent) 20%, transparent);
    --surface-btn-radius: 0.25rem;
    --surface-btn-shadow: 0 2px 8px color-mix(in oklch, var(--accent) 25%, transparent);
    --surface-badge-radius: 0.25rem;
    --surface-transition: all 0.25s ease;
    background: color-mix(in oklch, var(--primary) 6%, var(--background));
    border-top: 1px solid color-mix(in oklch, var(--accent) 55%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--accent) 55%, transparent);
}

.surface-luxe .s-card {
    border-radius: 0.25rem;
    border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
    box-shadow: 0 4px 18px color-mix(in oklch, var(--primary) 8%, transparent);
    transition: all 0.25s ease;
}

.surface-luxe .s-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--accent) 22%, transparent);
}

.surface-luxe .s-btn {
    border-radius: 0.25rem;
    border: 1px solid var(--accent);
}

.surface-luxe .s-badge {
    border-radius: 0.25rem;
    border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
}

/* Surface: Handmade Paper (paper) */
.surface-paper {
    --surface-radius: 0.375rem;
    --surface-border: 1px solid color-mix(in oklch, var(--foreground) 14%, transparent);
    --surface-shadow: 0 2px 6px color-mix(in oklch, var(--primary) 8%, transparent), inset 0 1px 3px color-mix(in oklch, white 40%, transparent);
    --surface-hover-lift: translateY(-2px);
    --surface-hover-shadow: 0 6px 14px color-mix(in oklch, var(--primary) 14%, transparent), inset 0 1px 3px color-mix(in oklch, white 50%, transparent);
    --surface-btn-radius: 0.375rem;
    --surface-badge-radius: 0.25rem;
    --surface-transition: all 0.25s ease;
    background: radial-gradient(ellipse at 20% 10%, color-mix(in oklch, white 60%, transparent), transparent 55%), color-mix(in oklch, var(--accent) 6%, var(--background));
    box-shadow: inset 0 2px 12px color-mix(in oklch, var(--primary) 10%, transparent);
}

.surface-paper .s-card {
    border-radius: 0.375rem;
    border: 1px solid color-mix(in oklch, var(--foreground) 15%, transparent);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--primary) 8%, transparent), inset 0 1px 2px color-mix(in oklch, white 50%, transparent);
    transition: all 0.25s ease;
}

.surface-paper .s-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px color-mix(in oklch, var(--primary) 14%, transparent);
}

.surface-paper .s-btn {
    border-radius: 0.375rem;
}

.surface-paper .s-badge {
    border-radius: 0.25rem;
}

/* Surface: Neumorphism (neumo) */
.surface-neumo {
    --surface-radius: 1.25rem;
    --surface-border: 1px solid transparent;
    --surface-shadow: 8px 8px 20px color-mix(in oklch, var(--primary) 18%, transparent), -8px -8px 20px color-mix(in oklch, white 50%, transparent);
    --surface-hover-lift: translateY(-3px);
    --surface-hover-shadow: 12px 12px 26px color-mix(in oklch, var(--primary) 25%, transparent), -10px -10px 24px color-mix(in oklch, white 65%, transparent);
    --surface-btn-radius: 1rem;
    --surface-btn-shadow: 4px 4px 12px color-mix(in oklch, var(--primary) 20%, transparent), -4px -4px 12px color-mix(in oklch, white 50%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.3s ease;
    background: color-mix(in oklch, var(--foreground) 4%, var(--background));
    padding: 1.25rem;
}

.surface-neumo > :is(section, div) {
    border-radius: 1.25rem !important;
    overflow: hidden;
    background: linear-gradient(145deg, var(--card), color-mix(in oklch, var(--foreground) 5%, var(--card)));
    box-shadow: 10px 10px 26px color-mix(in oklch, var(--primary) 20%, transparent), -8px -8px 22px color-mix(in oklch, white 55%, transparent);
    border: 1px solid transparent;
}

.surface-neumo .s-card {
    border-radius: 1.25rem;
    background: linear-gradient(145deg, var(--card), color-mix(in oklch, var(--foreground) 4%, var(--card)));
    box-shadow: 8px 8px 20px color-mix(in oklch, var(--primary) 18%, transparent), -8px -8px 20px color-mix(in oklch, white 50%, transparent);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.surface-neumo .s-card:hover {
    transform: translateY(-3px);
    box-shadow: 12px 12px 26px color-mix(in oklch, var(--primary) 25%, transparent), -10px -10px 24px color-mix(in oklch, white 65%, transparent);
}

.surface-neumo .s-card:active {
    box-shadow: inset 4px 4px 10px color-mix(in oklch, var(--primary) 20%, transparent), inset -4px -4px 10px color-mix(in oklch, white 50%, transparent);
}

.surface-neumo .s-btn {
    border-radius: 1rem;
    box-shadow: 5px 5px 12px color-mix(in oklch, var(--primary) 22%, transparent), -5px -5px 12px color-mix(in oklch, white 55%, transparent);
}

.surface-neumo .s-btn:active {
    box-shadow: inset 3px 3px 8px color-mix(in oklch, var(--primary) 25%, transparent), inset -3px -3px 8px color-mix(in oklch, white 50%, transparent);
}

.surface-neumo .s-badge {
    border-radius: 9999px;
    box-shadow: 2px 2px 6px color-mix(in oklch, var(--primary) 14%, transparent), -2px -2px 6px color-mix(in oklch, white 45%, transparent);
}

/* Surface: Memphis Pop (memphis) */
.surface-memphis {
    --surface-radius: 0.35rem;
    --surface-border: 2.5px solid var(--foreground);
    --surface-shadow: 5px 5px 0 var(--foreground);
    --surface-hover-lift: rotate(-0.75deg) translateY(-3px);
    --surface-hover-shadow: 7px 7px 0 var(--accent);
    --surface-btn-radius: 0.35rem;
    --surface-btn-shadow: 3px 3px 0 var(--foreground);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    background-image: radial-gradient(color-mix(in oklch, var(--accent) 45%, transparent) 1.5px, transparent 1.6px);
    background-size: 22px 22px;
    background-color: color-mix(in oklch, var(--accent) 5%, var(--background));
    border-top: 3px solid var(--foreground);
    border-bottom: 3px solid var(--foreground);
}

.surface-memphis .s-card {
    border-radius: 0.35rem;
    border: 2.5px solid var(--foreground);
    box-shadow: 5px 5px 0 var(--foreground);
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.surface-memphis .s-card:hover {
    transform: rotate(-0.75deg) translateY(-3px);
    box-shadow: 7px 7px 0 var(--accent);
}

.surface-memphis .s-btn {
    border-radius: 0.35rem;
    border: 2.5px solid var(--foreground);
    box-shadow: 3px 3px 0 var(--foreground);
}

.surface-memphis .s-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--accent);
}

.surface-memphis .s-badge {
    border-radius: 9999px;
    border: 2px solid var(--foreground);
    font-weight: 700;
}

/* Surface: Vaporwave Grid (vapor) */
.surface-vapor {
    --surface-radius: 0.5rem;
    --surface-border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
    --surface-shadow: 0 0 25px -5px color-mix(in oklch, var(--accent) 35%, transparent);
    --surface-hover-lift: translateY(-4px);
    --surface-hover-shadow: 0 0 35px 0 color-mix(in oklch, var(--accent) 50%, transparent), 0 8px 20px color-mix(in oklch, var(--primary) 30%, transparent);
    --surface-btn-radius: 0.5rem;
    --surface-btn-shadow: 0 0 15px color-mix(in oklch, var(--accent) 40%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.25s ease;
    background: repeating-linear-gradient(0deg, transparent 0 26px, color-mix(in oklch, var(--accent) 14%, transparent) 26px 28px), linear-gradient(180deg, color-mix(in oklch, var(--accent) 14%, transparent), color-mix(in oklch, var(--primary) 16%, transparent));
}

.surface-vapor .s-card {
    border-radius: 0.5rem;
    border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
    box-shadow: 0 0 20px -5px color-mix(in oklch, var(--accent) 30%, transparent);
    transition: all 0.25s ease;
}

.surface-vapor .s-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 0 32px -2px color-mix(in oklch, var(--accent) 50%, transparent);
}

.surface-vapor .s-btn {
    border-radius: 0.5rem;
    border: 1px solid var(--accent);
    box-shadow: 0 0 15px color-mix(in oklch, var(--accent) 40%, transparent);
}

.surface-vapor .s-badge {
    border-radius: 9999px;
    border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
}

/* Surface: Cyberpunk FUI (cyber) */
.surface-cyber {
    --surface-radius: 0.15rem;
    --surface-border: 1px solid color-mix(in oklch, var(--accent) 65%, transparent);
    --surface-shadow: 0 0 20px -4px color-mix(in oklch, var(--accent) 45%, transparent);
    --surface-hover-lift: translateY(-3px);
    --surface-hover-shadow: 0 0 30px color-mix(in oklch, var(--accent) 65%, transparent);
    --surface-btn-radius: 0.15rem;
    --surface-btn-shadow: 0 0 15px color-mix(in oklch, var(--accent) 50%, transparent);
    --surface-badge-radius: 0.15rem;
    --surface-transition: all 0.2s ease;
    background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in oklch, var(--accent) 7%, transparent) 3px 4px), color-mix(in oklch, var(--primary) 92%, black);
    border-top: 1px solid color-mix(in oklch, var(--accent) 65%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--accent) 65%, transparent);
    box-shadow: 0 0 34px -8px color-mix(in oklch, var(--accent) 55%, transparent);
}

.surface-cyber .s-card {
    border-radius: 0.15rem;
    border: 1px solid color-mix(in oklch, var(--accent) 65%, transparent);
    box-shadow: 0 0 18px -4px color-mix(in oklch, var(--accent) 40%, transparent);
    transition: all 0.2s ease;
}

.surface-cyber .s-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 28px color-mix(in oklch, var(--accent) 65%, transparent);
}

.surface-cyber .s-btn {
    border-radius: 0.15rem;
    border: 1px solid var(--accent);
    box-shadow: 0 0 14px color-mix(in oklch, var(--accent) 50%, transparent);
}

.surface-cyber .s-badge {
    border-radius: 0.15rem;
    border: 1px solid color-mix(in oklch, var(--accent) 60%, transparent);
}

/* Surface: Tactical HUD (hud) */
.surface-hud {
    --surface-radius: 0px;
    --surface-border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
    --surface-shadow: inset 0 0 12px color-mix(in oklch, var(--accent) 15%, transparent);
    --surface-hover-lift: translateY(-2px);
    --surface-hover-shadow: inset 0 0 16px color-mix(in oklch, var(--accent) 25%, transparent), 0 4px 16px color-mix(in oklch, var(--accent) 20%, transparent);
    --surface-btn-radius: 0px;
    --surface-btn-shadow: inset 0 0 8px color-mix(in oklch, var(--accent) 20%, transparent);
    --surface-badge-radius: 0px;
    --surface-transition: all 0.15s ease;
    position: relative;
    border: 1px solid color-mix(in oklch, var(--accent) 38%, transparent);
    background: color-mix(in oklch, var(--primary) 4%, transparent);
}

.surface-hud .s-card {
    border-radius: 0 !important;
    border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
    box-shadow: inset 0 0 12px color-mix(in oklch, var(--accent) 12%, transparent);
    transition: all 0.15s ease;
}

.surface-hud .s-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: inset 0 0 16px color-mix(in oklch, var(--accent) 25%, transparent), 0 4px 14px color-mix(in oklch, var(--accent) 25%, transparent);
}

.surface-hud .s-btn {
    border-radius: 0 !important;
    border: 1px solid var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.surface-hud .s-badge {
    border-radius: 0 !important;
    border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
    text-transform: uppercase;
}

.surface-hud::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    top: 6px;
    left: 6px;
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
}

.surface-hud::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    bottom: 6px;
    right: 6px;
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
}

/* Surface: Solarpunk (solar) */
.surface-solar {
    --surface-radius: 1.25rem;
    --surface-border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
    --surface-shadow: 0 10px 28px -8px color-mix(in oklch, var(--accent) 22%, transparent);
    --surface-hover-lift: translateY(-4px);
    --surface-hover-shadow: 0 16px 36px -6px color-mix(in oklch, var(--accent) 35%, transparent);
    --surface-btn-radius: 1rem;
    --surface-btn-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 25%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.3s ease;
    background: radial-gradient(480px 220px at 15% 20%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 70%), radial-gradient(520px 260px at 85% 80%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 70%), color-mix(in oklch, var(--accent) 4%, var(--background));
    border-top: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
}

.surface-solar .s-card {
    border-radius: 1.25rem;
    border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
    box-shadow: 0 10px 28px -8px color-mix(in oklch, var(--accent) 20%, transparent);
    transition: all 0.3s ease;
}

.surface-solar .s-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -6px color-mix(in oklch, var(--accent) 32%, transparent);
    border-color: var(--accent);
}

.surface-solar .s-btn {
    border-radius: 1rem;
    box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 25%, transparent);
}

.surface-solar .s-badge {
    border-radius: 9999px;
}

/* Surface: Y2K Liquid Chrome (y2k) */
.surface-y2k {
    --surface-radius: 1.75rem;
    --surface-border: 1px solid color-mix(in oklch, white 70%, transparent);
    --surface-shadow: 0 16px 40px -15px color-mix(in oklch, var(--accent) 45%, transparent), inset 0 1px 0 color-mix(in oklch, white 80%, transparent);
    --surface-hover-lift: translateY(-4px) scale(1.015);
    --surface-hover-shadow: 0 22px 50px -12px color-mix(in oklch, var(--accent) 55%, transparent), inset 0 1px 1px white;
    --surface-btn-radius: 9999px;
    --surface-btn-shadow: 0 8px 24px -6px color-mix(in oklch, var(--accent) 50%, transparent), inset 0 2px 0 color-mix(in oklch, white 80%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    padding: 1rem;
}

.surface-y2k > :is(section, div) {
    border-radius: 1.75rem !important;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in oklch, white 55%, var(--card)), color-mix(in oklch, var(--accent) 16%, var(--card)) 45%, color-mix(in oklch, var(--primary) 18%, var(--card)));
    border: 1px solid color-mix(in oklch, white 65%, transparent) !important;
    box-shadow: 0 18px 44px -18px color-mix(in oklch, var(--accent) 55%, transparent), inset 0 1px 0 color-mix(in oklch, white 70%, transparent);
}

.surface-y2k .s-card {
    border-radius: 1.75rem !important;
    border: 1px solid color-mix(in oklch, white 70%, transparent) !important;
    box-shadow: 0 16px 40px -15px color-mix(in oklch, var(--accent) 45%, transparent), inset 0 1px 0 color-mix(in oklch, white 80%, transparent);
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.surface-y2k .s-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 22px 50px -12px color-mix(in oklch, var(--accent) 55%, transparent), inset 0 1px 1px white;
}

.surface-y2k .s-btn {
    border-radius: 9999px !important;
    box-shadow: 0 8px 24px -6px color-mix(in oklch, var(--accent) 50%, transparent), inset 0 2px 0 color-mix(in oklch, white 80%, transparent);
}

.surface-y2k .s-badge {
    border-radius: 9999px !important;
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 80%, transparent);
}

/* Surface: Skeuomorphism (skeuomorphism) */
.surface-skeuomorphism {
    --surface-radius: 0.85rem;
    --surface-border: 1px solid color-mix(in oklch, var(--foreground) 18%, transparent);
    --surface-shadow: 0 12px 26px -6px color-mix(in oklch, var(--primary) 22%, transparent), 0 3px 6px -2px color-mix(in oklch, var(--primary) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --surface-hover-lift: translateY(-3px);
    --surface-hover-shadow: 0 18px 34px -4px color-mix(in oklch, var(--primary) 28%, transparent), 0 6px 10px -2px color-mix(in oklch, var(--primary) 16%, transparent), inset 0 1px 0 white;
    --surface-btn-radius: 0.5rem;
    --surface-btn-shadow: 0 4px 10px color-mix(in oklch, var(--primary) 20%, transparent), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -2px 0 color-mix(in oklch, var(--primary) 18%, transparent);
    --surface-badge-radius: 0.35rem;
    --surface-transition: all 0.25s ease;
    padding: 1.25rem;
}

.surface-skeuomorphism > :is(section, div) {
    border-radius: 0.85rem !important;
    background: linear-gradient(180deg, color-mix(in oklch, white 25%, var(--card)), var(--card));
    border: 1px solid color-mix(in oklch, var(--foreground) 18%, transparent);
    box-shadow: 0 14px 28px -6px color-mix(in oklch, var(--primary) 25%, transparent), 0 4px 8px -2px color-mix(in oklch, var(--primary) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.surface-skeuomorphism .s-card {
    border-radius: 0.85rem;
    border: 1px solid color-mix(in oklch, var(--foreground) 18%, transparent);
    box-shadow: 0 12px 26px -6px color-mix(in oklch, var(--primary) 22%, transparent), 0 3px 6px -2px color-mix(in oklch, var(--primary) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.25s ease;
}

.surface-skeuomorphism .s-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -4px color-mix(in oklch, var(--primary) 28%, transparent), 0 6px 10px -2px color-mix(in oklch, var(--primary) 16%, transparent), inset 0 1px 0 white;
}

.surface-skeuomorphism .s-btn {
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px color-mix(in oklch, var(--primary) 20%, transparent), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -2px 0 color-mix(in oklch, var(--primary) 18%, transparent);
}

.surface-skeuomorphism .s-badge {
    border-radius: 0.35rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Surface: Retro Futurism (retro-futurism) */
.surface-retro-futurism {
    --surface-radius: 1.5rem;
    --surface-border: 2px solid color-mix(in oklch, var(--accent) 45%, transparent);
    --surface-shadow: 0 0 20px color-mix(in oklch, var(--accent) 22%, transparent), inset 0 0 15px color-mix(in oklch, var(--accent) 15%, transparent);
    --surface-hover-lift: translateY(-3px);
    --surface-hover-shadow: 0 0 30px color-mix(in oklch, var(--accent) 40%, transparent), inset 0 0 20px color-mix(in oklch, var(--accent) 25%, transparent);
    --surface-btn-radius: 0.75rem;
    --surface-btn-shadow: 0 0 12px color-mix(in oklch, var(--accent) 30%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.25s ease;
    background: radial-gradient(ellipse at center, color-mix(in oklch, var(--accent) 8%, var(--card)) 0%, color-mix(in oklch, var(--primary) 85%, black) 100%);
    border: 2px solid color-mix(in oklch, var(--accent) 45%, transparent);
    box-shadow: inset 0 0 30px color-mix(in oklch, var(--accent) 20%, transparent), 0 0 20px color-mix(in oklch, var(--accent) 25%, transparent);
    border-radius: 1.5rem;
}

.surface-retro-futurism .s-card {
    border-radius: 1.5rem;
    border: 2px solid color-mix(in oklch, var(--accent) 45%, transparent);
    box-shadow: 0 0 20px color-mix(in oklch, var(--accent) 22%, transparent), inset 0 0 15px color-mix(in oklch, var(--accent) 15%, transparent);
    transition: all 0.25s ease;
}

.surface-retro-futurism .s-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px color-mix(in oklch, var(--accent) 40%, transparent), inset 0 0 20px color-mix(in oklch, var(--accent) 25%, transparent);
}

.surface-retro-futurism .s-btn {
    border-radius: 0.75rem;
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 30%, transparent);
}

.surface-retro-futurism .s-badge {
    border-radius: 9999px;
    border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
}

/* Surface: Synthwave Neon (synthwave) */
.surface-synthwave {
    --surface-radius: 0.5rem;
    --surface-border: 1.5px solid var(--accent);
    --surface-shadow: 0 0 24px -4px color-mix(in oklch, var(--accent) 40%, transparent);
    --surface-hover-lift: translateY(-4px);
    --surface-hover-shadow: 0 0 36px 0 color-mix(in oklch, var(--accent) 55%, transparent);
    --surface-btn-radius: 0.5rem;
    --surface-btn-shadow: 0 0 16px color-mix(in oklch, var(--accent) 45%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.25s ease;
    background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 15%, #0d0221) 0%, #0d0221 100%);
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid color-mix(in oklch, var(--accent) 40%, var(--primary));
    box-shadow: 0 0 35px -5px color-mix(in oklch, var(--accent) 45%, transparent);
}

.surface-synthwave .s-card {
    border-radius: 0.5rem;
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 22px -4px color-mix(in oklch, var(--accent) 40%, transparent);
    transition: all 0.25s ease;
}

.surface-synthwave .s-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 36px 0 color-mix(in oklch, var(--accent) 55%, transparent);
}

.surface-synthwave .s-btn {
    border-radius: 0.5rem;
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 16px color-mix(in oklch, var(--accent) 45%, transparent);
}

.surface-synthwave .s-badge {
    border-radius: 9999px;
    border: 1px solid var(--accent);
}

/* Surface: Pixel Art 8-Bit (pixel-art) */
.surface-pixel-art {
    --surface-radius: 0px;
    --surface-border: 3px solid var(--foreground);
    --surface-shadow: 4px 4px 0 var(--accent);
    --surface-hover-lift: translate(-2px, -2px);
    --surface-hover-shadow: 6px 6px 0 var(--foreground);
    --surface-btn-radius: 0px;
    --surface-btn-shadow: 3px 3px 0 var(--foreground);
    --surface-badge-radius: 0px;
    --surface-transition: all 0.1s ease;
    padding: 1rem;
}

.surface-pixel-art > :is(section, div) {
    border: 4px solid var(--foreground) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--accent), -4px -4px 0 var(--card) !important;
}

.surface-pixel-art .s-card {
    border-radius: 0 !important;
    border: 3px solid var(--foreground) !important;
    box-shadow: 4px 4px 0 var(--accent) !important;
    transition: all 0.1s ease;
}

.surface-pixel-art .s-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--foreground) !important;
}

.surface-pixel-art .s-card:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--foreground) !important;
}

.surface-pixel-art .s-btn {
    border-radius: 0 !important;
    border: 3px solid var(--foreground) !important;
    box-shadow: 3px 3px 0 var(--foreground) !important;
}

.surface-pixel-art .s-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--accent) !important;
}

.surface-pixel-art .s-badge {
    border-radius: 0 !important;
    border: 2px solid var(--foreground) !important;
}

/* Surface: Editorial Archive (editorial-archive) */
.surface-editorial-archive {
    --surface-radius: 0px;
    --surface-border: 1px solid color-mix(in oklch, var(--foreground) 20%, transparent);
    --surface-shadow: 0 2px 10px color-mix(in oklch, var(--primary) 6%, transparent);
    --surface-hover-lift: translateY(-2px);
    --surface-hover-shadow: 0 8px 20px color-mix(in oklch, var(--primary) 12%, transparent);
    --surface-btn-radius: 0px;
    --surface-btn-shadow: none;
    --surface-badge-radius: 0px;
    --surface-transition: all 0.25s ease;
    border-top: 3px double color-mix(in oklch, var(--foreground) 35%, transparent);
    border-bottom: 3px double color-mix(in oklch, var(--foreground) 35%, transparent);
    background: color-mix(in oklch, var(--background) 95%, var(--accent));
}

.surface-editorial-archive .s-card {
    border-radius: 0 !important;
    border: 1px solid color-mix(in oklch, var(--foreground) 20%, transparent);
    box-shadow: 0 2px 10px color-mix(in oklch, var(--primary) 6%, transparent);
    transition: all 0.25s ease;
}

.surface-editorial-archive .s-card:hover {
    border-color: var(--foreground);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in oklch, var(--primary) 12%, transparent);
}

.surface-editorial-archive .s-btn {
    border-radius: 0 !important;
    border: 1px solid var(--foreground);
}

.surface-editorial-archive .s-badge {
    border-radius: 0 !important;
    border: 1px solid color-mix(in oklch, var(--foreground) 30%, transparent);
}

/* Surface: Linear Dark (linear-dark) */
.surface-linear-dark {
    --surface-radius: 0.75rem;
    --surface-border: 1px solid color-mix(in oklch, var(--foreground) 12%, transparent);
    --surface-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
    --surface-hover-lift: translateY(-2px);
    --surface-hover-shadow: 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
    --surface-btn-radius: 0.5rem;
    --surface-btn-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.2s ease;
    background: color-mix(in oklch, var(--foreground) 3%, var(--card));
    border: 1px solid color-mix(in oklch, var(--foreground) 12%, transparent);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.06);
    border-radius: 0.75rem;
}

.surface-linear-dark .s-card {
    border-radius: 0.75rem;
    border: 1px solid color-mix(in oklch, var(--foreground) 12%, transparent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: all 0.2s ease;
}

.surface-linear-dark .s-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
    border-color: color-mix(in oklch, var(--foreground) 25%, transparent);
}

.surface-linear-dark .s-btn {
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
}

.surface-linear-dark .s-badge {
    border-radius: 9999px;
    border: 1px solid color-mix(in oklch, var(--foreground) 15%, transparent);
}

/* Surface: Swiss Typographic (swiss-typographic) */
.surface-swiss-typographic {
    --surface-radius: 0px;
    --surface-border: 1px solid var(--foreground);
    --surface-shadow: none;
    --surface-hover-lift: none;
    --surface-hover-shadow: none;
    --surface-btn-radius: 0px;
    --surface-btn-shadow: none;
    --surface-badge-radius: 0px;
    --surface-transition: all 0.15s ease;
    border-left: 6px solid var(--foreground);
    border-top: 1px solid var(--foreground);
    padding: 1rem;
}

.surface-swiss-typographic .s-card {
    border-radius: 0 !important;
    border: 1px solid var(--foreground);
    border-left: 4px solid var(--foreground);
    box-shadow: none !important;
}

.surface-swiss-typographic .s-card:hover {
    border-left-color: var(--accent);
}

.surface-swiss-typographic .s-btn {
    border-radius: 0 !important;
    border: 2px solid var(--foreground);
    box-shadow: none !important;
}

.surface-swiss-typographic .s-badge {
    border-radius: 0 !important;
    border: 1px solid var(--foreground);
}

/* Surface: Flat 2.0 (flat-2) */
.surface-flat-2 {
    --surface-radius: 0.5rem;
    --surface-border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
    --surface-shadow: 0 4px 18px -4px color-mix(in oklch, var(--primary) 12%, transparent);
    --surface-hover-lift: translateY(-3px);
    --surface-hover-shadow: 0 10px 25px -4px color-mix(in oklch, var(--primary) 18%, transparent);
    --surface-btn-radius: 0.375rem;
    --surface-btn-shadow: 0 2px 6px color-mix(in oklch, var(--primary) 10%, transparent);
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.25s ease;
    border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
    box-shadow: 0 4px 20px -4px color-mix(in oklch, var(--primary) 10%, transparent);
    border-radius: 0.5rem;
}

.surface-flat-2 .s-card {
    border-radius: 0.5rem;
    border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
    box-shadow: 0 4px 18px -4px color-mix(in oklch, var(--primary) 12%, transparent);
    transition: all 0.25s ease;
}

.surface-flat-2 .s-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -4px color-mix(in oklch, var(--primary) 18%, transparent);
}

.surface-flat-2 .s-btn {
    border-radius: 0.375rem;
    box-shadow: 0 2px 6px color-mix(in oklch, var(--primary) 10%, transparent);
}

.surface-flat-2 .s-badge {
    border-radius: 9999px;
}

/* Surface: Frutiger Aero (frutiger-aero) */
.surface-frutiger-aero {
    --surface-radius: 1.25rem;
    --surface-border: 1px solid color-mix(in oklch, white 70%, transparent);
    --surface-shadow: 0 12px 30px -10px color-mix(in oklch, var(--accent) 40%, transparent), inset 0 2px 4px white;
    --surface-hover-lift: translateY(-4px) scale(1.01);
    --surface-hover-shadow: 0 18px 40px -8px color-mix(in oklch, var(--accent) 50%, transparent), inset 0 2px 4px white;
    --surface-btn-radius: 9999px;
    --surface-btn-shadow: 0 6px 16px -2px color-mix(in oklch, var(--accent) 45%, transparent), inset 0 2px 3px white;
    --surface-badge-radius: 9999px;
    --surface-transition: all 0.3s ease;
    background: linear-gradient(180deg, color-mix(in oklch, white 65%, transparent) 0%, color-mix(in oklch, var(--accent) 15%, transparent) 50%, color-mix(in oklch, var(--primary) 12%, transparent) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid color-mix(in oklch, white 70%, transparent);
    box-shadow: 0 12px 30px -10px color-mix(in oklch, var(--accent) 40%, transparent), inset 0 2px 4px white;
    border-radius: 1.25rem;
}

.surface-frutiger-aero .s-card {
    border-radius: 1.25rem;
    border: 1px solid color-mix(in oklch, white 70%, transparent);
    box-shadow: 0 12px 30px -10px color-mix(in oklch, var(--accent) 40%, transparent), inset 0 2px 4px white;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.surface-frutiger-aero .s-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 18px 40px -8px color-mix(in oklch, var(--accent) 50%, transparent), inset 0 2px 4px white;
}

.surface-frutiger-aero .s-btn {
    border-radius: 9999px;
    box-shadow: 0 6px 16px -2px color-mix(in oklch, var(--accent) 45%, transparent), inset 0 2px 3px white;
}

.surface-frutiger-aero .s-badge {
    border-radius: 9999px;
    box-shadow: inset 0 1px 2px white;
}

/* Surface: Anti-Design (anti-design) */
.surface-anti-design {
    --surface-radius: 0px;
    --surface-border: 3px dashed var(--foreground);
    --surface-shadow: 4px 4px 0 color-mix(in oklch, var(--accent) 70%, transparent);
    --surface-hover-lift: rotate(0.8deg) scale(1.01);
    --surface-hover-shadow: 6px 6px 0 var(--foreground);
    --surface-btn-radius: 0px;
    --surface-btn-shadow: 3px 3px 0 var(--foreground);
    --surface-badge-radius: 0px;
    --surface-transition: all 0.15s ease;
    padding: 1.5rem;
    border: 3px dashed var(--foreground);
    background: color-mix(in oklch, var(--accent) 12%, var(--background));
}

.surface-anti-design > :is(section, div) {
    transform: rotate(-0.5deg);
}

.surface-anti-design .s-card {
    border-radius: 0 !important;
    border: 2px dashed var(--foreground);
    box-shadow: 4px 4px 0 color-mix(in oklch, var(--accent) 70%, transparent);
    transition: all 0.15s ease;
}

.surface-anti-design .s-card:hover {
    transform: rotate(0.8deg) scale(1.01);
    box-shadow: 6px 6px 0 var(--foreground);
}

.surface-anti-design .s-btn {
    border-radius: 0 !important;
    border: 2px solid var(--foreground);
    box-shadow: 3px 3px 0 var(--foreground);
}

.surface-anti-design .s-badge {
    border-radius: 0 !important;
    border: 1.5px dashed var(--foreground);
}

/* Surface: Deconstructivism (deconstructivism) */
.surface-deconstructivism {
    --surface-radius: 0px;
    --surface-border: 2px solid var(--foreground);
    --surface-shadow: -4px 4px 0 var(--accent);
    --surface-hover-lift: translate(2px, -2px);
    --surface-hover-shadow: -6px 6px 0 var(--foreground);
    --surface-btn-radius: 0px;
    --surface-btn-shadow: -2px 2px 0 var(--foreground);
    --surface-badge-radius: 0px;
    --surface-transition: all 0.15s ease;
    position: relative;
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--foreground);
}

.surface-deconstructivism .s-card {
    border-radius: 0 !important;
    border: 2px solid var(--foreground);
    box-shadow: -4px 4px 0 var(--accent);
    transition: all 0.15s ease;
}

.surface-deconstructivism .s-card:hover {
    transform: translate(2px, -2px);
    box-shadow: -6px 6px 0 var(--foreground);
}

.surface-deconstructivism .s-btn {
    border-radius: 0 !important;
    border: 2px solid var(--foreground);
    box-shadow: -2px 2px 0 var(--foreground);
}

.surface-deconstructivism .s-badge {
    border-radius: 0 !important;
    border: 1px solid var(--foreground);
}

.surface-deconstructivism::before {
    content: "";
    position: absolute;
    top: -4px;
    right: 20px;
    width: 60px;
    height: 8px;
    background: var(--accent);
}