/* Custom styles - theme is defined in index.html */

body {
    font-family: "Urbanist", sans-serif;
}

.btn {
    font-weight: 400;
}

.btn-2xl {
    font-size: 1.5rem;
    padding: 1.75rem;
}

/* Animated button */
.animated-button {
    border-radius: 0;
    position: relative;
    width: fit-content;
    border: none;
    background-color: transparent;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

.animated-button::before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: oklch(52% 0.12 243); /* primary */
    left: 0;
    width: 0;
    transition: width 0.2s ease-out;
}

.animated-button:hover::before {
    width: 100%;
}

.animated-button:not(:hover)::before {
    width: 0;
    left: 100%;
    transition:
        width 0.2s ease-out,
        left 0.2s ease-out;
}

.animated-button:active::before {
    background-color: oklch(88% 0.18 160); /* accent */
    transition: background-color 0.1s ease-in-out;
}

/* Card hover effect */
.card-hover {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}