@import url('tokens.css');

/* Global Container Utilities */
.rf-page-container {
    padding: 24px;
    background-color: var(--rf-canvas);
    min-height: calc(100vh - 70px);
    font-family: var(--rf-font-family);
    color: var(--rf-text-body);
    box-sizing: border-box;
}

/* Universal Form Utilities */
.rf-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    width: 100%;
}

.rf-form-col-12, .rf-form-col-md-12 {
    grid-column: span 12;
}

.rf-form-col-8, .rf-form-col-md-8 {
    grid-column: span 8;
}

.rf-form-col-6, .rf-form-col-md-6 {
    grid-column: span 6;
}

.rf-form-col-4, .rf-form-col-md-4 {
    grid-column: span 4;
}

.rf-form-col-3, .rf-form-col-md-3 {
    grid-column: span 3;
}

@media (max-width: 1024px) {
    .rf-form-col-8, .rf-form-col-md-8 {
        grid-column: span 12;
    }

    .rf-form-col-6, .rf-form-col-md-6 {
        grid-column: span 12;
    }

    .rf-form-col-4, .rf-form-col-md-4 {
        grid-column: span 6;
    }

    .rf-form-col-3, .rf-form-col-md-3 {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    .rf-form-col-4, .rf-form-col-md-4,
    .rf-form-col-3, .rf-form-col-md-3 {
        grid-column: span 12;
    }
}

.rf-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.rf-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Animations */
@keyframes rf-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rf-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rf-slideDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rf-slideInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rf-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.rf-spin {
    animation: rf-spin 0.8s linear infinite;
}