@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
	--zgt-primary: #6366f1;
	--zgt-primary-hover: #4f46e5;
	--zgt-bg-card: #ffffff;
	--zgt-border-color: #e2e8f0;
	--zgt-text-main: #1e293b;
	--zgt-text-muted: #64748b;
	--zgt-success: #10b981;
	--zgt-info: #3b82f6;
	--zgt-warning: #f59e0b;
	--zgt-danger: #ef4444;
	
	--zgt-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--zgt-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--zgt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--zgt-radius-md: 12px;
	--zgt-radius-sm: 6px;
	--zgt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body, html, #zgt-react-root, .wrap {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Service Intake Form styling override to match Indigo/Slate premium scheme */
.zgt-sr-form {
    font-family: 'Outfit', sans-serif !important;
    background: var(--zgt-bg-card) !important;
    border: 1px solid var(--zgt-border-color) !important;
    box-shadow: var(--zgt-shadow-lg) !important;
}

.zgt-sr-form h2 {
    color: var(--zgt-primary) !important;
    border-bottom: 2px solid var(--zgt-border-color) !important;
}

.zgt-sr-group label {
    color: var(--zgt-text-main) !important;
}

.zgt-sr-group input, 
.zgt-sr-group select, 
.zgt-sr-group textarea {
    border-color: var(--zgt-border-color) !important;
    font-family: 'Outfit', sans-serif !important;
}

.zgt-sr-group input:focus, 
.zgt-sr-group textarea:focus, 
.zgt-sr-group select:focus {
    border-color: var(--zgt-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.zgt-sr-repeater {
    background: #f8fafc !important;
    border-color: var(--zgt-border-color) !important;
}

.zgt-sr-repeater h3 {
    color: var(--zgt-primary) !important;
}

.zgt-sr-item {
    border-color: var(--zgt-border-color) !important;
}

.zgt-sr-btn {
    background: var(--zgt-primary) !important;
    transition: var(--zgt-transition) !important;
}

.zgt-sr-btn:hover {
    background: var(--zgt-primary-hover) !important;
}

.zgt-sr-btn-secondary {
    background: #f1f5f9 !important;
    color: var(--zgt-text-main) !important;
}

.zgt-sr-btn-secondary:hover {
    background: #e2e8f0 !important;
}