/* file: assets/css/style.css */
body {
    font-family: 'Texturina', serif;
    background-color: #f8f9fa;
    color: #333;
}

/* Base Primary Color variables */
:root {
    --primary-color: #cd112a;
    --primary-light: #e62e45;
    --primary-dark: #a80e22;
}

/* Claymorphism Base Style */
.clay-card {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 
        10px 10px 20px #d9d9d9,
        -10px -10px 20px #ffffff,
        inset 2px 2px 5px rgba(255, 255, 255, 0.5),
        inset -3px -3px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255,255,255,0.8);
    transition: all 0.3s ease;
}

/* Claymorphism Primary (Red) */
.clay-btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 16px;
    box-shadow: 
        6px 6px 12px rgba(205, 17, 42, 0.3),
        -6px -6px 12px rgba(255, 255, 255, 0.8),
        inset 2px 2px 4px rgba(255, 255, 255, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.2);
    border: none;
    transition: all 0.2s ease-in-out;
}

.clay-btn-primary:active {
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.2),
        inset -4px -4px 8px rgba(255, 255, 255, 0.3);
    transform: translateY(2px);
}

/* Form Inputs */
.clay-input {
    background-color: #f0f2f5;
    border-radius: 12px;
    border: none;
    box-shadow: 
        inset 4px 4px 8px #d9d9d9,
        inset -4px -4px 8px #ffffff;
    padding: 12px 16px;
    outline: none;
    transition: all 0.3s ease;
    width: 100%;
}

.clay-input:focus {
    box-shadow: 
        inset 6px 6px 10px #d9d9d9,
        inset -6px -6px 10px #ffffff,
        0 0 0 3px rgba(205, 17, 42, 0.2);
}

/* Bottom Navigation */
.clay-nav {
    background-color: #ffffff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 
        0 -10px 20px rgba(0,0,0,0.05),
        inset 0 2px 5px rgba(255, 255, 255, 0.8);
}

.nav-item {
    color: #888;
    transition: all 0.3s ease;
}

.nav-item.active {
    color: var(--primary-color);
    transform: translateY(-5px);
}

.nav-item.active i {
    text-shadow: 0 4px 8px rgba(205, 17, 42, 0.4);
}

/* Animations */
.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}