/* BrickVault Design System */

/* Form inputs - theme aware */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background-color: rgb(241 245 249);
    border: 1px solid rgb(226 232 240);
    color: rgb(15 23 42);
}
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark select,
.dark textarea {
    background-color: rgb(30 41 59);
    border-color: rgb(51 65 85);
    color: rgb(248 250 252);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgb(249 115 22);
    border-color: transparent;
}
input::placeholder,
textarea::placeholder {
    color: rgb(100 116 139);
}

/* Card skeleton loading (CSS-only) */
.skeleton {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-color: rgb(226 232 240);
    border-radius: 0.25rem;
}
.dark .skeleton {
    background-color: rgb(51 65 85);
}
.skeleton-text {
    height: 1rem;
    border-radius: 0.25rem;
    background-color: rgb(226 232 240);
}
.dark .skeleton-text {
    background-color: rgb(51 65 85);
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}