/* OFreela - CSS Custom Properties e estilos globais */
/* Consultar: DOCS/PRD_IDENTIDADE_VISUAL.md */

:root {
    --color-primary: #b1ec52;
    --color-primary-light: #d9e74c;
    --color-primary-dark: #00814d;
    --color-secondary: #001f3f;
    --color-secondary-light: #015fbc;
    --color-background: #f6f8ed;
    --color-white: #ffffff;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    --font-primary: 'Poppins', system-ui, -apple-system, sans-serif;
    --border-radius: 12px;
    --transition-speed: 200ms;
}

/* Scrollbar customizada */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Auto-hide para flash messages */
.message-auto-hide {
    animation: fadeOut 5s ease-in-out forwards;
}
@keyframes fadeOut {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; display: none; }
}

/* Stepper do onboarding */
.stepper-item {
    position: relative;
}
.stepper-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100%;
    height: 2px;
    background: #e5e7eb;
    transform: translateY(-50%);
}
.stepper-item:last-child::after {
    display: none;
}
.stepper-item.completed::after {
    background: var(--color-primary);
}

/* Sidebar active state */
.sidebar-active {
    background: rgba(177, 236, 82, 0.1);
    color: var(--color-secondary);
    font-weight: 500;
}
.sidebar-active i {
    color: var(--color-primary-dark);
}

/* Input focus ring verde */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(177, 236, 82, 0.3);
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}